update
diff --git a/components/builder.html b/components/builder.html
index e6416b5..fd2f66b 100644
--- a/components/builder.html
+++ b/components/builder.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -7,7 +7,7 @@
     document.head.insertBefore(el, document.getElementById('font-hack'));
 }
 </script><title>ECharts 在线构建</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://echarts.apache.org/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="builder"><div class="page-info"><div id="title" class="container"><h1>在线定制</h1><p>可自由选择所需图表、坐标系、组件进行打包下载,并且可对渲染引擎、兼容及压缩问题进行设置</p><div class="download-version">(version: 4.8.0)</div></div></div><div class="page-content"><div id="configuration" class="container"><a href="builder.html" style="float: right">前往定制 4.x 版本</a><section id="charts"><h3>图表<span>chart</span></h3><p class="desc">选择要打包的图表<span class="warn">(注:开发环境建议不压缩代码,代码压缩会去掉大部分常见的警告和错误提示)</span></p><ul><li class="checked"><img src="https://echarts.apache.org/zh/images/builder/chart/bar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="bar"><h5>柱状图 <div>Bar</div></h5></li><li class="checked"><img src="https://echarts.apache.org/zh/images/builder/chart/line.svg?_v_=20200710_1" alt=""><input type="checkbox" name="line"><h5>折线图 <div>Line</div></h5></li><li class="checked"><img src="https://echarts.apache.org/zh/images/builder/chart/pie.svg?_v_=20200710_1" alt=""><input type="checkbox" name="pie"><h5>饼图 <div>Pie</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/scatter.svg?_v_=20200710_1" alt=""><input type="checkbox" name="scatter"><h5>散点图 <div>Scatter</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/effectScatter.svg?_v_=20200710_1" alt=""><input type="checkbox" name="effectScatter"><h5>涟漪散点图 <div>EffectScatter</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/candlestick.svg?_v_=20200710_1" alt=""><input type="checkbox" name="candlestick"><h5>K线图 <div>Candlestick</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/radar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="radar"><h5>雷达图 <div>Radar</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/heatmap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="heatmap"><h5>热力图 <div>Heatmap</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/tree.svg?_v_=20200710_1" alt=""><input type="checkbox" name="tree"><h5>树图 <div>Tree</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/treemap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="treemap"><h5>矩形树图 <div>Treemap</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/sunburst.svg?_v_=20200710_1" alt=""><input type="checkbox" name="sunburst"><h5>旭日图 <div>Sunburst</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/map.svg?_v_=20200710_1" alt=""><input type="checkbox" name="map"><h5>地图 <div>Map</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/lines.svg?_v_=20200710_1" alt=""><input type="checkbox" name="lines"><h5>线图 <div>Lines</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/graph.svg?_v_=20200710_1" alt=""><input type="checkbox" name="graph"><h5>关系图 <div>Graph</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/boxplot.svg?_v_=20200710_1" alt=""><input type="checkbox" name="boxplot"><h5>箱线图 <div>Boxplot</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/parallel.svg?_v_=20200710_1" alt=""><input type="checkbox" name="parallel"><h5>平行坐标 <div>Parallel</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/gauge.svg?_v_=20200710_1" alt=""><input type="checkbox" name="gauge"><h5>仪表盘 <div>Gauge</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/funnel.svg?_v_=20200710_1" alt=""><input type="checkbox" name="funnel"><h5>漏斗图 <div>Funnel</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/sankey.svg?_v_=20200710_1" alt=""><input type="checkbox" name="sankey"><h5>桑基图 <div>Sankey</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/themeRiver.svg?_v_=20200710_1" alt=""><input type="checkbox" name="themeRiver"><h5>主题河流图 <div>ThemeRiver</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/pictorialBar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="pictorialBar"><h5>象形柱图 <div>PictorialBar</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/custom.svg?_v_=20200710_1" alt=""><input type="checkbox" name="custom"><h5>自定义系列 <div>Custom</div></h5></li></ul></section><section id="coords"><h3>坐标系<span>coordinate systems</span></h3><p class="desc">选择要打包的坐标系,有些图表像散点图,折线图可以被应用到多个坐标系上</p><ul><li class="checked"><img src="https://echarts.apache.org/zh/images/builder/component/gridSimple.svg?_v_=20200710_1" alt=""><input type="checkbox" name="gridSimple"><h5>直角坐标系 <div>Grid</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/polar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="polar"><h5>极坐标系 <div>Polar</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/geo.svg?_v_=20200710_1" alt=""><input type="checkbox" name="geo"><h5>地理坐标系 <div>Geo</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/singleAxis.svg?_v_=20200710_1" alt=""><input type="checkbox" name="singleAxis"><h5>单轴 <div>SingleAxis</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/calendar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="calendar"><h5>日历 <div>Calendar</div></h5></li></ul></section><section id="components"><h3>组件<span>component</span></h3><p class="desc">选择要打包的组件</p><ul><li class="checked"><img src="https://echarts.apache.org/zh/images/builder/component/title.svg?_v_=20200710_1" alt=""><input type="checkbox" name="title"><h5>标题 <div>Title</div></h5></li><li class="checked"><img src="https://echarts.apache.org/zh/images/builder/component/legend.svg?_v_=20200710_1" alt=""><input type="checkbox" name="legendScroll"><h5>图例 <div>Legend</div></h5></li><li class="checked"><img src="https://echarts.apache.org/zh/images/builder/component/tooltip.svg?_v_=20200710_1" alt=""><input type="checkbox" name="tooltip"><h5>提示框 <div>Tooltip</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/markPoint.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markPoint"><h5>标注 <div>MarkPoint</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/markLine.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markLine"><h5>标线 <div>MarkLine</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/markArea.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markArea"><h5>标域 <div>MarkArea</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/timeline.svg?_v_=20200710_1" alt=""><input type="checkbox" name="timeline"><h5>时间轴 <div>Timeline</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/dataZoom.svg?_v_=20200710_1" alt=""><input type="checkbox" name="dataZoom"><h5>数据区域缩放 <div>DataZoom</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/brush.svg?_v_=20200710_1" alt=""><input type="checkbox" name="brush"><h5>刷选 <div>Brush</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/visualMap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="visualMap"><h5>视觉映射 <div>VisualMap</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/toolbox.svg?_v_=20200710_1" alt=""><input type="checkbox" name="toolbox"><h5>工具栏 <div>Toolbox</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/graphic.svg?_v_=20200710_1" alt=""><input type="checkbox" name="graphic"><h5>自定义图形 <div>Graphic</div></h5></li></ul></section><section id="other"><h3>其它选项<span>others</span></h3><div class="other-option"><input type="checkbox" id="svg" name="svg"><label for="svg">SVG 渲染</label><p class="desc">是否包括 SVG 渲染器,从而能支持使用 SVG 来绘制图表</p></div><div class="other-option"><input type="checkbox" id="vml" name="vml"><label for="vml">兼容 IE8</label><p class="desc">是否包括对 IE8 的兼容代码</p></div><div class="other-option"><input type="checkbox" id="api" name="api" checked="checked"><label for="api">工具集</label><p class="desc">是否在 echarts 对象上挂载常用工具集。一般都会挂载,除非对生成的文件的体积有苛求,并且不需要用这些工具集。</p></div><div class="other-option"><input type="checkbox" id="compress" name="compress" checked="checked"><label for="compress">代码压缩</label><p class="desc">是否使用 UglifyJS 压缩后的代码,开发环境建议不压缩代码,代码压缩会去掉大部分常见的警告和错误提示。</p></div></section></div><div id="action"><a id="build" href="javascript:;" class="btn btn-main btn-thirdary">下载</a></div></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=1597861067124"></script><script>function updateCheckbox() {
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://echarts.apache.org/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="builder"><div class="page-info"><div id="title" class="container"><h1>在线定制</h1><p>可自由选择所需图表、坐标系、组件进行打包下载,并且可对渲染引擎、兼容及压缩问题进行设置</p><div class="download-version">(version: 4.8.0)</div></div></div><div class="page-content"><div id="configuration" class="container"><a href="builder.html" style="float: right">前往定制 4.x 版本</a><section id="charts"><h3>图表<span>chart</span></h3><p class="desc">选择要打包的图表<span class="warn">(注:开发环境建议不压缩代码,代码压缩会去掉大部分常见的警告和错误提示)</span></p><ul><li class="checked"><img src="https://echarts.apache.org/zh/images/builder/chart/bar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="bar"><h5>柱状图 <div>Bar</div></h5></li><li class="checked"><img src="https://echarts.apache.org/zh/images/builder/chart/line.svg?_v_=20200710_1" alt=""><input type="checkbox" name="line"><h5>折线图 <div>Line</div></h5></li><li class="checked"><img src="https://echarts.apache.org/zh/images/builder/chart/pie.svg?_v_=20200710_1" alt=""><input type="checkbox" name="pie"><h5>饼图 <div>Pie</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/scatter.svg?_v_=20200710_1" alt=""><input type="checkbox" name="scatter"><h5>散点图 <div>Scatter</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/effectScatter.svg?_v_=20200710_1" alt=""><input type="checkbox" name="effectScatter"><h5>涟漪散点图 <div>EffectScatter</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/candlestick.svg?_v_=20200710_1" alt=""><input type="checkbox" name="candlestick"><h5>K线图 <div>Candlestick</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/radar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="radar"><h5>雷达图 <div>Radar</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/heatmap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="heatmap"><h5>热力图 <div>Heatmap</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/tree.svg?_v_=20200710_1" alt=""><input type="checkbox" name="tree"><h5>树图 <div>Tree</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/treemap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="treemap"><h5>矩形树图 <div>Treemap</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/sunburst.svg?_v_=20200710_1" alt=""><input type="checkbox" name="sunburst"><h5>旭日图 <div>Sunburst</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/map.svg?_v_=20200710_1" alt=""><input type="checkbox" name="map"><h5>地图 <div>Map</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/lines.svg?_v_=20200710_1" alt=""><input type="checkbox" name="lines"><h5>线图 <div>Lines</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/graph.svg?_v_=20200710_1" alt=""><input type="checkbox" name="graph"><h5>关系图 <div>Graph</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/boxplot.svg?_v_=20200710_1" alt=""><input type="checkbox" name="boxplot"><h5>箱线图 <div>Boxplot</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/parallel.svg?_v_=20200710_1" alt=""><input type="checkbox" name="parallel"><h5>平行坐标 <div>Parallel</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/gauge.svg?_v_=20200710_1" alt=""><input type="checkbox" name="gauge"><h5>仪表盘 <div>Gauge</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/funnel.svg?_v_=20200710_1" alt=""><input type="checkbox" name="funnel"><h5>漏斗图 <div>Funnel</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/sankey.svg?_v_=20200710_1" alt=""><input type="checkbox" name="sankey"><h5>桑基图 <div>Sankey</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/themeRiver.svg?_v_=20200710_1" alt=""><input type="checkbox" name="themeRiver"><h5>主题河流图 <div>ThemeRiver</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/pictorialBar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="pictorialBar"><h5>象形柱图 <div>PictorialBar</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/custom.svg?_v_=20200710_1" alt=""><input type="checkbox" name="custom"><h5>自定义系列 <div>Custom</div></h5></li></ul></section><section id="coords"><h3>坐标系<span>coordinate systems</span></h3><p class="desc">选择要打包的坐标系,有些图表像散点图,折线图可以被应用到多个坐标系上</p><ul><li class="checked"><img src="https://echarts.apache.org/zh/images/builder/component/gridSimple.svg?_v_=20200710_1" alt=""><input type="checkbox" name="gridSimple"><h5>直角坐标系 <div>Grid</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/polar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="polar"><h5>极坐标系 <div>Polar</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/geo.svg?_v_=20200710_1" alt=""><input type="checkbox" name="geo"><h5>地理坐标系 <div>Geo</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/singleAxis.svg?_v_=20200710_1" alt=""><input type="checkbox" name="singleAxis"><h5>单轴 <div>SingleAxis</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/calendar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="calendar"><h5>日历 <div>Calendar</div></h5></li></ul></section><section id="components"><h3>组件<span>component</span></h3><p class="desc">选择要打包的组件</p><ul><li class="checked"><img src="https://echarts.apache.org/zh/images/builder/component/title.svg?_v_=20200710_1" alt=""><input type="checkbox" name="title"><h5>标题 <div>Title</div></h5></li><li class="checked"><img src="https://echarts.apache.org/zh/images/builder/component/legend.svg?_v_=20200710_1" alt=""><input type="checkbox" name="legendScroll"><h5>图例 <div>Legend</div></h5></li><li class="checked"><img src="https://echarts.apache.org/zh/images/builder/component/tooltip.svg?_v_=20200710_1" alt=""><input type="checkbox" name="tooltip"><h5>提示框 <div>Tooltip</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/markPoint.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markPoint"><h5>标注 <div>MarkPoint</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/markLine.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markLine"><h5>标线 <div>MarkLine</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/markArea.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markArea"><h5>标域 <div>MarkArea</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/timeline.svg?_v_=20200710_1" alt=""><input type="checkbox" name="timeline"><h5>时间轴 <div>Timeline</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/dataZoom.svg?_v_=20200710_1" alt=""><input type="checkbox" name="dataZoom"><h5>数据区域缩放 <div>DataZoom</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/brush.svg?_v_=20200710_1" alt=""><input type="checkbox" name="brush"><h5>刷选 <div>Brush</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/visualMap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="visualMap"><h5>视觉映射 <div>VisualMap</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/toolbox.svg?_v_=20200710_1" alt=""><input type="checkbox" name="toolbox"><h5>工具栏 <div>Toolbox</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/graphic.svg?_v_=20200710_1" alt=""><input type="checkbox" name="graphic"><h5>自定义图形 <div>Graphic</div></h5></li></ul></section><section id="other"><h3>其它选项<span>others</span></h3><div class="other-option"><input type="checkbox" id="svg" name="svg"><label for="svg">SVG 渲染</label><p class="desc">是否包括 SVG 渲染器,从而能支持使用 SVG 来绘制图表</p></div><div class="other-option"><input type="checkbox" id="vml" name="vml"><label for="vml">兼容 IE8</label><p class="desc">是否包括对 IE8 的兼容代码</p></div><div class="other-option"><input type="checkbox" id="api" name="api" checked="checked"><label for="api">工具集</label><p class="desc">是否在 echarts 对象上挂载常用工具集。一般都会挂载,除非对生成的文件的体积有苛求,并且不需要用这些工具集。</p></div><div class="other-option"><input type="checkbox" id="compress" name="compress" checked="checked"><label for="compress">代码压缩</label><p class="desc">是否使用 UglifyJS 压缩后的代码,开发环境建议不压缩代码,代码压缩会去掉大部分常见的警告和错误提示。</p></div></section></div><div id="action"><a id="build" href="javascript:;" class="btn btn-main btn-thirdary">下载</a></div></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=1598523334942"></script><script>function updateCheckbox() {
     $('#charts input, #components input, #coords input').each(function () {
         $(this).attr('checked', $(this).parent().hasClass('checked'));
     });
diff --git a/components/download.html b/components/download.html
index 969c42b..c4f4ef1 100644
--- a/components/download.html
+++ b/components/download.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -7,7 +7,7 @@
     document.head.insertBefore(el, document.getElementById('font-hack'));
 }
 </script><title>下载 - Apache ECharts (incubating)</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://echarts.apache.org/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><h1>下载</h1></div><div id="download-main" class="page-content container"><div class="d-section-version d-section"><h3 class="first">方法一:从下载的源代码或编译产物安装</h3><table id="download-table" class="table"><tr><th>版本</th><th>发布日期</th><th>从镜像网站下载源码</th><th>从 GitHub 下载编译产物</th></tr></table><div class="checksum"><p><strong>注意:</strong>如果从镜像网站下载,请检查 <a href="https://www.apache.org/dev/release-signing#sha-checksum">SHA-512</a> 并且检验确认 <a href="https://www.apache.org/dev/release-signing#openpgp">OpenPGP</a> 与 <a href="https://www.apache.org">Apache 主站</a>的签名一致。链接在上面的 Source 旁。这个 <a href="https://www.apache.org/dist/incubator/echarts/KEYS">KEYS</a> 文件包含了用于签名发布版的公钥。如果可能的话,建议使用<a href="https://www.apache.org/dev/release-signing#web-of-trust">可信任的网络(web of trust)</a>确认 KEYS 的同一性。</p><h4>使用 GPG 验证 ECharts 发布版本</h4><ol><li>从镜像网站下载 apache-echarts-X.Y.Z-incubating-src.zip</li><li>从 <a href="https://www.apache.org/dist/incubator/echarts/">Apache</a> 下载 checksum apache-echarts-X.Y.Z-incubating-src.zip.asc</li><li>下载 <a href="https://www.apache.org/dist/incubator/echarts/KEYS">ECharts KEYS</a></li><li>gpg –import KEYS</li><li>gpg –verify apache-echarts-X.Y.Z-incubating-src.zip.asc</li></ol><h4>使用 SHA-512 验证</h4><ol><li>从镜像网站下载 apache-echarts-X.Y.Z-incubating-src.zip</li><li>从 <a href="https://www.apache.org/dist/incubator/echarts/">Apache</a> 下载 checksum apache-echarts-X.Y.Z-incubating-src.zip.sha512</li><li>shasum -a 512 apache-echarts-X.Y.Z-incubating-src.zip</li></ol><h4>License</h4><p>Apache ECharts (incubating) 基于 <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a> 发布</p></div><h3>方法二:从 npm 安装</h3><p><code>npm install echarts</code></p><h3>方法三:选择需要的模块,在线定制下载</h3><a href="builder3.html" class="btn btn-main btn-thirdary more-btn">在线定制</a><p class="center">可自由选择所需图表和组件进行打包下载</p><h3>下载后……</h3><p><a href="./tutorial.html">5 分钟上手 ECharts</a></p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=1597861067124"></script><script src="https://echarts.apache.org/zh/js/download.js?_v_=1597861067124"></script><script type="text/javascript">document.getElementById('nav-download').className = 'active';
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://echarts.apache.org/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><h1>下载</h1></div><div id="download-main" class="page-content container"><div class="d-section-version d-section"><h3 class="first">方法一:从下载的源代码或编译产物安装</h3><table id="download-table" class="table"><tr><th>版本</th><th>发布日期</th><th>从镜像网站下载源码</th><th>从 GitHub 下载编译产物</th></tr></table><div class="checksum"><p><strong>注意:</strong>如果从镜像网站下载,请检查 <a href="https://www.apache.org/dev/release-signing#sha-checksum">SHA-512</a> 并且检验确认 <a href="https://www.apache.org/dev/release-signing#openpgp">OpenPGP</a> 与 <a href="https://www.apache.org">Apache 主站</a>的签名一致。链接在上面的 Source 旁。这个 <a href="https://www.apache.org/dist/incubator/echarts/KEYS">KEYS</a> 文件包含了用于签名发布版的公钥。如果可能的话,建议使用<a href="https://www.apache.org/dev/release-signing#web-of-trust">可信任的网络(web of trust)</a>确认 KEYS 的同一性。</p><h4>使用 GPG 验证 ECharts 发布版本</h4><ol><li>从镜像网站下载 apache-echarts-X.Y.Z-incubating-src.zip</li><li>从 <a href="https://www.apache.org/dist/incubator/echarts/">Apache</a> 下载 checksum apache-echarts-X.Y.Z-incubating-src.zip.asc</li><li>下载 <a href="https://www.apache.org/dist/incubator/echarts/KEYS">ECharts KEYS</a></li><li>gpg –import KEYS</li><li>gpg –verify apache-echarts-X.Y.Z-incubating-src.zip.asc</li></ol><h4>使用 SHA-512 验证</h4><ol><li>从镜像网站下载 apache-echarts-X.Y.Z-incubating-src.zip</li><li>从 <a href="https://www.apache.org/dist/incubator/echarts/">Apache</a> 下载 checksum apache-echarts-X.Y.Z-incubating-src.zip.sha512</li><li>shasum -a 512 apache-echarts-X.Y.Z-incubating-src.zip</li></ol><h4>License</h4><p>Apache ECharts (incubating) 基于 <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a> 发布</p></div><h3>方法二:从 npm 安装</h3><p><code>npm install echarts</code></p><h3>方法三:选择需要的模块,在线定制下载</h3><a href="builder3.html" class="btn btn-main btn-thirdary more-btn">在线定制</a><p class="center">可自由选择所需图表和组件进行打包下载</p><h3>下载后……</h3><p><a href="./tutorial.html">5 分钟上手 ECharts</a></p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=1598523334942"></script><script src="https://echarts.apache.org/zh/js/download.js?_v_=1598523334942"></script><script type="text/javascript">document.getElementById('nav-download').className = 'active';
 
 //- $('.download-echarts').click(function (e) {
 //-     var el = document.createElement('div');
diff --git a/en/404.html b/en/404.html
index 2fccdc4..7a0d67c 100644
--- a/en/404.html
+++ b/en/404.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -7,7 +7,7 @@
     document.head.insertBefore(el, document.getElementById('font-hack'));
 }
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><div class="page-main"><nav 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://echarts.apache.org/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="not-found"><img src="https://echarts.apache.org/zh/images/404.png?_v_=20200710_1" alt="404"><div class="text">This is not the web page you are looking for.<a href="./index.html" class="link">Back to home</a></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=1597861067124"></script><script type="text/javascript"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><div class="page-main"><nav 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://echarts.apache.org/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="not-found"><img src="https://echarts.apache.org/zh/images/404.png?_v_=20200710_1" alt="404"><div class="text">This is not the web page you are looking for.<a href="./index.html" class="link">Back to home</a></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=1598523334942"></script><script type="text/javascript"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
 
diff --git a/en/api.html b/en/api.html
index 4c04921..bdcb93f 100644
--- a/en/api.html
+++ b/en/api.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'en';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -9,8 +9,8 @@
 </script><title>Documentation - Apache ECharts(incubating)</title><style>html, body {
     /* position: sticky should not have overflow parents.*/
     overflow-x: hidden;
-}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/en/css/doc-bundle.css?_v_=1597861067124"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-doc-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1597861067124"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts.apache.org/en/js/doc-bundle.js?_v_=1597861067124"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
+}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/en/css/doc-bundle.css?_v_=1598523334942"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-doc-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1598523334942"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts.apache.org/en/js/doc-bundle.js?_v_=1598523334942"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
 </script><script type="text/javascript">window.globalArgsExtra = {
     baseUrl: 'documents/api-parts',
     docType: 'api',
@@ -19,7 +19,7 @@
 if (window.EC_WWW_CDN_PAY_ROOT) {
     window.globalArgsExtra.cdnRoot = window.EC_WWW_CDN_PAY_ROOT + '/en/' + window.globalArgsExtra.baseUrl
 }</script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
-window.globalArgsExtra.version = '1597861067124';
+window.globalArgsExtra.version = '1598523334942';
 echartsDoc.init('#ec-doc-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
diff --git a/en/builder.html b/en/builder.html
index 75017c5..3d262d7 100644
--- a/en/builder.html
+++ b/en/builder.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'en';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -7,7 +7,7 @@
     document.head.insertBefore(el, document.getElementById('font-hack'));
 }
 </script><title>ECharts Online Builder</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="builder"><div class="page-info"><div id="title" class="container"><h1>Online Builder</h1><p>Pack and download the needed charts, coordinates or components<br>with the appropriate settings about rendering engine, compatibility and compression.</p><div class="download-version">(version: 4.8.0)</div></div></div><div class="page-content"><div id="configuration" class="container"><section id="charts"><h3>Chart<span></span></h3><p class="desc">Select the charts needed to be packed<br><span class="warn">(The warnings and hints will not be printed on the browser console if using "Code Compression")</span></p><ul><li class="checked"><img src="https://echarts.apache.org/en/images/builder/chart/bar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="bar"><h5> <div>Bar</div></h5></li><li class="checked"><img src="https://echarts.apache.org/en/images/builder/chart/line.svg?_v_=20200710_1" alt=""><input type="checkbox" name="line"><h5> <div>Line</div></h5></li><li class="checked"><img src="https://echarts.apache.org/en/images/builder/chart/pie.svg?_v_=20200710_1" alt=""><input type="checkbox" name="pie"><h5> <div>Pie</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/scatter.svg?_v_=20200710_1" alt=""><input type="checkbox" name="scatter"><h5> <div>Scatter</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/effectScatter.svg?_v_=20200710_1" alt=""><input type="checkbox" name="effectScatter"><h5> <div>EffectScatter</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/candlestick.svg?_v_=20200710_1" alt=""><input type="checkbox" name="candlestick"><h5> <div>Candlestick</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/radar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="radar"><h5> <div>Radar</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/heatmap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="heatmap"><h5> <div>Heatmap</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/tree.svg?_v_=20200710_1" alt=""><input type="checkbox" name="tree"><h5> <div>Tree</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/treemap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="treemap"><h5> <div>Treemap</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/sunburst.svg?_v_=20200710_1" alt=""><input type="checkbox" name="sunburst"><h5> <div>Sunburst</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/map.svg?_v_=20200710_1" alt=""><input type="checkbox" name="map"><h5> <div>Map</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/lines.svg?_v_=20200710_1" alt=""><input type="checkbox" name="lines"><h5> <div>Lines</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/graph.svg?_v_=20200710_1" alt=""><input type="checkbox" name="graph"><h5> <div>Graph</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/boxplot.svg?_v_=20200710_1" alt=""><input type="checkbox" name="boxplot"><h5> <div>Boxplot</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/parallel.svg?_v_=20200710_1" alt=""><input type="checkbox" name="parallel"><h5> <div>Parallel</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/gauge.svg?_v_=20200710_1" alt=""><input type="checkbox" name="gauge"><h5> <div>Gauge</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/funnel.svg?_v_=20200710_1" alt=""><input type="checkbox" name="funnel"><h5> <div>Funnel</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/sankey.svg?_v_=20200710_1" alt=""><input type="checkbox" name="sankey"><h5> <div>Sankey</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/themeRiver.svg?_v_=20200710_1" alt=""><input type="checkbox" name="themeRiver"><h5> <div>ThemeRiver</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/pictorialBar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="pictorialBar"><h5> <div>PictorialBar</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/custom.svg?_v_=20200710_1" alt=""><input type="checkbox" name="custom"><h5> <div>Custom</div></h5></li></ul></section><section id="coords"><h3>Coordinate Systems<span></span></h3><p class="desc">Select coordinate systems needed to be packed. Some of the charts like "scatter", "line", "graph", "custom" can layout on multiple coordiante systems.</p><ul><li class="checked"><img src="https://echarts.apache.org/en/images/builder/component/gridSimple.svg?_v_=20200710_1" alt=""><input type="checkbox" name="gridSimple"><h5> <div>Grid</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/polar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="polar"><h5> <div>Polar</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/geo.svg?_v_=20200710_1" alt=""><input type="checkbox" name="geo"><h5> <div>Geo</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/singleAxis.svg?_v_=20200710_1" alt=""><input type="checkbox" name="singleAxis"><h5> <div>SingleAxis</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/calendar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="calendar"><h5> <div>Calendar</div></h5></li></ul></section><section id="components"><h3>Component<span></span></h3><p class="desc">Select components needed to be packed.</p><ul><li class="checked"><img src="https://echarts.apache.org/en/images/builder/component/title.svg?_v_=20200710_1" alt=""><input type="checkbox" name="title"><h5> <div>Title</div></h5></li><li class="checked"><img src="https://echarts.apache.org/en/images/builder/component/legend.svg?_v_=20200710_1" alt=""><input type="checkbox" name="legendScroll"><h5> <div>Legend</div></h5></li><li class="checked"><img src="https://echarts.apache.org/en/images/builder/component/tooltip.svg?_v_=20200710_1" alt=""><input type="checkbox" name="tooltip"><h5> <div>Tooltip</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/markPoint.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markPoint"><h5> <div>MarkPoint</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/markLine.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markLine"><h5> <div>MarkLine</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/markArea.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markArea"><h5> <div>MarkArea</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/timeline.svg?_v_=20200710_1" alt=""><input type="checkbox" name="timeline"><h5> <div>Timeline</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/dataZoom.svg?_v_=20200710_1" alt=""><input type="checkbox" name="dataZoom"><h5> <div>DataZoom</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/brush.svg?_v_=20200710_1" alt=""><input type="checkbox" name="brush"><h5> <div>Brush</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/visualMap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="visualMap"><h5> <div>VisualMap</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/toolbox.svg?_v_=20200710_1" alt=""><input type="checkbox" name="toolbox"><h5> <div>Toolbox</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/graphic.svg?_v_=20200710_1" alt=""><input type="checkbox" name="graphic"><h5> <div>Graphic</div></h5></li></ul></section><section id="other"><h3>Others<span></span></h3><div class="other-option"><input type="checkbox" id="svg" name="svg"><label for="svg">SVG Renderer</label><p class="desc">Whether to include the SVG Renderer, which enables rendering based on SVG.</p></div><div class="other-option"><input type="checkbox" id="vml" name="vml"><label for="vml">Available on IE8 (VML Renderer)</label><p class="desc">Whether to include the VML Renderer to support rendering on IE8.</p></div><div class="other-option"><input type="checkbox" id="api" name="api" checked="checked"><label for="api">Utilities</label><p class="desc">Whether to mount utilities on the echarts namespace. Utilities are usually included, unless requiring minimum bundle size and not need them.</p></div><div class="other-option"><input type="checkbox" id="compress" name="compress" checked="checked"><label for="compress">Code Compression</label><p class="desc">Whether to Compress code. It is recommended not to compress code in the development environment, because warnings and hints will be removed after compressing.</p></div></section></div><div id="action"><a id="build" href="javascript:;" class="btn btn-main btn-thirdary">Download</a></div></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1597861067124"></script><script>function updateCheckbox() {
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="builder"><div class="page-info"><div id="title" class="container"><h1>Online Builder</h1><p>Pack and download the needed charts, coordinates or components<br>with the appropriate settings about rendering engine, compatibility and compression.</p><div class="download-version">(version: 4.8.0)</div></div></div><div class="page-content"><div id="configuration" class="container"><section id="charts"><h3>Chart<span></span></h3><p class="desc">Select the charts needed to be packed<br><span class="warn">(The warnings and hints will not be printed on the browser console if using "Code Compression")</span></p><ul><li class="checked"><img src="https://echarts.apache.org/en/images/builder/chart/bar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="bar"><h5> <div>Bar</div></h5></li><li class="checked"><img src="https://echarts.apache.org/en/images/builder/chart/line.svg?_v_=20200710_1" alt=""><input type="checkbox" name="line"><h5> <div>Line</div></h5></li><li class="checked"><img src="https://echarts.apache.org/en/images/builder/chart/pie.svg?_v_=20200710_1" alt=""><input type="checkbox" name="pie"><h5> <div>Pie</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/scatter.svg?_v_=20200710_1" alt=""><input type="checkbox" name="scatter"><h5> <div>Scatter</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/effectScatter.svg?_v_=20200710_1" alt=""><input type="checkbox" name="effectScatter"><h5> <div>EffectScatter</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/candlestick.svg?_v_=20200710_1" alt=""><input type="checkbox" name="candlestick"><h5> <div>Candlestick</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/radar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="radar"><h5> <div>Radar</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/heatmap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="heatmap"><h5> <div>Heatmap</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/tree.svg?_v_=20200710_1" alt=""><input type="checkbox" name="tree"><h5> <div>Tree</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/treemap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="treemap"><h5> <div>Treemap</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/sunburst.svg?_v_=20200710_1" alt=""><input type="checkbox" name="sunburst"><h5> <div>Sunburst</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/map.svg?_v_=20200710_1" alt=""><input type="checkbox" name="map"><h5> <div>Map</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/lines.svg?_v_=20200710_1" alt=""><input type="checkbox" name="lines"><h5> <div>Lines</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/graph.svg?_v_=20200710_1" alt=""><input type="checkbox" name="graph"><h5> <div>Graph</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/boxplot.svg?_v_=20200710_1" alt=""><input type="checkbox" name="boxplot"><h5> <div>Boxplot</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/parallel.svg?_v_=20200710_1" alt=""><input type="checkbox" name="parallel"><h5> <div>Parallel</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/gauge.svg?_v_=20200710_1" alt=""><input type="checkbox" name="gauge"><h5> <div>Gauge</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/funnel.svg?_v_=20200710_1" alt=""><input type="checkbox" name="funnel"><h5> <div>Funnel</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/sankey.svg?_v_=20200710_1" alt=""><input type="checkbox" name="sankey"><h5> <div>Sankey</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/themeRiver.svg?_v_=20200710_1" alt=""><input type="checkbox" name="themeRiver"><h5> <div>ThemeRiver</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/pictorialBar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="pictorialBar"><h5> <div>PictorialBar</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/custom.svg?_v_=20200710_1" alt=""><input type="checkbox" name="custom"><h5> <div>Custom</div></h5></li></ul></section><section id="coords"><h3>Coordinate Systems<span></span></h3><p class="desc">Select coordinate systems needed to be packed. Some of the charts like "scatter", "line", "graph", "custom" can layout on multiple coordiante systems.</p><ul><li class="checked"><img src="https://echarts.apache.org/en/images/builder/component/gridSimple.svg?_v_=20200710_1" alt=""><input type="checkbox" name="gridSimple"><h5> <div>Grid</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/polar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="polar"><h5> <div>Polar</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/geo.svg?_v_=20200710_1" alt=""><input type="checkbox" name="geo"><h5> <div>Geo</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/singleAxis.svg?_v_=20200710_1" alt=""><input type="checkbox" name="singleAxis"><h5> <div>SingleAxis</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/calendar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="calendar"><h5> <div>Calendar</div></h5></li></ul></section><section id="components"><h3>Component<span></span></h3><p class="desc">Select components needed to be packed.</p><ul><li class="checked"><img src="https://echarts.apache.org/en/images/builder/component/title.svg?_v_=20200710_1" alt=""><input type="checkbox" name="title"><h5> <div>Title</div></h5></li><li class="checked"><img src="https://echarts.apache.org/en/images/builder/component/legend.svg?_v_=20200710_1" alt=""><input type="checkbox" name="legendScroll"><h5> <div>Legend</div></h5></li><li class="checked"><img src="https://echarts.apache.org/en/images/builder/component/tooltip.svg?_v_=20200710_1" alt=""><input type="checkbox" name="tooltip"><h5> <div>Tooltip</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/markPoint.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markPoint"><h5> <div>MarkPoint</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/markLine.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markLine"><h5> <div>MarkLine</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/markArea.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markArea"><h5> <div>MarkArea</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/timeline.svg?_v_=20200710_1" alt=""><input type="checkbox" name="timeline"><h5> <div>Timeline</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/dataZoom.svg?_v_=20200710_1" alt=""><input type="checkbox" name="dataZoom"><h5> <div>DataZoom</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/brush.svg?_v_=20200710_1" alt=""><input type="checkbox" name="brush"><h5> <div>Brush</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/visualMap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="visualMap"><h5> <div>VisualMap</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/toolbox.svg?_v_=20200710_1" alt=""><input type="checkbox" name="toolbox"><h5> <div>Toolbox</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/graphic.svg?_v_=20200710_1" alt=""><input type="checkbox" name="graphic"><h5> <div>Graphic</div></h5></li></ul></section><section id="other"><h3>Others<span></span></h3><div class="other-option"><input type="checkbox" id="svg" name="svg"><label for="svg">SVG Renderer</label><p class="desc">Whether to include the SVG Renderer, which enables rendering based on SVG.</p></div><div class="other-option"><input type="checkbox" id="vml" name="vml"><label for="vml">Available on IE8 (VML Renderer)</label><p class="desc">Whether to include the VML Renderer to support rendering on IE8.</p></div><div class="other-option"><input type="checkbox" id="api" name="api" checked="checked"><label for="api">Utilities</label><p class="desc">Whether to mount utilities on the echarts namespace. Utilities are usually included, unless requiring minimum bundle size and not need them.</p></div><div class="other-option"><input type="checkbox" id="compress" name="compress" checked="checked"><label for="compress">Code Compression</label><p class="desc">Whether to Compress code. It is recommended not to compress code in the development environment, because warnings and hints will be removed after compressing.</p></div></section></div><div id="action"><a id="build" href="javascript:;" class="btn btn-main btn-thirdary">Download</a></div></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1598523334942"></script><script>function updateCheckbox() {
     $('#charts input, #components input, #coords input').each(function () {
         $(this).attr('checked', $(this).parent().hasClass('checked'));
     });
diff --git a/en/builder/echarts.html b/en/builder/echarts.html
index 6a45a75..3057543 100644
--- a/en/builder/echarts.html
+++ b/en/builder/echarts.html
@@ -56,7 +56,7 @@
                 'esprima': 'lib/esprima',
                 'estraverse': 'lib/estraverse'
             },
-            urlArgs: 'v=1597861067124'
+            urlArgs: 'v=1598523334942'
         });
 
         require(['build']);
diff --git a/en/changelog.html b/en/changelog.html
index 1348205..a0891df 100644
--- a/en/changelog.html
+++ b/en/changelog.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'en';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -1300,7 +1300,7 @@
 <ul>
 <li>The new echarts</li>
 </ul>
-<footer class="inner-footer"><div class="container"><div class="row"><div class="col-md-8"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-4"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1597861067124"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
+<footer class="inner-footer"><div class="container"><div class="row"><div class="col-md-8"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-4"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1598523334942"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
 
 // Fix scroll position covered by nav
 window.addEventListener('hashchange', function() {
diff --git a/en/cheat-sheet.html b/en/cheat-sheet.html
index b8daa05..38e66bc 100644
--- a/en/cheat-sheet.html
+++ b/en/cheat-sheet.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'en';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -7,8 +7,8 @@
     document.head.insertBefore(el, document.getElementById('font-hack'));
 }
 </script><title>Cheat Sheet - Apache ECharts (incubating)</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><h1>Cheat Sheet</h1><p>Learn the component names quickly.</p><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div><div class="page-content container page-cheatsheet"><h2>Frequently-used Components</h2><div id="cheat-chart-container"><div class="row"><div class="col-lg-9"><div id="cheat-chart"></div></div><div class="col-lg-3"><div id="cheat-detail"></div></div></div></div><h2>Series</h2><ul><li class="cheat-chart-item"><a href="option.html#series-bar" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/bar.svg?_v_=20200710_1" alt=""><h5><div>Bar</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-line" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/line.svg?_v_=20200710_1" alt=""><h5><div>Line</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-pie" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/pie.svg?_v_=20200710_1" alt=""><h5><div>Pie</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-scatter" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/scatter.svg?_v_=20200710_1" alt=""><h5><div>Scatter</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-effectScatter" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/effectScatter.svg?_v_=20200710_1" alt=""><h5><div>EffectScatter</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-candlestick" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/candlestick.svg?_v_=20200710_1" alt=""><h5><div>Candlestick</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-radar" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/radar.svg?_v_=20200710_1" alt=""><h5><div>Radar</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-heatmap" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/heatmap.svg?_v_=20200710_1" alt=""><h5><div>Heatmap</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-tree" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/tree.svg?_v_=20200710_1" alt=""><h5><div>Tree</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-treemap" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/treemap.svg?_v_=20200710_1" alt=""><h5><div>Treemap</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-sunburst" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/sunburst.svg?_v_=20200710_1" alt=""><h5><div>Sunburst</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-map" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/map.svg?_v_=20200710_1" alt=""><h5><div>Map</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-lines" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/lines.svg?_v_=20200710_1" alt=""><h5><div>Lines</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-graph" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/graph.svg?_v_=20200710_1" alt=""><h5><div>Graph</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-boxplot" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/boxplot.svg?_v_=20200710_1" alt=""><h5><div>Boxplot</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-parallel" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/parallel.svg?_v_=20200710_1" alt=""><h5><div>Parallel</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-gauge" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/gauge.svg?_v_=20200710_1" alt=""><h5><div>Gauge</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-funnel" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/funnel.svg?_v_=20200710_1" alt=""><h5><div>Funnel</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-sankey" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/sankey.svg?_v_=20200710_1" alt=""><h5><div>Sankey</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-themeRiver" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/themeRiver.svg?_v_=20200710_1" alt=""><h5><div>ThemeRiver</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-pictorialBar" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/pictorialBar.svg?_v_=20200710_1" alt=""><h5><div>PictorialBar</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-custom" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/custom.svg?_v_=20200710_1" alt=""><h5><div>Custom</div></h5></a></li></ul><h2>Coordinates</h2><ul><li class="cheat-chart-item"><a href="option.html#grid" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/gridSimple.svg?_v_=20200710_1" alt=""><h5><div>Grid</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#polar" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/polar.svg?_v_=20200710_1" alt=""><h5><div>Polar</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#geo" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/geo.svg?_v_=20200710_1" alt=""><h5><div>Geo</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#singleAxis" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/singleAxis.svg?_v_=20200710_1" alt=""><h5><div>SingleAxis</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#calendar" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/calendar.svg?_v_=20200710_1" alt=""><h5><div>Calendar</div></h5></a></li></ul><h2>Components</h2><ul><li class="cheat-chart-item"><a href="option.html#title" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/title.svg?_v_=20200710_1" alt=""><h5><div>Title</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#legend" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/legend.svg?_v_=20200710_1" alt=""><h5><div>Legend</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#tooltip" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/tooltip.svg?_v_=20200710_1" alt=""><h5><div>Tooltip</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-line.markPoint" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/markPoint.svg?_v_=20200710_1" alt=""><h5><div>MarkPoint</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-line.markLine" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/markLine.svg?_v_=20200710_1" alt=""><h5><div>MarkLine</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-line.markArea" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/markArea.svg?_v_=20200710_1" alt=""><h5><div>MarkArea</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#timeline" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/timeline.svg?_v_=20200710_1" alt=""><h5><div>Timeline</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#dataZoom" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/dataZoom.svg?_v_=20200710_1" alt=""><h5><div>DataZoom</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#brush" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/brush.svg?_v_=20200710_1" alt=""><h5><div>Brush</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#visualMap" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/visualMap.svg?_v_=20200710_1" alt=""><h5><div>VisualMap</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#toolbox" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/toolbox.svg?_v_=20200710_1" alt=""><h5><div>Toolbox</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#graphic" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/graphic.svg?_v_=20200710_1" alt=""><h5><div>Graphic</div></h5></a></li></ul></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1597861067124"></script><script type="text/javascript">document.getElementById('nav-resources').className = 'active';
-</script><script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script><script src="https://echarts.apache.org/en/js/cheat-sheet-en.js?_v_=1597861067124"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><h1>Cheat Sheet</h1><p>Learn the component names quickly.</p><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div><div class="page-content container page-cheatsheet"><h2>Frequently-used Components</h2><div id="cheat-chart-container"><div class="row"><div class="col-lg-9"><div id="cheat-chart"></div></div><div class="col-lg-3"><div id="cheat-detail"></div></div></div></div><h2>Series</h2><ul><li class="cheat-chart-item"><a href="option.html#series-bar" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/bar.svg?_v_=20200710_1" alt=""><h5><div>Bar</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-line" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/line.svg?_v_=20200710_1" alt=""><h5><div>Line</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-pie" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/pie.svg?_v_=20200710_1" alt=""><h5><div>Pie</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-scatter" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/scatter.svg?_v_=20200710_1" alt=""><h5><div>Scatter</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-effectScatter" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/effectScatter.svg?_v_=20200710_1" alt=""><h5><div>EffectScatter</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-candlestick" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/candlestick.svg?_v_=20200710_1" alt=""><h5><div>Candlestick</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-radar" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/radar.svg?_v_=20200710_1" alt=""><h5><div>Radar</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-heatmap" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/heatmap.svg?_v_=20200710_1" alt=""><h5><div>Heatmap</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-tree" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/tree.svg?_v_=20200710_1" alt=""><h5><div>Tree</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-treemap" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/treemap.svg?_v_=20200710_1" alt=""><h5><div>Treemap</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-sunburst" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/sunburst.svg?_v_=20200710_1" alt=""><h5><div>Sunburst</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-map" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/map.svg?_v_=20200710_1" alt=""><h5><div>Map</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-lines" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/lines.svg?_v_=20200710_1" alt=""><h5><div>Lines</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-graph" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/graph.svg?_v_=20200710_1" alt=""><h5><div>Graph</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-boxplot" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/boxplot.svg?_v_=20200710_1" alt=""><h5><div>Boxplot</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-parallel" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/parallel.svg?_v_=20200710_1" alt=""><h5><div>Parallel</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-gauge" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/gauge.svg?_v_=20200710_1" alt=""><h5><div>Gauge</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-funnel" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/funnel.svg?_v_=20200710_1" alt=""><h5><div>Funnel</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-sankey" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/sankey.svg?_v_=20200710_1" alt=""><h5><div>Sankey</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-themeRiver" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/themeRiver.svg?_v_=20200710_1" alt=""><h5><div>ThemeRiver</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-pictorialBar" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/pictorialBar.svg?_v_=20200710_1" alt=""><h5><div>PictorialBar</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-custom" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/custom.svg?_v_=20200710_1" alt=""><h5><div>Custom</div></h5></a></li></ul><h2>Coordinates</h2><ul><li class="cheat-chart-item"><a href="option.html#grid" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/gridSimple.svg?_v_=20200710_1" alt=""><h5><div>Grid</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#polar" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/polar.svg?_v_=20200710_1" alt=""><h5><div>Polar</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#geo" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/geo.svg?_v_=20200710_1" alt=""><h5><div>Geo</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#singleAxis" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/singleAxis.svg?_v_=20200710_1" alt=""><h5><div>SingleAxis</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#calendar" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/calendar.svg?_v_=20200710_1" alt=""><h5><div>Calendar</div></h5></a></li></ul><h2>Components</h2><ul><li class="cheat-chart-item"><a href="option.html#title" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/title.svg?_v_=20200710_1" alt=""><h5><div>Title</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#legend" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/legend.svg?_v_=20200710_1" alt=""><h5><div>Legend</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#tooltip" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/tooltip.svg?_v_=20200710_1" alt=""><h5><div>Tooltip</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-line.markPoint" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/markPoint.svg?_v_=20200710_1" alt=""><h5><div>MarkPoint</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-line.markLine" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/markLine.svg?_v_=20200710_1" alt=""><h5><div>MarkLine</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-line.markArea" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/markArea.svg?_v_=20200710_1" alt=""><h5><div>MarkArea</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#timeline" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/timeline.svg?_v_=20200710_1" alt=""><h5><div>Timeline</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#dataZoom" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/dataZoom.svg?_v_=20200710_1" alt=""><h5><div>DataZoom</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#brush" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/brush.svg?_v_=20200710_1" alt=""><h5><div>Brush</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#visualMap" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/visualMap.svg?_v_=20200710_1" alt=""><h5><div>VisualMap</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#toolbox" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/toolbox.svg?_v_=20200710_1" alt=""><h5><div>Toolbox</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#graphic" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/graphic.svg?_v_=20200710_1" alt=""><h5><div>Graphic</div></h5></a></li></ul></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1598523334942"></script><script type="text/javascript">document.getElementById('nav-resources').className = 'active';
+</script><script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script><script src="https://echarts.apache.org/en/js/cheat-sheet-en.js?_v_=1598523334942"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
 
diff --git a/en/coding-standard.html b/en/coding-standard.html
index f0103ec..4bbdf00 100644
--- a/en/coding-standard.html
+++ b/en/coding-standard.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'en';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -574,7 +574,7 @@
 <p><strong>[MUST]</strong> Do not use <code>for in</code> in array traverse.</p>
 <h3 id="others">Others</h3>
 <p><strong>[MUST]</strong> Do not use <code>eval</code> and <code>with</code>. <code>new Function</code> can be used.</p>
-<footer class="inner-footer"><div class="container"><div class="row"><div class="col-md-8"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-4"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1597861067124"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';
+<footer class="inner-footer"><div class="container"><div class="row"><div class="col-md-8"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-4"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1598523334942"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';
 
 var $list = $('#standard-nav');
 $('.page-detail h2, .page-detail h3, .page-detail h4')
diff --git a/en/committers.html b/en/committers.html
index c908ae5..c24c143 100644
--- a/en/committers.html
+++ b/en/committers.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'en';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -7,7 +7,7 @@
     document.head.insertBefore(el, document.getElementById('font-hack'));
 }
 </script><title>Committers - Apache ECharts (incubating)</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><h1>Thanks for Helping</h1><p>The development of ECharts is associated with the outstanding contributions from the people in the community,<br>who have different skills and come from different backgrounds.</p><p>Thank you all your help!</p><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div><div id="about-page"><section class="container contributor"><h4 class="group mentors"> Apache Mentors</h4><div class="row"><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://echarts.apache.org/en/images/people/dave.jpg?_v_=20200710_1"><h5 class="about-name">Dave Fisher</h5><div class="about-desc">San Francisco, US</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://echarts.apache.org/en/images/people/kevin.jpg?_v_=20200710_1"><h5 class="about-name">Kevin A. McGrail</h5><div class="about-desc">Washington, US</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://echarts.apache.org/en/images/people/shengwu.jpg?_v_=20200710_1"><h5 class="about-name">Sheng Wu</h5><div class="about-desc">Beijing, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://echarts.apache.org/en/images/people/tedliu.jpg?_v_=20200710_1"><h5 class="about-name">Ted Liu</h5><div class="about-desc">Beijing, China</div></div></div></div><h4 class="group code">PPMC</h4><div class="row"><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/pissang" target="_blank"><img src="https://echarts.apache.org/en/images/people/沈毅.jpg?_v_=20200710_1"></a><h5 class="about-name">Yi Shen</h5><div class="about-desc">Baidu</div><div class="about-desc">Shanghai, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/100pah" target="_blank"><img src="https://echarts.apache.org/en/images/people/宿爽.jpg?_v_=20200710_1"></a><h5 class="about-name">Shuang Su</h5><div class="about-desc">Baidu</div><div class="about-desc">Beijing, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/Ovilia" target="_blank"><img src="https://echarts.apache.org/en/images/people/羡辙.jpg?_v_=20200710_1"></a><h5 class="about-name">Ovilia</h5><div class="about-desc">Baidu</div><div class="about-desc">Shanghai, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/deqingli" target="_blank"><img src="https://echarts.apache.org/en/images/people/德清.jpg?_v_=20200710_1"></a><h5 class="about-name">Deqing Li</h5><div class="about-desc">Alibaba</div><div class="about-desc">Hangzhou, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://www.behance.net/wjtjiayouac8aa" target="_blank"><img src="https://echarts.apache.org/en/images/people/王俊婷.jpg?_v_=20200710_1"></a><h5 class="about-name">Junting Wang</h5><div class="about-desc">Baidu</div><div class="about-desc">Shanghai, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/kener" target="_blank"><img src="https://echarts.apache.org/en/images/people/林峰.jpg?_v_=20200710_1"></a><h5 class="about-name">Feng Lin</h5><div class="about-desc">Alibaba</div><div class="about-desc">Hangzhou, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/erik168" target="_blank"><img src="https://echarts.apache.org/en/images/people/erik.jpg?_v_=20200710_1"></a><h5 class="about-name">Erik</h5><div class="about-desc">Baidu</div><div class="about-desc">Beijing, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/chriswong" target="_blank"><img src="https://echarts.apache.org/en/images/people/大佛.jpg?_v_=20200710_1"></a><h5 class="about-name">Houjin Huang</h5><div class="about-desc">GSX</div><div class="about-desc">Beijing, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/susiwen8" target="_blank"><img src="https://echarts.apache.org/en/images/people/苏思文.jpg?_v_=20200710_1"></a><h5 class="about-name">Siwen Su</h5><div class="about-desc">Baidu</div><div class="about-desc">Beijing, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/plainheart" target="_blank"><img src="https://echarts.apache.org/en/images/people/plainheart.jpg"></a><h5 class="about-name">Zhongxiang Wang</h5><div class="about-desc">Henan, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/wf123537200" target="_blank"><img src="https://echarts.apache.org/en/images/people/zakwu.jpg?_v_=20200710_1"></a><h5 class="about-name">Zak Wu</h5><div class="about-desc">Tencent</div><div class="about-desc">Shenzhen, China</div></div></div></div><h4 class="group code">Committers</h4><div class="row"><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/cuijian-dexter" target="_blank"><img src="https://echarts.apache.org/en/images/people/崔健.jpg?_v_=20200710_1"></a><h5 class="about-name">Jian Cui</h5><div class="about-desc">Baidu</div><div class="about-desc">Beijing, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/ClemMakesApps" target="_blank"><img src="https://echarts.apache.org/en/images/people/clement.jpg?_v_=20200710_1"></a><h5 class="about-name">Clement Ho</h5><div class="about-desc">GitLab</div><div class="about-desc">Texas, US</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/yufeng04" target="_blank"><img src="https://echarts.apache.org/en/images/people/禹峰.jpg?_v_=20200710_1"></a><h5 class="about-name">Feng Yu</h5><div class="about-desc">Baidu</div><div class="about-desc">Shanghai, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/SnailSword" target="_blank"><img src="https://echarts.apache.org/en/images/people/韩天.jpg?_v_=20200710_1"></a><h5 class="about-name">Tian Han</h5><div class="about-desc">Student</div><div class="about-desc">Beijing, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/alex2wong" target="_blank"><img src="https://echarts.apache.org/en/images/people/黄益修.jpg?_v_=20200710_1"></a><h5 class="about-name">Yixiu Huang</h5><div class="about-desc">ByteDance</div><div class="about-desc">Shanghai, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/chfw" target="_blank"><img src="https://echarts.apache.org/en/images/people/chfw.jpg?_v_=20200710_1"></a><h5 class="about-name">chfw</h5><div class="about-desc">UK</div></div></div></div><h4 class="group contributor">Contributors</h4><div class="row"><p></p><p>Thanks to all the <a href="https://github.com/apache/incubator-echarts/graphs/contributors">CONTRIBUTORS</a> <br /> making their effort to help ECharts getting better.</p></div></section></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1597861067124"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><h1>Thanks for Helping</h1><p>The development of ECharts is associated with the outstanding contributions from the people in the community,<br>who have different skills and come from different backgrounds.</p><p>Thank you all your help!</p><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div><div id="about-page"><section class="container contributor"><h4 class="group mentors"> Apache Mentors</h4><div class="row"><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://echarts.apache.org/en/images/people/dave.jpg?_v_=20200710_1"><h5 class="about-name">Dave Fisher</h5><div class="about-desc">San Francisco, US</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://echarts.apache.org/en/images/people/kevin.jpg?_v_=20200710_1"><h5 class="about-name">Kevin A. McGrail</h5><div class="about-desc">Washington, US</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://echarts.apache.org/en/images/people/shengwu.jpg?_v_=20200710_1"><h5 class="about-name">Sheng Wu</h5><div class="about-desc">Beijing, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://echarts.apache.org/en/images/people/tedliu.jpg?_v_=20200710_1"><h5 class="about-name">Ted Liu</h5><div class="about-desc">Beijing, China</div></div></div></div><h4 class="group code">PPMC</h4><div class="row"><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/pissang" target="_blank"><img src="https://echarts.apache.org/en/images/people/沈毅.jpg?_v_=20200710_1"></a><h5 class="about-name">Yi Shen</h5><div class="about-desc">Baidu</div><div class="about-desc">Shanghai, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/100pah" target="_blank"><img src="https://echarts.apache.org/en/images/people/宿爽.jpg?_v_=20200710_1"></a><h5 class="about-name">Shuang Su</h5><div class="about-desc">Baidu</div><div class="about-desc">Beijing, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/Ovilia" target="_blank"><img src="https://echarts.apache.org/en/images/people/羡辙.jpg?_v_=20200710_1"></a><h5 class="about-name">Ovilia</h5><div class="about-desc">Baidu</div><div class="about-desc">Shanghai, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/deqingli" target="_blank"><img src="https://echarts.apache.org/en/images/people/德清.jpg?_v_=20200710_1"></a><h5 class="about-name">Deqing Li</h5><div class="about-desc">Alibaba</div><div class="about-desc">Hangzhou, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://www.behance.net/wjtjiayouac8aa" target="_blank"><img src="https://echarts.apache.org/en/images/people/王俊婷.jpg?_v_=20200710_1"></a><h5 class="about-name">Junting Wang</h5><div class="about-desc">Baidu</div><div class="about-desc">Shanghai, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/kener" target="_blank"><img src="https://echarts.apache.org/en/images/people/林峰.jpg?_v_=20200710_1"></a><h5 class="about-name">Feng Lin</h5><div class="about-desc">Alibaba</div><div class="about-desc">Hangzhou, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/erik168" target="_blank"><img src="https://echarts.apache.org/en/images/people/erik.jpg?_v_=20200710_1"></a><h5 class="about-name">Erik</h5><div class="about-desc">Baidu</div><div class="about-desc">Beijing, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/chriswong" target="_blank"><img src="https://echarts.apache.org/en/images/people/大佛.jpg?_v_=20200710_1"></a><h5 class="about-name">Houjin Huang</h5><div class="about-desc">GSX</div><div class="about-desc">Beijing, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/susiwen8" target="_blank"><img src="https://echarts.apache.org/en/images/people/苏思文.jpg?_v_=20200710_1"></a><h5 class="about-name">Siwen Su</h5><div class="about-desc">Baidu</div><div class="about-desc">Beijing, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/plainheart" target="_blank"><img src="https://echarts.apache.org/en/images/people/plainheart.jpg"></a><h5 class="about-name">Zhongxiang Wang</h5><div class="about-desc">Henan, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/wf123537200" target="_blank"><img src="https://echarts.apache.org/en/images/people/zakwu.jpg?_v_=20200710_1"></a><h5 class="about-name">Zak Wu</h5><div class="about-desc">Tencent</div><div class="about-desc">Shenzhen, China</div></div></div></div><h4 class="group code">Committers</h4><div class="row"><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/cuijian-dexter" target="_blank"><img src="https://echarts.apache.org/en/images/people/崔健.jpg?_v_=20200710_1"></a><h5 class="about-name">Jian Cui</h5><div class="about-desc">Baidu</div><div class="about-desc">Beijing, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/ClemMakesApps" target="_blank"><img src="https://echarts.apache.org/en/images/people/clement.jpg?_v_=20200710_1"></a><h5 class="about-name">Clement Ho</h5><div class="about-desc">GitLab</div><div class="about-desc">Texas, US</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/yufeng04" target="_blank"><img src="https://echarts.apache.org/en/images/people/禹峰.jpg?_v_=20200710_1"></a><h5 class="about-name">Feng Yu</h5><div class="about-desc">Baidu</div><div class="about-desc">Shanghai, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/SnailSword" target="_blank"><img src="https://echarts.apache.org/en/images/people/韩天.jpg?_v_=20200710_1"></a><h5 class="about-name">Tian Han</h5><div class="about-desc">Student</div><div class="about-desc">Beijing, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/alex2wong" target="_blank"><img src="https://echarts.apache.org/en/images/people/黄益修.jpg?_v_=20200710_1"></a><h5 class="about-name">Yixiu Huang</h5><div class="about-desc">ByteDance</div><div class="about-desc">Shanghai, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/chfw" target="_blank"><img src="https://echarts.apache.org/en/images/people/chfw.jpg?_v_=20200710_1"></a><h5 class="about-name">chfw</h5><div class="about-desc">UK</div></div></div></div><h4 class="group contributor">Contributors</h4><div class="row"><p></p><p>Thanks to all the <a href="https://github.com/apache/incubator-echarts/graphs/contributors">CONTRIBUTORS</a> <br /> making their effort to help ECharts getting better.</p></div></section></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1598523334942"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
 
diff --git a/en/contributing.html b/en/contributing.html
index 32521a9..3180cf1 100644
--- a/en/contributing.html
+++ b/en/contributing.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -7,7 +7,7 @@
     document.head.insertBefore(el, document.getElementById('font-hack'));
 }
 </script><title>Contributing - Apache ECharts (incubating)</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="ECharts FAQ"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><div class="container"><h1>Contributing</h1><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div></div><div class="page-content"><div class="container"><h2>Contributing to Apache ECharts (incubating)</h2><p>There are many ways that you can help make ECharts better. Please dive in and help!</p><h3>Issues</h3><p>Review the <a href="https://github.com/apache/incubator-echarts/issues" target="_blank">issues</a> and see if you can offer some help.</p><ul><li>If it's a bug report or how-to question, make sure the author has provided a minimum online demo with either <a href="https://codepen.io/Ovilia/pen/dyYWXWM" target="_blank">Codepen</a> or <a href="https://gallery.echartsjs.com/editor.html" target="_blank">ECharts Gallery (Chinese)</a> to show what's going wrong.</li><li>If it's a feature request, make sure the author has a clear explanation about what is expected and a picture would be very helpful for some cases.</li><li>Help reproduce bugs if an online demo is provided and check the <a href="https://echarts.apache.org/en/option.html" target="_blank">document</a> to see if it's a bug.</li><li>Issues without a "pending" label are the ones we believe is a bug or a feature we should provide in the future. You may make a pull request to fix them.</li></ul><h3>Pull Requests</h3><p>We appreciate pull requests from the community!</p><p>Before you start, please checkout the <a href="./coding-standard.html">Coding Standard</a> and <a href="https://www.apache.org/foundation/policies/conduct.html" target="_blank">Apache Code of Conduct</a>.</p><p>Please refer to <a href="https://github.com/apache/incubator-echarts/wiki/How-to-setup-the-dev-environment" target="_blank">How to setup the dev environment</a> and <a href="https://github.com/apache/incubator-echarts/wiki/How-to-make-a-pull-request" target="_blank">How to make a pull request</a> for more detailed instructions.</p><p>If you have any problem when making pull requests, please comment in the issues or pull requests or send an email to <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a> to ask for help.</p><h3>Mailing List</h3><p>Join us on the <a href="./maillist.html">mailing list</a> and take part in any conversations.</p><h3>Documents</h3><p>Documentation is massively important to help users make the most of Apache ECharts (incubating) and it's probably the area that needs the most help! So if you are interested, whether it's just to fix a page here or there, correct a link or improve what documentation is already there, please do dive in and help!</p><p>The source code of document is available at <a href="https://github.com/apache/incubator-echarts-doc" target="_blank">GitHub</a> and maybe the easiest way to find where to change is by searching key words already there.</p><p>In the issue list, we also have a <a href="https://github.com/apache/incubator-echarts/labels/doc" target="_blank">"doc"</a> label. We appreciate pull requests to fix them indeed!</p><h2>Becoming a PPMC Member or Committer!</h2><p>As we mentioned above, we appreciate the help for ECharts in any forms. When we find someone making continuous contributions in the community, we will invite him/her to be our PPMC member or committer.</p><p>Being a committer means you have the "write" access to the ECharts project, which enables you to contribute more easily and efficiently.</p><p>The Podling Project Management Committee (PPMC) helps a Podling learn how to govern itself. More information can be found at <a href="https://incubator.apache.org/guides/ppmc.html">Podling Project Management Committee</a>.</p><p>We don't have a fixed single standard for selecting a PPMC member or committer because we value all kinds of help offered. Generally, current PPMC members watch the continuous contributors in the community and start discussion and votes for the candidates, and invite to to be a PPMC member or committer after the vote passes.</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=1597861067124"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="ECharts FAQ"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><div class="container"><h1>Contributing</h1><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div></div><div class="page-content"><div class="container"><h2>Contributing to Apache ECharts (incubating)</h2><p>There are many ways that you can help make ECharts better. Please dive in and help!</p><h3>Issues</h3><p>Review the <a href="https://github.com/apache/incubator-echarts/issues" target="_blank">issues</a> and see if you can offer some help.</p><ul><li>If it's a bug report or how-to question, make sure the author has provided a minimum online demo with either <a href="https://codepen.io/Ovilia/pen/dyYWXWM" target="_blank">Codepen</a> or <a href="https://gallery.echartsjs.com/editor.html" target="_blank">ECharts Gallery (Chinese)</a> to show what's going wrong.</li><li>If it's a feature request, make sure the author has a clear explanation about what is expected and a picture would be very helpful for some cases.</li><li>Help reproduce bugs if an online demo is provided and check the <a href="https://echarts.apache.org/en/option.html" target="_blank">document</a> to see if it's a bug.</li><li>Issues without a "pending" label are the ones we believe is a bug or a feature we should provide in the future. You may make a pull request to fix them.</li></ul><h3>Pull Requests</h3><p>We appreciate pull requests from the community!</p><p>Before you start, please checkout the <a href="./coding-standard.html">Coding Standard</a> and <a href="https://www.apache.org/foundation/policies/conduct.html" target="_blank">Apache Code of Conduct</a>.</p><p>Please refer to <a href="https://github.com/apache/incubator-echarts/wiki/How-to-setup-the-dev-environment" target="_blank">How to setup the dev environment</a> and <a href="https://github.com/apache/incubator-echarts/wiki/How-to-make-a-pull-request" target="_blank">How to make a pull request</a> for more detailed instructions.</p><p>If you have any problem when making pull requests, please comment in the issues or pull requests or send an email to <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a> to ask for help.</p><h3>Mailing List</h3><p>Join us on the <a href="./maillist.html">mailing list</a> and take part in any conversations.</p><h3>Documents</h3><p>Documentation is massively important to help users make the most of Apache ECharts (incubating) and it's probably the area that needs the most help! So if you are interested, whether it's just to fix a page here or there, correct a link or improve what documentation is already there, please do dive in and help!</p><p>The source code of document is available at <a href="https://github.com/apache/incubator-echarts-doc" target="_blank">GitHub</a> and maybe the easiest way to find where to change is by searching key words already there.</p><p>In the issue list, we also have a <a href="https://github.com/apache/incubator-echarts/labels/doc" target="_blank">"doc"</a> label. We appreciate pull requests to fix them indeed!</p><h2>Becoming a PPMC Member or Committer!</h2><p>As we mentioned above, we appreciate the help for ECharts in any forms. When we find someone making continuous contributions in the community, we will invite him/her to be our PPMC member or committer.</p><p>Being a committer means you have the "write" access to the ECharts project, which enables you to contribute more easily and efficiently.</p><p>The Podling Project Management Committee (PPMC) helps a Podling learn how to govern itself. More information can be found at <a href="https://incubator.apache.org/guides/ppmc.html">Podling Project Management Committee</a>.</p><p>We don't have a fixed single standard for selecting a PPMC member or committer because we value all kinds of help offered. Generally, current PPMC members watch the continuous contributors in the community and start discussion and votes for the candidates, and invite to to be a PPMC member or committer after the vote passes.</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=1598523334942"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
 
diff --git a/en/css/doc-bundle.css b/en/css/doc-bundle.css
index 8a42e1f..1936d54 100644
--- a/en/css/doc-bundle.css
+++ b/en/css/doc-bundle.css
@@ -961,6 +961,7 @@
     top: 0;
 }
 #example-panel .preview-main {
+    position: relative;
     padding: 0 10px;
     background: #fefefe;
     box-sizing: border-box;
@@ -1285,7 +1286,8 @@
     width: 100%;
 }
 .el-autocomplete-suggestion.search-input-popper {
-  width: 300px !important;
+  width: auto !important;
+  min-width: 300px;
 }
 .el-autocomplete-suggestion.search-input-popper li {
     line-height: 28px;
diff --git a/en/dependencies.html b/en/dependencies.html
index bda4dc6..953eaba 100644
--- a/en/dependencies.html
+++ b/en/dependencies.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'en';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -7,7 +7,7 @@
     document.head.insertBefore(el, document.getElementById('font-hack'));
 }
 </script><title>Dependencies - Apache ECharts (incubating)</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><h1>Dependencies</h1><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div><div class="page-content"><div class="container"><h2>ZRender</h2><p>ECharts depends on <a href="https://github.com/ecomfe/zrender">ZRender</a>, a lightweight canvas library which provides 2d draw.</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1597861067124"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><h1>Dependencies</h1><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div><div class="page-content"><div class="container"><h2>ZRender</h2><p>ECharts depends on <a href="https://github.com/ecomfe/zrender">ZRender</a>, a lightweight canvas library which provides 2d draw.</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1598523334942"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
 
diff --git a/en/documents/option-parts/option-outline.js b/en/documents/option-parts/option-outline.js
index 327c881..418f1d9 100644
--- a/en/documents/option-parts/option-outline.js
+++ b/en/documents/option-parts/option-outline.js
@@ -1 +1 @@
-window.__EC_DOC_option_outline = {"children":[{"type":"Object","isObject":true,"prop":"title","children":[{"type":"string","prop":"id"},{"default":true,"prop":"show"},{"default":"''","prop":"text"},{"default":"''","prop":"link"},{"default":"'blank'","prop":"target"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":18,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":"''","prop":"subtext"},{"default":"''","prop":"sublink"},{"default":"'blank'","prop":"subtarget"},{"type":"Object","isObject":true,"prop":"subtextStyle","children":[{"type":"Color","default":"'#aaa'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":"'auto'","prop":"textAlign"},{"default":"'auto'","prop":"textVerticalAlign"},{"default":false,"prop":"triggerEvent"},{"type":["number","Array"],"default":5,"prop":"padding"},{"default":10,"prop":"itemGap"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'auto'","prop":"left"},{"type":["string","number"],"default":"'auto'","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"},{"type":"Color","default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'#ccc'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"type":["number","Array"],"default":0,"prop":"borderRadius"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"legend","children":[{"type":"string","prop":"type"},{"type":"string","prop":"id"},{"default":true,"prop":"show"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'auto'","prop":"left"},{"type":["string","number"],"default":"'auto'","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"},{"type":["string","number"],"default":"'auto'","prop":"width"},{"type":["string","number"],"default":"'auto'","prop":"height"},{"default":"'horizontal'","prop":"orient"},{"default":"'auto'","prop":"align"},{"type":["number","Array"],"default":5,"prop":"padding"},{"default":10,"prop":"itemGap"},{"default":25,"prop":"itemWidth"},{"default":14,"prop":"itemHeight"},{"default":true,"prop":"symbolKeepAspect"},{"type":["string","Function"],"prop":"formatter"},{"type":["string","boolean"],"default":true,"prop":"selectedMode"},{"type":"Color","default":"'#ccc'","prop":"inactiveColor"},{"type":"Object","prop":"selected"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","prop":"tooltip"},{"type":"string","prop":"icon"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"string","prop":"icon"},{"type":"Object","prop":"textStyle"}]},{"type":"Color","default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'#ccc'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"type":["number","Array"],"default":0,"prop":"borderRadius"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0,"prop":"scrollDataIndex"},{"default":5,"prop":"pageButtonItemGap"},{"type":"number","prop":"pageButtonGap"},{"default":"'end'","prop":"pageButtonPosition"},{"type":["string","Function"],"default":"'{current}/{total}'","prop":"pageFormatter"},{"type":"Object","isObject":true,"prop":"pageIcons","children":[{"type":"Array","prop":"horizontal"},{"type":"Array","prop":"vertical"}]},{"default":"'#2f4554'","prop":"pageIconColor"},{"default":"'#aaa'","prop":"pageIconInactiveColor"},{"type":["number","Array"],"default":15,"prop":"pageIconSize"},{"type":"Object","isObject":true,"prop":"pageTextStyle","children":[{"type":"Color","default":"#333","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"boolean","prop":"animation"},{"default":800,"prop":"animationDurationUpdate"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"selectorLabel","children":[{"default":true,"prop":"show"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":["boolean","Array"],"default":false,"prop":"selector"},{"type":"Object","isObject":true,"prop":"selectorLabel","children":[{"default":true,"prop":"show"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":"'auto'","prop":"selectorPosition"},{"default":7,"prop":"selectorItemGap"},{"default":10,"prop":"selectorButtonGap"}]},{"type":"Object","isObject":true,"prop":"grid","children":[{"type":"string","prop":"id"},{"default":false,"prop":"show"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'10%'","prop":"left"},{"type":["string","number"],"default":60,"prop":"top"},{"type":["string","number"],"default":"'10%'","prop":"right"},{"type":["string","number"],"default":60,"prop":"bottom"},{"type":["string","number"],"default":"'auto'","prop":"width"},{"type":["string","number"],"default":"'auto'","prop":"height"},{"default":false,"prop":"containLabel"},{"type":"Color","default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'#ccc'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"Object","isObject":true,"prop":"tooltip","children":[{"default":true,"prop":"show"},{"default":"'item'","prop":"trigger"},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"default":"'line'","prop":"type"},{"default":"'auto'","prop":"axis"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"crossStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"dashed","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":200,"prop":"animationDurationUpdate"},{"default":"exponentialOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"xAxis","children":[{"type":"string","prop":"id"},{"default":true,"prop":"show"},{"default":0,"prop":"gridIndex"},{"type":"string","prop":"position"},{"default":0,"prop":"offset"},{"default":"'category'","prop":"type"},{"type":"string","prop":"name"},{"default":"'end'","prop":"nameLocation"},{"type":"Object","isObject":true,"prop":"nameTextStyle","children":[{"type":"Color","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":15,"prop":"nameGap"},{"type":"number","prop":"nameRotate"},{"default":false,"prop":"inverse"},{"type":["boolean","Array"],"prop":"boundaryGap"},{"type":["number","string","Function"],"prop":"min"},{"type":["number","string","Function"],"prop":"max"},{"default":false,"prop":"scale"},{"default":5,"prop":"splitNumber"},{"default":0,"prop":"minInterval"},{"type":"number","prop":"maxInterval"},{"type":"number","prop":"interval"},{"default":10,"prop":"logBase"},{"default":false,"prop":"silent"},{"default":false,"prop":"triggerEvent"},{"type":"Object","isObject":true,"prop":"axisLine","children":[{"default":true,"prop":"show"},{"default":true,"prop":"onZero"},{"type":"number","prop":"onZeroAxisIndex"},{"type":["string","Array"],"default":"'none'","prop":"symbol"},{"type":"Array","default":"[10, 15]","prop":"symbolSize"},{"type":["Array","number"],"default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisTick","children":[{"default":true,"prop":"show"},{"default":false,"prop":"alignWithLabel"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":5,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorTick","children":[{"default":false,"prop":"show"},{"default":5,"prop":"splitNumber"},{"default":3,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisLabel","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":0,"prop":"rotate"},{"default":8,"prop":"margin"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","prop":"showMinLabel"},{"type":"boolean","prop":"showMaxLabel"},{"type":["Color","Function"],"prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"splitLine","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":["Array","string"],"default":"['#ccc']","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorSplitLine","children":[{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#eee'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"splitArea","children":[{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Array","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"value"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"default":false,"prop":"show"},{"default":"'line'","prop":"type"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"triggerTooltip"},{"type":"number","prop":"value"},{"type":"boolean","prop":"status"},{"type":"Object","isObject":true,"prop":"handle","children":[{"default":false,"prop":"show"},{"type":"*","prop":"icon"},{"type":["number","Array"],"default":45,"prop":"size"},{"default":50,"prop":"margin"},{"default":"'#333'","prop":"color"},{"default":40,"prop":"throttle"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":2,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]}]},{"default":0,"prop":"zlevel"},{"default":0,"prop":"z"}]},{"type":"Object","isObject":true,"prop":"yAxis","children":[{"type":"string","prop":"id"},{"default":true,"prop":"show"},{"default":0,"prop":"gridIndex"},{"type":"string","prop":"position"},{"default":0,"prop":"offset"},{"default":"'value'","prop":"type"},{"type":"string","prop":"name"},{"default":"'end'","prop":"nameLocation"},{"type":"Object","isObject":true,"prop":"nameTextStyle","children":[{"type":"Color","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":15,"prop":"nameGap"},{"type":"number","prop":"nameRotate"},{"default":false,"prop":"inverse"},{"type":["boolean","Array"],"prop":"boundaryGap"},{"type":["number","string","Function"],"prop":"min"},{"type":["number","string","Function"],"prop":"max"},{"default":false,"prop":"scale"},{"default":5,"prop":"splitNumber"},{"default":0,"prop":"minInterval"},{"type":"number","prop":"maxInterval"},{"type":"number","prop":"interval"},{"default":10,"prop":"logBase"},{"default":false,"prop":"silent"},{"default":false,"prop":"triggerEvent"},{"type":"Object","isObject":true,"prop":"axisLine","children":[{"default":true,"prop":"show"},{"default":true,"prop":"onZero"},{"type":"number","prop":"onZeroAxisIndex"},{"type":["string","Array"],"default":"'none'","prop":"symbol"},{"type":"Array","default":"[10, 15]","prop":"symbolSize"},{"type":["Array","number"],"default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisTick","children":[{"default":true,"prop":"show"},{"default":false,"prop":"alignWithLabel"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":5,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorTick","children":[{"default":false,"prop":"show"},{"default":5,"prop":"splitNumber"},{"default":3,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisLabel","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":0,"prop":"rotate"},{"default":8,"prop":"margin"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","prop":"showMinLabel"},{"type":"boolean","prop":"showMaxLabel"},{"type":["Color","Function"],"prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"splitLine","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":["Array","string"],"default":"['#ccc']","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorSplitLine","children":[{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#eee'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"splitArea","children":[{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Array","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"value"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"default":false,"prop":"show"},{"default":"'line'","prop":"type"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"triggerTooltip"},{"type":"number","prop":"value"},{"type":"boolean","prop":"status"},{"type":"Object","isObject":true,"prop":"handle","children":[{"default":false,"prop":"show"},{"type":"*","prop":"icon"},{"type":["number","Array"],"default":45,"prop":"size"},{"default":50,"prop":"margin"},{"default":"'#333'","prop":"color"},{"default":40,"prop":"throttle"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":2,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]}]},{"default":0,"prop":"zlevel"},{"default":0,"prop":"z"}]},{"type":"Object","isObject":true,"prop":"polar","children":[{"type":"string","prop":"id"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":"Array","default":"['50%', '50%']","prop":"center"},{"type":["number","string","Array"],"prop":"radius"},{"type":"Object","isObject":true,"prop":"tooltip","children":[{"default":true,"prop":"show"},{"default":"'item'","prop":"trigger"},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"default":"'line'","prop":"type"},{"default":"'auto'","prop":"axis"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"crossStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"dashed","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":200,"prop":"animationDurationUpdate"},{"default":"exponentialOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"radiusAxis","children":[{"type":"string","prop":"id"},{"default":0,"prop":"polarIndex"},{"default":"'value'","prop":"type"},{"type":"string","prop":"name"},{"default":"'end'","prop":"nameLocation"},{"type":"Object","isObject":true,"prop":"nameTextStyle","children":[{"type":"Color","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":15,"prop":"nameGap"},{"type":"number","prop":"nameRotate"},{"default":false,"prop":"inverse"},{"type":["boolean","Array"],"prop":"boundaryGap"},{"type":["number","string","Function"],"prop":"min"},{"type":["number","string","Function"],"prop":"max"},{"default":false,"prop":"scale"},{"default":5,"prop":"splitNumber"},{"default":0,"prop":"minInterval"},{"type":"number","prop":"maxInterval"},{"type":"number","prop":"interval"},{"default":10,"prop":"logBase"},{"default":false,"prop":"silent"},{"default":false,"prop":"triggerEvent"},{"type":"Object","isObject":true,"prop":"axisLine","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'none'","prop":"symbol"},{"type":"Array","default":"[10, 15]","prop":"symbolSize"},{"type":["Array","number"],"default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisTick","children":[{"default":true,"prop":"show"},{"default":false,"prop":"alignWithLabel"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":5,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorTick","children":[{"default":false,"prop":"show"},{"default":5,"prop":"splitNumber"},{"default":3,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisLabel","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":0,"prop":"rotate"},{"default":8,"prop":"margin"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","prop":"showMinLabel"},{"type":"boolean","prop":"showMaxLabel"},{"type":["Color","Function"],"prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"splitLine","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":["Array","string"],"default":"['#ccc']","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorSplitLine","children":[{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#eee'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"splitArea","children":[{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Array","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"value"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"default":false,"prop":"show"},{"default":"'line'","prop":"type"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"triggerTooltip"},{"type":"number","prop":"value"},{"type":"boolean","prop":"status"},{"type":"Object","isObject":true,"prop":"handle","children":[{"default":false,"prop":"show"},{"type":"*","prop":"icon"},{"type":["number","Array"],"default":45,"prop":"size"},{"default":50,"prop":"margin"},{"default":"'#333'","prop":"color"},{"default":40,"prop":"throttle"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":2,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]}]},{"default":0,"prop":"zlevel"},{"default":0,"prop":"z"}]},{"type":"Object","isObject":true,"prop":"angleAxis","children":[{"type":"string","prop":"id"},{"default":0,"prop":"polarIndex"},{"default":90,"prop":"startAngle"},{"default":true,"prop":"clockwise"},{"default":"'category'","prop":"type"},{"type":["boolean","Array"],"prop":"boundaryGap"},{"type":["number","string","Function"],"prop":"min"},{"type":["number","string","Function"],"prop":"max"},{"default":false,"prop":"scale"},{"default":5,"prop":"splitNumber"},{"default":0,"prop":"minInterval"},{"type":"number","prop":"maxInterval"},{"type":"number","prop":"interval"},{"default":10,"prop":"logBase"},{"default":false,"prop":"silent"},{"default":false,"prop":"triggerEvent"},{"type":"Object","isObject":true,"prop":"axisLine","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'none'","prop":"symbol"},{"type":"Array","default":"[10, 15]","prop":"symbolSize"},{"type":["Array","number"],"default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisTick","children":[{"default":true,"prop":"show"},{"default":false,"prop":"alignWithLabel"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":5,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorTick","children":[{"default":false,"prop":"show"},{"default":5,"prop":"splitNumber"},{"default":3,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisLabel","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":8,"prop":"margin"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","prop":"showMinLabel"},{"type":"boolean","prop":"showMaxLabel"},{"type":["Color","Function"],"prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"splitLine","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":["Array","string"],"default":"['#ccc']","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorSplitLine","children":[{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#eee'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"splitArea","children":[{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Array","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"value"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"default":false,"prop":"show"},{"default":"'line'","prop":"type"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"triggerTooltip"},{"type":"number","prop":"value"},{"type":"boolean","prop":"status"},{"type":"Object","isObject":true,"prop":"handle","children":[{"default":false,"prop":"show"},{"type":"*","prop":"icon"},{"type":["number","Array"],"default":45,"prop":"size"},{"default":50,"prop":"margin"},{"default":"'#333'","prop":"color"},{"default":40,"prop":"throttle"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":2,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]}]},{"default":0,"prop":"zlevel"},{"default":0,"prop":"z"}]},{"type":"Object","isObject":true,"prop":"radar","children":[{"type":"string","prop":"id"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":"Array","default":"['50%', '50%']","prop":"center"},{"type":["number","string","Array"],"default":"75%","prop":"radius"},{"default":90,"prop":"startAngle"},{"type":"Object","isObject":true,"prop":"name","children":[{"default":true,"prop":"show"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":15,"prop":"nameGap"},{"default":5,"prop":"splitNumber"},{"default":"'polygon'","prop":"shape"},{"default":false,"prop":"scale"},{"default":false,"prop":"silent"},{"default":false,"prop":"triggerEvent"},{"type":"Object","isObject":true,"prop":"axisLine","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'none'","prop":"symbol"},{"type":"Array","default":"[10, 15]","prop":"symbolSize"},{"type":["Array","number"],"default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisTick","children":[{"default":true,"prop":"show"},{"default":5,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisLabel","children":[{"default":true,"prop":"show"},{"default":0,"prop":"rotate"},{"default":8,"prop":"margin"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","prop":"showMinLabel"},{"type":"boolean","prop":"showMaxLabel"},{"type":["Color","Function"],"prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"splitLine","children":[{"default":true,"prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":["Array","string"],"default":"['#ccc']","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"splitArea","children":[{"default":true,"prop":"show"},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Array","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"indicator","children":[{"type":"string","prop":"name"},{"type":"number","prop":"max"},{"type":"number","prop":"min"}]},{"type":"string","prop":"color"}]},{"type":"Array","isArray":true,"prop":"dataZoom","children":[{"type":"Object","isObject":true,"arrayItemType":"inside","children":[{"default":"'inside'","prop":"type"},{"type":"string","prop":"id"},{"default":false,"prop":"disabled"},{"type":["number","Array"],"prop":"xAxisIndex"},{"type":["number","Array"],"prop":"yAxisIndex"},{"type":["number","Array"],"prop":"radiusAxisIndex"},{"type":["number","Array"],"prop":"angleAxisIndex"},{"default":"'filter'","prop":"filterMode"},{"default":0,"prop":"start"},{"default":100,"prop":"end"},{"type":["number","string","Date"],"prop":"startValue"},{"type":["number","string","Date"],"prop":"endValue"},{"type":"number","prop":"minSpan"},{"type":"number","prop":"maxSpan"},{"type":["number","string","Date"],"prop":"minValueSpan"},{"type":["number","string","Date"],"prop":"maxValueSpan"},{"type":"string","prop":"orient"},{"default":false,"prop":"zoomLock"},{"default":100,"prop":"throttle"},{"type":"Array","prop":"rangeMode"},{"type":["boolean","string"],"default":true,"prop":"zoomOnMouseWheel"},{"type":["boolean","string"],"default":true,"prop":"moveOnMouseMove"},{"type":["boolean","string"],"default":false,"prop":"moveOnMouseWheel"},{"default":true,"prop":"preventDefaultMouseMove"}]},{"type":"Object","isObject":true,"arrayItemType":"slider","children":[{"default":"'slider'","prop":"type"},{"type":"string","prop":"id"},{"default":true,"prop":"show"},{"type":"Color","default":"'rgba(47,69,84,0)'","prop":"backgroundColor"},{"type":"Object","isObject":true,"prop":"dataBackground","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#2f4554","prop":"color"},{"default":0.5,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0.3,"prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Color","default":"rgba(47,69,84,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0.3,"prop":"opacity"}]}]},{"type":"Color","default":"'rgba(47,69,84,0.25)'","prop":"fillerColor"},{"type":"Color","default":"'#ddd'","prop":"borderColor"},{"type":"string","prop":"handleIcon"},{"type":["number","string"],"default":"'100%'","prop":"handleSize"},{"type":"Object","isObject":true,"prop":"handleStyle","children":[{"type":"Color","default":"#a7b7cc","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":["number","string"],"default":"'auto'","prop":"labelPrecision"},{"type":["string","Function"],"prop":"labelFormatter"},{"default":true,"prop":"showDetail"},{"default":"'auto'","prop":"showDataShadow"},{"default":true,"prop":"realtime"},{"type":"*","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"#333","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":["number","Array"],"prop":"xAxisIndex"},{"type":["number","Array"],"prop":"yAxisIndex"},{"type":["number","Array"],"prop":"radiusAxisIndex"},{"type":["number","Array"],"prop":"angleAxisIndex"},{"default":"'filter'","prop":"filterMode"},{"default":0,"prop":"start"},{"default":100,"prop":"end"},{"type":["number","string","Date"],"prop":"startValue"},{"type":["number","string","Date"],"prop":"endValue"},{"type":"number","prop":"minSpan"},{"type":"number","prop":"maxSpan"},{"type":["number","string","Date"],"prop":"minValueSpan"},{"type":["number","string","Date"],"prop":"maxValueSpan"},{"type":"string","prop":"orient"},{"default":false,"prop":"zoomLock"},{"default":100,"prop":"throttle"},{"type":"Array","prop":"rangeMode"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'auto'","prop":"left"},{"type":["string","number"],"default":"'auto'","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"}]}]},{"type":"Array","isArray":true,"prop":"visualMap","children":[{"type":"Object","isObject":true,"arrayItemType":"continuous","children":[{"default":"continuous","prop":"type"},{"type":"string","prop":"id"},{"type":"number","prop":"min"},{"type":"number","prop":"max"},{"type":"Array","prop":"range"},{"default":false,"prop":"calculable"},{"default":true,"prop":"realtime"},{"default":false,"prop":"inverse"},{"default":0,"prop":"precision"},{"default":20,"prop":"itemWidth"},{"default":140,"prop":"itemHeight"},{"default":"'auto'","prop":"align"},{"type":"Array","prop":"text"},{"default":10,"prop":"textGap"},{"default":true,"prop":"show"},{"type":"string","prop":"dimension"},{"type":["number","Array"],"prop":"seriesIndex"},{"default":true,"prop":"hoverLink"},{"type":"Object","prop":"inRange"},{"type":"Object","prop":"outOfRange"},{"type":"Object","isObject":true,"prop":"controller","children":[{"type":"Object","prop":"inRange"},{"type":"Object","prop":"outOfRange"}]},{"default":0,"prop":"zlevel"},{"default":4,"prop":"z"},{"type":["string","number"],"default":0,"prop":"left"},{"type":["string","number"],"default":"auto","prop":"top"},{"type":["string","number"],"default":"auto","prop":"right"},{"type":["string","number"],"default":0,"prop":"bottom"},{"default":"'vertical'","prop":"orient"},{"type":["number","Array"],"default":5,"prop":"padding"},{"type":"Color","default":"'rgba(0,0,0,0)'","prop":"backgroundColor"},{"type":"Color","default":"'#ccc'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":"Array","default":"['#bf444c', '#d88273', '#f6efa6']","prop":"color"},{"type":"*","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"#333","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"arrayItemType":"piecewise","children":[{"default":"piecewise","prop":"type"},{"type":"string","prop":"id"},{"default":5,"prop":"splitNumber"},{"type":"Array","prop":"pieces"},{"type":"Array","prop":"categories"},{"type":"number","prop":"min"},{"type":"number","prop":"max"},{"type":"boolean","prop":"minOpen"},{"type":"boolean","prop":"maxOpen"},{"default":"'multiple'","prop":"selectedMode"},{"default":false,"prop":"inverse"},{"type":"number","prop":"precision"},{"default":20,"prop":"itemWidth"},{"default":14,"prop":"itemHeight"},{"default":"'auto'","prop":"align"},{"type":"Array","prop":"text"},{"default":10,"prop":"textGap"},{"type":"boolean","prop":"showLabel"},{"type":"*","prop":"itemGap = 10"},{"default":"'roundRect'","prop":"itemSymbol"},{"default":true,"prop":"show"},{"type":"string","prop":"dimension"},{"type":["number","Array"],"prop":"seriesIndex"},{"default":true,"prop":"hoverLink"},{"type":"Object","prop":"inRange"},{"type":"Object","prop":"outOfRange"},{"type":"Object","isObject":true,"prop":"controller","children":[{"type":"Object","prop":"inRange"},{"type":"Object","prop":"outOfRange"}]},{"default":0,"prop":"zlevel"},{"default":4,"prop":"z"},{"type":["string","number"],"default":0,"prop":"left"},{"type":["string","number"],"default":"auto","prop":"top"},{"type":["string","number"],"default":"auto","prop":"right"},{"type":["string","number"],"default":0,"prop":"bottom"},{"default":"'vertical'","prop":"orient"},{"type":["number","Array"],"default":5,"prop":"padding"},{"type":"Color","default":"'rgba(0,0,0,0)'","prop":"backgroundColor"},{"type":"Color","default":"'#ccc'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":"Array","default":"['#bf444c', '#d88273', '#f6efa6']","prop":"color"},{"type":"*","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"#333","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"tooltip","children":[{"default":true,"prop":"show"},{"default":"'item'","prop":"trigger"},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"default":"'line'","prop":"type"},{"default":"'auto'","prop":"axis"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"crossStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"dashed","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":200,"prop":"animationDurationUpdate"},{"default":"exponentialOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":true,"prop":"showContent"},{"default":false,"prop":"alwaysShowContent"},{"default":"'mousemove|click'","prop":"triggerOn"},{"default":0,"prop":"showDelay"},{"default":100,"prop":"hideDelay"},{"default":true,"prop":"enterable"},{"default":"'html'","prop":"renderMode"},{"default":false,"prop":"confine"},{"default":false,"prop":"appendToBody"},{"default":0.4,"prop":"transitionDuration"},{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"type":"string","prop":"id"},{"default":false,"prop":"show"},{"default":"'line'","prop":"type"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"triggerTooltip"},{"type":"number","prop":"value"},{"type":"boolean","prop":"status"},{"type":"Object","isObject":true,"prop":"handle","children":[{"default":false,"prop":"show"},{"type":"*","prop":"icon"},{"type":["number","Array"],"default":45,"prop":"size"},{"default":50,"prop":"margin"},{"default":"'#333'","prop":"color"},{"default":40,"prop":"throttle"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":2,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Array","prop":"link"},{"default":"'mousemove|click'","prop":"triggerOn"}]},{"type":"Object","isObject":true,"prop":"toolbox","children":[{"type":"string","prop":"id"},{"default":true,"prop":"show"},{"default":"'horizontal'","prop":"orient"},{"default":15,"prop":"itemSize"},{"default":10,"prop":"itemGap"},{"default":true,"prop":"showTitle"},{"type":"Object","isObject":true,"prop":"feature","children":[{"type":"Object","isObject":true,"prop":"saveAsImage","children":[{"default":"'png'","prop":"type"},{"type":"string","prop":"name"},{"type":"Color","default":"'auto'","prop":"backgroundColor"},{"type":"Color","default":"'#fff'","prop":"connectedBackgroundColor"},{"type":"Array","default":"['toolbox']","prop":"excludeComponents"},{"default":true,"prop":"show"},{"default":"'save as image'","prop":"title"},{"type":"*","prop":"icon"},{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","default":"none","prop":"color"},{"type":"Color","default":"#666","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":"'bottom'","prop":"textPosition"},{"default":"'#000'","prop":"textFill"},{"default":"'center'","prop":"textAlign"},{"type":"string","prop":"textBackgroundColor"},{"type":"number","prop":"textBorderRadius"},{"type":"number","prop":"textPadding"}]}]},{"default":1,"prop":"pixelRatio"}]},{"type":"Object","isObject":true,"prop":"restore","children":[{"default":true,"prop":"show"},{"default":"'restore'","prop":"title"},{"type":"*","prop":"icon"},{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","default":"none","prop":"color"},{"type":"Color","default":"#666","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":"'bottom'","prop":"textPosition"},{"default":"'#000'","prop":"textFill"},{"default":"'center'","prop":"textAlign"},{"type":"string","prop":"textBackgroundColor"},{"type":"number","prop":"textBorderRadius"},{"type":"number","prop":"textPadding"}]}]}]},{"type":"Object","isObject":true,"prop":"dataView","children":[{"default":true,"prop":"show"},{"default":"'data view'","prop":"title"},{"type":"*","prop":"icon"},{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","default":"none","prop":"color"},{"type":"Color","default":"#666","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":"'bottom'","prop":"textPosition"},{"default":"'#000'","prop":"textFill"},{"default":"'center'","prop":"textAlign"},{"type":"string","prop":"textBackgroundColor"},{"type":"number","prop":"textBorderRadius"},{"type":"number","prop":"textPadding"}]}]},{"default":false,"prop":"readOnly"},{"type":"Function","prop":"optionToContent"},{"type":"Function","prop":"contentToOption"},{"type":"Array","default":"['data view', 'turn off', 'refresh']","prop":"lang"},{"default":"'#fff'","prop":"backgroundColor"},{"default":"'#fff'","prop":"textareaColor"},{"default":"'#333'","prop":"textareaBorderColor"},{"default":"'#000'","prop":"textColor"},{"default":"'#c23531'","prop":"buttonColor"},{"default":"'#fff'","prop":"buttonTextColor"}]},{"type":"Object","isObject":true,"prop":"dataZoom","children":[{"default":true,"prop":"show"},{"type":"Object","isObject":true,"prop":"title","children":[{"default":"'area zooming'","prop":"zoom"},{"default":"'restore area zooming'","prop":"back"}]},{"type":"Object","isObject":true,"prop":"icon","children":[{"type":"string","prop":"zoom"},{"type":"string","prop":"back"}]},{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","default":"none","prop":"color"},{"type":"Color","default":"#666","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":"'bottom'","prop":"textPosition"},{"default":"'#000'","prop":"textFill"},{"default":"'center'","prop":"textAlign"},{"type":"string","prop":"textBackgroundColor"},{"type":"number","prop":"textBorderRadius"},{"type":"number","prop":"textPadding"}]}]},{"default":"'filter'","prop":"filterMode"},{"type":["number","Array","boolean"],"prop":"xAxisIndex"},{"type":["number","Array","boolean"],"prop":"yAxisIndex"}]},{"type":"Object","isObject":true,"prop":"magicType","children":[{"default":true,"prop":"show"},{"type":"Array","prop":"type"},{"type":"Object","isObject":true,"prop":"title","children":[{"default":"'for line charts'","prop":"line"},{"default":"'for bar charts'","prop":"bar"},{"default":"'for stacked charts'","prop":"stack"},{"default":"'for tiled charts'","prop":"tiled"}]},{"type":"Object","isObject":true,"prop":"icon","children":[{"type":"string","prop":"line"},{"type":"string","prop":"bar"},{"type":"string","prop":"stack"},{"type":"string","prop":"tiled"}]},{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","default":"none","prop":"color"},{"type":"Color","default":"#666","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":"'bottom'","prop":"textPosition"},{"default":"'#000'","prop":"textFill"},{"default":"'center'","prop":"textAlign"},{"type":"string","prop":"textBackgroundColor"},{"type":"number","prop":"textBorderRadius"},{"type":"number","prop":"textPadding"}]}]},{"type":"Object","isObject":true,"prop":"option","children":[{"type":"Object","prop":"line"},{"type":"Object","prop":"bar"},{"type":"Object","prop":"stack"},{"type":"Object","prop":"tiled"}]},{"type":"Object","isObject":true,"prop":"seriesIndex","children":[{"type":"Array","prop":"line"},{"type":"Array","prop":"bar"},{"type":"Array","prop":"stack"},{"type":"Array","prop":"tiled"}]}]},{"type":"Object","isObject":true,"prop":"brush","children":[{"type":"Array","prop":"type"},{"type":"Object","isObject":true,"prop":"icon","children":[{"type":"string","prop":"rect"},{"type":"string","prop":"polygon"},{"type":"string","prop":"lineX"},{"type":"string","prop":"lineY"},{"type":"string","prop":"keep"},{"type":"string","prop":"clear"}]},{"type":"Object","isObject":true,"prop":"title","children":[{"default":"'Rectangle selection'","prop":"rect"},{"default":"'Polygon selection'","prop":"polygon"},{"default":"'Horizontal selection'","prop":"lineX"},{"default":"'Vertical selection'","prop":"lineY"},{"default":"'Keep previous selection'","prop":"keep"},{"default":"'Clear selection'","prop":"clear"}]}]}]},{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","default":"none","prop":"color"},{"type":"Color","default":"#666","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":"'bottom'","prop":"textPosition"},{"default":"'#000'","prop":"textFill"},{"default":"'center'","prop":"textAlign"},{"type":"string","prop":"textBackgroundColor"},{"type":"number","prop":"textBorderRadius"},{"type":"number","prop":"textPadding"}]}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'auto'","prop":"left"},{"type":["string","number"],"default":"'auto'","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"},{"type":["string","number"],"default":"'auto'","prop":"width"},{"type":["string","number"],"default":"'auto'","prop":"height"},{"type":"Object","prop":"tooltip"}]},{"type":"Object","isObject":true,"prop":"brush","children":[{"type":"string","prop":"id"},{"type":"Array","default":"['rect', 'polygon', 'keep', 'clear']","prop":"toolbox"},{"type":["Array","string"],"prop":"brushLink"},{"type":["Array","number","string"],"default":"'all'","prop":"seriesIndex"},{"type":["Array","number","string"],"prop":"geoIndex"},{"type":["Array","number","string"],"prop":"xAxisIndex"},{"type":["Array","number","string"],"prop":"yAxisIndex"},{"default":"'rect'","prop":"brushType"},{"default":"'single'","prop":"brushMode"},{"default":true,"prop":"transformable"},{"type":"Object","prop":"brushStyle"},{"default":"'fixRate'","prop":"throttleType"},{"default":0,"prop":"throttleDelay"},{"default":true,"prop":"removeOnClick"},{"type":"Object","prop":"inBrush"},{"type":"Object","prop":"outOfBrush"},{"default":10000,"prop":"z"}]},{"type":"Object","isObject":true,"prop":"geo","children":[{"type":"string","prop":"id"},{"default":true,"prop":"show"},{"default":"''","prop":"map"},{"type":["boolean","string"],"default":false,"prop":"roam"},{"type":"Array","prop":"center"},{"default":0.75,"prop":"aspectScale"},{"type":"Array","prop":"boundingCoords"},{"default":1,"prop":"zoom"},{"type":"Object","isObject":true,"prop":"scaleLimit","children":[{"type":"number","prop":"min"},{"type":"number","prop":"max"}]},{"type":"Object","prop":"nameMap"},{"default":"'name'","prop":"nameProperty"},{"type":["boolean","string"],"default":false,"prop":"selectedMode"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"'#eee'","prop":"areaColor"},{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"'#eee'","prop":"areaColor"},{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'auto'","prop":"left"},{"type":["string","number"],"default":"'auto'","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"},{"type":"Array","prop":"layoutCenter"},{"type":["number","string"],"prop":"layoutSize"},{"type":"Array","isArray":true,"prop":"regions","children":[{"type":"string","prop":"name"},{"default":false,"prop":"selected"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"areaColor"},{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"areaColor"},{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":false,"prop":"silent"}]},{"type":"Object","isObject":true,"prop":"parallel","children":[{"type":"string","prop":"id"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":80,"prop":"left"},{"type":["string","number"],"default":60,"prop":"top"},{"type":["string","number"],"default":80,"prop":"right"},{"type":["string","number"],"default":60,"prop":"bottom"},{"type":["string","number"],"default":"'auto'","prop":"width"},{"type":["string","number"],"default":"'auto'","prop":"height"},{"default":"'horizontal'","prop":"layout"},{"default":false,"prop":"axisExpandable"},{"type":"number","prop":"axisExpandCenter"},{"default":0,"prop":"axisExpandCount"},{"default":50,"prop":"axisExpandWidth"},{"default":"'click'","prop":"axisExpandTriggerOn"},{"type":"Object","isObject":true,"prop":"parallelAxisDefault","children":[{"default":"value","prop":"type"},{"type":"string","prop":"name"},{"default":"'end'","prop":"nameLocation"},{"type":"Object","isObject":true,"prop":"nameTextStyle","children":[{"type":"Color","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":15,"prop":"nameGap"},{"type":"number","prop":"nameRotate"},{"default":false,"prop":"inverse"},{"type":["boolean","Array"],"prop":"boundaryGap"},{"type":["number","string","Function"],"prop":"min"},{"type":["number","string","Function"],"prop":"max"},{"default":false,"prop":"scale"},{"default":5,"prop":"splitNumber"},{"default":0,"prop":"minInterval"},{"type":"number","prop":"maxInterval"},{"type":"number","prop":"interval"},{"default":10,"prop":"logBase"},{"default":false,"prop":"silent"},{"default":false,"prop":"triggerEvent"},{"type":"Object","isObject":true,"prop":"axisLine","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'none'","prop":"symbol"},{"type":"Array","default":"[10, 15]","prop":"symbolSize"},{"type":["Array","number"],"default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisTick","children":[{"default":true,"prop":"show"},{"default":false,"prop":"alignWithLabel"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":5,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorTick","children":[{"default":false,"prop":"show"},{"default":5,"prop":"splitNumber"},{"default":3,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisLabel","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":0,"prop":"rotate"},{"default":8,"prop":"margin"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","prop":"showMinLabel"},{"type":"boolean","prop":"showMaxLabel"},{"type":["Color","Function"],"prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"value"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"parallelAxis","children":[{"type":"string","prop":"id"},{"type":"number","prop":"dim"},{"default":0,"prop":"parallelIndex"},{"default":true,"prop":"realtime"},{"type":"Object","isObject":true,"prop":"areaSelectStyle","children":[{"default":20,"prop":"width"},{"default":1,"prop":"borderWidth"},{"type":"Color","default":"'rgba(160,197,232)'","prop":"borderColor"},{"type":"Color","default":"'rgba(160,197,232)'","prop":"color"},{"default":0.3,"prop":"opacity"}]},{"default":"value","prop":"type"},{"type":"string","prop":"name"},{"default":"'end'","prop":"nameLocation"},{"type":"Object","isObject":true,"prop":"nameTextStyle","children":[{"type":"Color","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":15,"prop":"nameGap"},{"type":"number","prop":"nameRotate"},{"default":false,"prop":"inverse"},{"type":["boolean","Array"],"prop":"boundaryGap"},{"type":["number","string","Function"],"prop":"min"},{"type":["number","string","Function"],"prop":"max"},{"default":false,"prop":"scale"},{"default":5,"prop":"splitNumber"},{"default":0,"prop":"minInterval"},{"type":"number","prop":"maxInterval"},{"type":"number","prop":"interval"},{"default":10,"prop":"logBase"},{"default":false,"prop":"silent"},{"default":false,"prop":"triggerEvent"},{"type":"Object","isObject":true,"prop":"axisLine","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'none'","prop":"symbol"},{"type":"Array","default":"[10, 15]","prop":"symbolSize"},{"type":["Array","number"],"default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisTick","children":[{"default":true,"prop":"show"},{"default":false,"prop":"alignWithLabel"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":5,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorTick","children":[{"default":false,"prop":"show"},{"default":5,"prop":"splitNumber"},{"default":3,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisLabel","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":0,"prop":"rotate"},{"default":8,"prop":"margin"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","prop":"showMinLabel"},{"type":"boolean","prop":"showMaxLabel"},{"type":["Color","Function"],"prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"value"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"singleAxis","children":[{"type":"string","prop":"id"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'5%'","prop":"left"},{"type":["string","number"],"default":"'5%'","prop":"top"},{"type":["string","number"],"default":"'5%'","prop":"right"},{"type":["string","number"],"default":"'5%'","prop":"bottom"},{"type":["string","number"],"default":"'auto'","prop":"width"},{"type":["string","number"],"default":"'auto'","prop":"height"},{"default":"'horizontal'","prop":"orient"},{"default":"'value'","prop":"type"},{"type":"string","prop":"name"},{"default":"'end'","prop":"nameLocation"},{"type":"Object","isObject":true,"prop":"nameTextStyle","children":[{"type":"Color","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":15,"prop":"nameGap"},{"type":"number","prop":"nameRotate"},{"default":false,"prop":"inverse"},{"type":["boolean","Array"],"prop":"boundaryGap"},{"type":["number","string","Function"],"prop":"min"},{"type":["number","string","Function"],"prop":"max"},{"default":false,"prop":"scale"},{"default":5,"prop":"splitNumber"},{"default":0,"prop":"minInterval"},{"type":"number","prop":"maxInterval"},{"type":"number","prop":"interval"},{"default":10,"prop":"logBase"},{"default":false,"prop":"silent"},{"default":false,"prop":"triggerEvent"},{"type":"Object","isObject":true,"prop":"axisLine","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'none'","prop":"symbol"},{"type":"Array","default":"[10, 15]","prop":"symbolSize"},{"type":["Array","number"],"default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisTick","children":[{"default":true,"prop":"show"},{"default":false,"prop":"alignWithLabel"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":5,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorTick","children":[{"default":false,"prop":"show"},{"default":5,"prop":"splitNumber"},{"default":3,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisLabel","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":0,"prop":"rotate"},{"default":8,"prop":"margin"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","prop":"showMinLabel"},{"type":"boolean","prop":"showMaxLabel"},{"type":["Color","Function"],"prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"splitLine","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":["Array","string"],"default":"['#ccc']","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorSplitLine","children":[{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#eee'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"splitArea","children":[{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Array","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"value"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"default":false,"prop":"show"},{"default":"'line'","prop":"type"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"triggerTooltip"},{"type":"number","prop":"value"},{"type":"boolean","prop":"status"},{"type":"Object","isObject":true,"prop":"handle","children":[{"default":false,"prop":"show"},{"type":"*","prop":"icon"},{"type":["number","Array"],"default":45,"prop":"size"},{"default":50,"prop":"margin"},{"default":"'#333'","prop":"color"},{"default":40,"prop":"throttle"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":2,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"tooltip","children":[{"default":true,"prop":"show"},{"default":"'item'","prop":"trigger"},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"default":"'line'","prop":"type"},{"default":"'auto'","prop":"axis"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"crossStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"dashed","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":200,"prop":"animationDurationUpdate"},{"default":"exponentialOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"timeline","children":[{"default":true,"prop":"show"},{"default":"'slider'","prop":"type"},{"default":"'time'","prop":"axisType"},{"default":0,"prop":"currentIndex"},{"default":false,"prop":"autoPlay"},{"default":false,"prop":"rewind"},{"default":true,"prop":"loop"},{"default":2000,"prop":"playInterval"},{"default":true,"prop":"realtime"},{"default":"'left'","prop":"controlPosition"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'auto'","prop":"left"},{"type":["string","number"],"default":"'auto'","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"},{"type":["number","Array"],"default":5,"prop":"padding"},{"default":"'horizontal'","prop":"orient"},{"default":false,"prop":"inverse"},{"default":"'emptyCircle'","prop":"symbol"},{"type":["number","Array"],"default":10,"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"default":true,"prop":"show"},{"type":"Color","default":"'#304654'","prop":"color"},{"default":2,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'auto'","prop":"position"},{"default":true,"prop":"show"},{"type":["string","number"],"default":"'auto'","prop":"interval"},{"type":"prefix","default":0,"prop":"rotate"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'#304654'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"type":["string","number"],"default":"'auto'","prop":"interval"},{"type":"prefix","default":0,"prop":"rotate"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'#c23531'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"'#304654'","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"'#c23531'","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"checkpointStyle","children":[{"default":"'circle'","prop":"symbol"},{"type":["number","Array"],"default":13,"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Color","default":"'#c23531'","prop":"color"},{"default":5,"prop":"borderWidth"},{"type":"Color","default":"'rgba(194,53,49, 0.5)'","prop":"borderColor"},{"default":true,"prop":"animation"},{"default":300,"prop":"animationDuration"},{"default":"'quinticInOut'","prop":"animationEasing"}]},{"type":"Object","isObject":true,"prop":"controlStyle","children":[{"default":true,"prop":"show"},{"default":true,"prop":"showPlayBtn"},{"default":true,"prop":"showPrevBtn"},{"default":true,"prop":"showNextBtn"},{"default":22,"prop":"itemSize"},{"default":12,"prop":"itemGap"},{"default":"'left'","prop":"position"},{"type":"string","prop":"playIcon"},{"type":"string","prop":"stopIcon"},{"type":"string","prop":"prevIcon"},{"type":"string","prop":"nextIcon"},{"type":"Color","default":"'#304654'","prop":"color"},{"type":"Color","default":"'#304654'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"'#c23531'","prop":"color"},{"type":"Color","default":"'#c23531'","prop":"borderColor"},{"default":2,"prop":"borderWidth"}]}]},{"type":"Array","prop":"data"}]},{"type":"*","isObject":true,"prop":"graphic","children":[{"type":"string","prop":"id"},{"type":"Array","isArray":true,"prop":"elements","children":[{"type":"Object","isObject":true,"arrayItemType":"group","children":[{"default":"group","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"default":0,"prop":"width"},{"default":0,"prop":"height"},{"default":false,"prop":"diffChildrenByName"},{"type":"Array","prop":"children"},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"image","children":[{"default":"image","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"style","children":[{"type":"string","prop":"image"},{"default":0,"prop":"x"},{"type":"numbr","default":0,"prop":"y"},{"default":0,"prop":"width"},{"type":"numbr","default":0,"prop":"height"},{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"text","children":[{"default":"text","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"''","prop":"text"},{"default":0,"prop":"x"},{"type":"numbr","default":0,"prop":"y"},{"type":"string","prop":"font"},{"default":"'left'","prop":"textAlign"},{"type":"string","prop":"textVerticalAlign"},{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"rect","children":[{"default":"rect","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"x"},{"type":"numbr","default":0,"prop":"y"},{"default":0,"prop":"width"},{"type":"numbr","default":0,"prop":"height"},{"type":"Array","prop":"r"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"circle","children":[{"default":"circle","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"cx"},{"type":"numbr","default":0,"prop":"cy"},{"default":0,"prop":"r"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"ring","children":[{"default":"ring","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"cx"},{"type":"numbr","default":0,"prop":"cy"},{"default":0,"prop":"r"},{"default":0,"prop":"r0"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"sector","children":[{"default":"sector","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"cx"},{"type":"numbr","default":0,"prop":"cy"},{"default":0,"prop":"r"},{"default":0,"prop":"r0"},{"default":0,"prop":"startAngle"},{"type":"number","default":"Math.PI * 2","prop":"endAngle"},{"default":true,"prop":"clockwise"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"arc","children":[{"default":"arc","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"cx"},{"type":"numbr","default":0,"prop":"cy"},{"default":0,"prop":"r"},{"default":0,"prop":"r0"},{"default":0,"prop":"startAngle"},{"type":"number","default":"Math.PI * 2","prop":"endAngle"},{"default":true,"prop":"clockwise"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"type":"string","prop":"fill"},{"default":"\"#000\"","prop":"stroke"},{"default":1,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"polygon","children":[{"default":"polygon","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"shape","children":[{"type":"Array","prop":"points"},{"type":["number","string"],"default":"undefined","prop":"smooth"},{"default":false,"prop":"smoothConstraint"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"polyline","children":[{"default":"polyline","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"shape","children":[{"type":"Array","prop":"points"},{"type":["number","string"],"default":"undefined","prop":"smooth"},{"default":false,"prop":"smoothConstraint"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"type":"string","prop":"fill"},{"default":"\"#000\"","prop":"stroke"},{"default":5,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"line","children":[{"default":"line","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"x1"},{"default":0,"prop":"y1"},{"default":0,"prop":"x2"},{"default":0,"prop":"y2"},{"default":1,"prop":"percent"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"type":"string","prop":"fill"},{"default":"\"#000\"","prop":"stroke"},{"default":5,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"bezierCurve","children":[{"default":"bezierCurve","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"x1"},{"default":0,"prop":"y1"},{"default":0,"prop":"x2"},{"default":0,"prop":"y2"},{"default":0,"prop":"cpx1"},{"default":0,"prop":"cpy1"},{"type":"number","prop":"cpx2"},{"type":"number","prop":"cpy2"},{"default":1,"prop":"percent"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]}]}]},{"type":"Object","isObject":true,"prop":"calendar","children":[{"type":"string","prop":"id"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":80,"prop":"left"},{"type":["string","number"],"default":60,"prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"},{"type":["number","string"],"default":"auto","prop":"width"},{"type":["number","string"],"default":"auto","prop":"height"},{"type":["number","string","Array"],"prop":"range"},{"type":["number","Array"],"default":20,"prop":"cellSize"},{"default":"'horizontal'","prop":"orient"},{"type":"Object","isObject":true,"prop":"splitLine","children":[{"default":true,"prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#000","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"#fff","prop":"color"},{"type":"Color","default":"'#ccc'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"dayLabel","children":[{"default":true,"prop":"show"},{"default":0,"prop":"firstDay"},{"default":0,"prop":"margin"},{"default":"'start'","prop":"position"},{"type":["string","Array"],"default":"'en'","prop":"nameMap"},{"type":"Color","default":"#000","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"monthLabel","children":[{"default":true,"prop":"show"},{"type":"string","prop":"align"},{"default":5,"prop":"margin"},{"default":"'start'","prop":"position"},{"type":["string","Array"],"default":"'en'","prop":"nameMap"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"#000","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"yearLabel","children":[{"default":true,"prop":"show"},{"default":30,"prop":"margin"},{"type":"string","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":false,"prop":"silent"}]},{"type":"Object","isObject":true,"prop":"dataset","children":[{"type":"string","prop":"id"},{"type":["Array","Object"],"prop":"source"},{"type":"Array","prop":"dimensions"},{"type":"boolean","prop":"sourceHeader"}]},{"type":"*","isObject":true,"prop":"aria","children":[{"default":false,"prop":"show"},{"type":"string","prop":"description"},{"type":"Object","isObject":true,"prop":"general","children":[{"default":"'This is a chart about \"{title}\".'","prop":"withTitle"},{"default":"'This is a chart'","prop":"withoutTitle"}]},{"type":"Object","isObject":true,"prop":"series","children":[{"default":10,"prop":"maxCount"},{"type":"Object","isObject":true,"prop":"single","children":[{"default":"''","prop":"prefix"},{"default":"'The chart type is {seriesType}, which means {seriesName}. '","prop":"withName"},{"default":"'The chart type is {seriesType}.'","prop":"withoutName"}]},{"type":"Object","isObject":true,"prop":"multiple","children":[{"default":"'It consists of {seriesCount} chart series. '","prop":"prefix"},{"default":"'The chart type is {seriesType}, which means {seriesName}. '","prop":"withName"},{"default":"'The chart type is {seriesType}.'","prop":"withoutName"},{"type":"Object","isObject":true,"prop":"separator","children":[{"default":"';'","prop":"middle"},{"default":"'.'","prop":"end"}]}]}]},{"type":"Object","isObject":true,"prop":"data","children":[{"default":10,"prop":"maxCount"},{"default":"'Its data is --'","prop":"allData"},{"default":"''Where the first {displayCnt} entry is -''","prop":"partialData"},{"default":"'{name}'s data is {value}'","prop":"withName"},{"default":"'{value}'","prop":"withoutName"},{"type":"Object","isObject":true,"prop":"separator","children":[{"default":"','","prop":"middle"},{"default":"''","prop":"end"}]}]}]},{"type":"Array","isArray":true,"prop":"series","children":[{"type":"Object","isObject":true,"arrayItemType":"line","children":[{"default":"'line'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":"'cartesian2d'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"default":0,"prop":"polarIndex"},{"type":["string","Function"],"default":"'circle'","prop":"symbol"},{"type":["number","Array","Function"],"default":4,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":true,"prop":"showSymbol"},{"type":"boolean","default":"'auto'","prop":"showAllSymbol"},{"default":true,"prop":"hoverAnimation"},{"default":true,"prop":"legendHoverLink"},{"type":"string","prop":"stack"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"connectNulls"},{"default":true,"prop":"clip"},{"type":["string","boolean"],"default":false,"prop":"step"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'top'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":["Color","Function"],"prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":2,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":"'auto'","prop":"origin"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":["boolean","number"],"default":false,"prop":"smooth"},{"type":"string","prop":"smoothMonotone"},{"type":"string","prop":"sampling"},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"default":"'column'","prop":"seriesLayoutBy"},{"default":0,"prop":"datasetIndex"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"default":"'circle'","prop":"symbol"},{"type":["number","Array"],"default":4,"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"top","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"auto","prop":"color"},{"type":"Color","default":"'#000'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"auto","prop":"color"},{"type":"Color","default":"'#000'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"linear","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"bar","children":[{"default":"'bar'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":true,"prop":"legendHoverLink"},{"default":"'cartesian2d'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"default":false,"prop":"roundCap"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"auto","prop":"color"},{"type":"Color","default":"'#000'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":["number","Array"],"default":0,"prop":"barBorderRadius"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":false,"prop":"showBackground"},{"type":"Object","isObject":true,"prop":"backgroundStyle","children":[{"type":"Color","default":"'rgba(180, 180, 180, 0.2)'","prop":"color"},{"type":"Color","default":"'#000'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":["number","Array"],"default":0,"prop":"barBorderRadius"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"auto","prop":"color"},{"type":"Color","default":"'#000'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"string","prop":"stack"},{"default":"'pointer'","prop":"cursor"},{"type":["number","string"],"prop":"barWidth"},{"type":["number","string"],"prop":"barMaxWidth"},{"type":["number","string"],"prop":"barMinWidth"},{"default":0,"prop":"barMinHeight"},{"default":"30%","prop":"barGap"},{"default":"'20%'","prop":"barCategoryGap"},{"default":false,"prop":"large"},{"default":400,"prop":"largeThreshold"},{"default":5000,"prop":"progressive"},{"default":3000,"prop":"progressiveThreshold"},{"default":"mod","prop":"progressiveChunkMode"},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"default":"'column'","prop":"seriesLayoutBy"},{"default":0,"prop":"datasetIndex"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"inside","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"auto","prop":"color"},{"type":"Color","default":"'#000'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":["number","Array"],"default":0,"prop":"barBorderRadius"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"auto","prop":"color"},{"type":"Color","default":"'#000'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":true,"prop":"clip"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"pie","children":[{"default":"'pie'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":true,"prop":"legendHoverLink"},{"default":true,"prop":"hoverAnimation"},{"default":10,"prop":"hoverOffset"},{"type":["boolean","string"],"default":false,"prop":"selectedMode"},{"default":10,"prop":"selectedOffset"},{"default":true,"prop":"clockwise"},{"default":90,"prop":"startAngle"},{"default":0,"prop":"minAngle"},{"default":0,"prop":"minShowLabelAngle"},{"type":["boolean","string"],"default":false,"prop":"roseType"},{"default":true,"prop":"avoidLabelOverlap"},{"default":true,"prop":"stillShowZeroSum"},{"default":"'pointer'","prop":"cursor"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":0,"prop":"left"},{"type":["string","number"],"default":0,"prop":"top"},{"type":["string","number"],"default":0,"prop":"right"},{"type":["string","number"],"default":0,"prop":"bottom"},{"type":["string","number"],"default":"'auto'","prop":"width"},{"type":["string","number"],"default":"'auto'","prop":"height"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'outside'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":["boolean","number"],"prop":"rotate"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":"'none'","prop":"alignTo"},{"type":["string","number"],"default":"'25%'","prop":"margin"},{"default":10,"prop":"bleedMargin"},{"default":5,"prop":"distanceToLabelLine"}]},{"type":"Object","isObject":true,"prop":"labelLine","children":[{"type":"boolean","prop":"show"},{"type":"number","prop":"length"},{"type":"number","prop":"length2"},{"type":["boolean","number"],"default":false,"prop":"smooth"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":["Color","Function"],"prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Function"],"prop":"formatter"},{"type":["boolean","number"],"prop":"rotate"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"labelLine","children":[{"type":"boolean","prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","default":"['50%', '50%']","prop":"center"},{"type":["number","string","Array"],"default":"[0, '75%']","prop":"radius"},{"default":"'column'","prop":"seriesLayoutBy"},{"default":0,"prop":"datasetIndex"},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"default":false,"prop":"selected"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'outside'","prop":"position"},{"type":["boolean","number"],"prop":"rotate"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"labelLine","children":[{"type":"boolean","prop":"show"},{"type":"number","prop":"length"},{"type":"number","prop":"length2"},{"type":["boolean","number"],"default":false,"prop":"smooth"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["boolean","number"],"prop":"rotate"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"labelLine","children":[{"type":"boolean","prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":false,"prop":"silent"},{"default":"'expansion'","prop":"animationType"},{"default":"'transition'","prop":"animationTypeUpdate"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"scatter","children":[{"default":"'scatter'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":"'cartesian2d'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"default":0,"prop":"polarIndex"},{"default":0,"prop":"geoIndex"},{"default":0,"prop":"calendarIndex"},{"type":"boolean","prop":"hoverAnimation"},{"default":true,"prop":"legendHoverLink"},{"type":["string","Function"],"default":"'circle'","prop":"symbol"},{"type":["number","Array","Function"],"default":10,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"large"},{"default":2000,"prop":"largeThreshold"},{"default":"'pointer'","prop":"cursor"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":["Color","Function"],"prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0.8,"prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"default":400,"prop":"progressive"},{"default":3000,"prop":"progressiveThreshold"},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"default":"'column'","prop":"seriesLayoutBy"},{"default":0,"prop":"datasetIndex"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"Array","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"inside","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":true,"prop":"clip"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"effectScatter","children":[{"default":"'effectScatter'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":true,"prop":"legendHoverLink"},{"default":"'ripple'","prop":"effectType"},{"default":"'render'","prop":"showEffectOn"},{"type":"Object","isObject":true,"prop":"rippleEffect","children":[{"type":"string","prop":"color"},{"default":4,"prop":"period"},{"default":2.5,"prop":"scale"},{"default":"'fill'","prop":"brushType"}]},{"default":"'cartesian2d'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"default":0,"prop":"polarIndex"},{"default":0,"prop":"geoIndex"},{"default":0,"prop":"calendarIndex"},{"type":["string","Function"],"default":"'circle'","prop":"symbol"},{"type":["number","Array","Function"],"default":10,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":"'pointer'","prop":"cursor"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":["Color","Function"],"prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":["Color","Function"],"prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"default":"'column'","prop":"seriesLayoutBy"},{"default":0,"prop":"datasetIndex"},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"'circle'","prop":"symbol"},{"type":["number","Array"],"default":4,"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"inside","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"radar","children":[{"default":"'radar'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"type":"number","prop":"radarIndex"},{"type":["string","Function"],"default":"'circle'","prop":"symbol"},{"type":["number","Array","Function"],"default":4,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'top'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":["Color","Function"],"prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"default":"'circle'","prop":"symbol"},{"type":["number","Array"],"default":4,"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"top","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"auto","prop":"color"},{"type":"Color","default":"'#000'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"top","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"auto","prop":"color"},{"type":"Color","default":"'#000'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"tree","children":[{"default":"'tree'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"12%","prop":"left"},{"type":["string","number"],"default":"12%","prop":"top"},{"type":["string","number"],"default":"12%","prop":"right"},{"type":["string","number"],"default":"12%","prop":"bottom"},{"type":["string","number"],"prop":"width"},{"type":["string","number"],"prop":"height"},{"default":"'orthogonal'","prop":"layout"},{"default":"'LR'","prop":"orient"},{"type":["string","Function"],"default":"'emptyCircle'","prop":"symbol"},{"type":["number","Array","Function"],"default":7,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":"'curve'","prop":"edgeShape"},{"default":"'50%'","prop":"edgeForkPosition"},{"type":["boolean","string"],"default":false,"prop":"roam"},{"default":true,"prop":"expandAndCollapse"},{"default":2,"prop":"initialTreeDepth"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'#c23531'","prop":"borderColor"},{"default":1.5,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"'#ccc'\"","prop":"color"},{"default":1.5,"prop":"width"},{"default":0.5,"prop":"curveness"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"'#ccc'\"","prop":"color"},{"default":1.5,"prop":"width"},{"default":0.5,"prop":"curveness"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"leaves","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]}]},{"type":"Object","isObject":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"'linear'","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"treemap","children":[{"default":"'treemap'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"center","prop":"left"},{"type":["string","number"],"default":"middle","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"},{"type":["string","number"],"default":"80%","prop":"width"},{"type":["string","number"],"default":"80%","prop":"height"},{"type":"number","prop":"squareRatio"},{"type":"number","prop":"leafDepth"},{"default":"'▶'","prop":"drillDownIcon"},{"type":["boolean","string"],"default":true,"prop":"roam"},{"type":["boolean","string"],"default":"'zoomToNode'","prop":"nodeClick"},{"type":"number","default":"0.32*0.32","prop":"zoomToNodeRatio"},{"type":"Array","isArray":true,"prop":"levels","children":[{"default":0,"prop":"visualDimension"},{"type":"number","prop":"visualMin"},{"type":"number","prop":"visualMax"},{"type":"Array","prop":"color"},{"type":"Array","prop":"colorAlpha"},{"type":"number","prop":"colorSaturation"},{"default":"'index'","prop":"colorMappingBy"},{"default":10,"prop":"visibleMin"},{"type":"number","prop":"childrenVisibleMin"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"upperLabel","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"default":20,"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"number","prop":"colorAlpha"},{"type":"number","prop":"colorSaturation"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"gapWidth"},{"type":"Color","default":"'#fff',","prop":"borderColor"},{"type":"Color","prop":"borderColorSaturation"},{"type":"Color","prop":"strokeColor"},{"type":"number","prop":"strokeWidth"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"upperLabel","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"}]}]}]},{"default":0,"prop":"visualDimension"},{"type":"number","prop":"visualMin"},{"type":"number","prop":"visualMax"},{"type":"Array","prop":"colorAlpha"},{"type":"number","prop":"colorSaturation"},{"default":"'index'","prop":"colorMappingBy"},{"default":10,"prop":"visibleMin"},{"type":"number","prop":"childrenVisibleMin"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"upperLabel","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"default":20,"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"number","prop":"colorAlpha"},{"type":"number","prop":"colorSaturation"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"gapWidth"},{"type":"Color","default":"'#fff',","prop":"borderColor"},{"type":"Color","prop":"borderColorSaturation"},{"type":"Color","prop":"strokeColor"},{"type":"number","prop":"strokeWidth"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"upperLabel","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"}]}]},{"type":"Object","isObject":true,"prop":"breadcrumb","children":[{"default":true,"prop":"show"},{"type":["string","number"],"default":"'center'","prop":"left"},{"type":["string","number"],"default":"'auto'","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":0,"prop":"bottom"},{"default":22,"prop":"height"},{"default":25,"prop":"emptyItemWidth"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"rgba(0,0,0,0.7)","prop":"color"},{"type":"Color","default":"rgba(255,255,255,0.7)","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"rgba(150,150,150,1)","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"#fff","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"*","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"rgba(0,0,0,0.7)","prop":"color"},{"type":"Color","default":"rgba(255,255,255,0.7)","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"rgba(150,150,150,1)","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"#fff","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":["number","Array"],"prop":"value"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":0,"prop":"visualDimension"},{"type":"number","prop":"visualMin"},{"type":"number","prop":"visualMax"},{"type":"Array","prop":"color"},{"type":"Array","prop":"colorAlpha"},{"type":"number","prop":"colorSaturation"},{"default":"'index'","prop":"colorMappingBy"},{"default":10,"prop":"visibleMin"},{"type":"number","prop":"childrenVisibleMin"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"upperLabel","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"default":20,"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"number","prop":"colorAlpha"},{"type":"number","prop":"colorSaturation"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"gapWidth"},{"type":"Color","default":"'#fff',","prop":"borderColor"},{"type":"Color","prop":"borderColorSaturation"},{"type":"Color","prop":"strokeColor"},{"type":"number","prop":"strokeWidth"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"upperLabel","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"}]}]},{"type":"string","prop":"link"},{"default":"'blank'","prop":"target"},{"type":"Array","prop":"children"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"default":false,"prop":"silent"},{"type":["number","Function"],"default":1500,"prop":"animationDuration"},{"default":"quinticInOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"sunburst","children":[{"default":"'sunburst'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":"Array","default":"['50%', '50%']","prop":"center"},{"type":["number","string","Array"],"default":"[0, '75%']","prop":"radius"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"number","prop":"value"},{"type":"string","prop":"name"},{"type":"string","prop":"link"},{"default":"'blank'","prop":"target"},{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"highlight","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"downplay","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]}]},{"type":"Array","prop":"children"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]},{"default":"'descendant'","prop":"highlightPolicy"},{"type":["boolean","string"],"default":"'rootToNode'","prop":"nodeClick"},{"type":["string","Function"],"default":"'desc'","prop":"sort"},{"default":false,"prop":"renderLabelForZeroData"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"highlight","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"downplay","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"levels","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"highlight","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"downplay","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"'cubicOut'","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":500,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"arrayItemType":"boxplot","children":[{"default":"'boxplot'","prop":"type"},{"type":"string","prop":"id"},{"default":"'cartesian2d'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"type":"string","prop":"name"},{"default":true,"prop":"legendHoverLink"},{"default":true,"prop":"hoverAnimation"},{"type":"string","prop":"layout"},{"type":"Array","default":"[7, 50]","prop":"boxWidth"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"#fff","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"#fff","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":2,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"default":5,"prop":"shadowBlur"},{"type":"Color","default":"rgba(0,0,0,0.4)","prop":"shadowColor"},{"default":2,"prop":"shadowOffsetX"},{"default":2,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"Array","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"#fff","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"#fff","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":2,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"default":5,"prop":"shadowBlur"},{"type":"Color","default":"rgba(0,0,0,0.4)","prop":"shadowColor"},{"default":2,"prop":"shadowOffsetX"},{"default":2,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"type":["number","Function"],"default":800,"prop":"animationDuration"},{"default":"elasticOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"candlestick","children":[{"default":"'candlestick'","prop":"type"},{"type":"string","prop":"id"},{"default":"'cartesian2d'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"type":"string","prop":"name"},{"default":true,"prop":"legendHoverLink"},{"default":true,"prop":"hoverAnimation"},{"type":"string","prop":"layout"},{"type":"number","prop":"barWidth"},{"type":["number","string"],"prop":"barMinWidth"},{"type":["number","string"],"prop":"barMaxWidth"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"#c23531","prop":"color"},{"type":"Color","default":"#314656","prop":"color0"},{"type":"Color","default":"#c23531","prop":"borderColor"},{"type":"Color","default":"#314656","prop":"borderColor0"},{"default":1,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"#c23531","prop":"color"},{"type":"Color","default":"#314656","prop":"color0"},{"type":"Color","default":"#c23531","prop":"borderColor"},{"type":"Color","default":"#314656","prop":"borderColor0"},{"default":2,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"default":true,"prop":"large"},{"default":600,"prop":"largeThreshold"},{"default":3000,"prop":"progressive"},{"default":10000,"prop":"progressiveThreshold"},{"default":"mod","prop":"progressiveChunkMode"},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"Array","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"#c23531","prop":"color"},{"type":"Color","default":"#314656","prop":"color0"},{"type":"Color","default":"#c23531","prop":"borderColor"},{"type":"Color","default":"#314656","prop":"borderColor0"},{"default":1,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"#c23531","prop":"color"},{"type":"Color","default":"#314656","prop":"color0"},{"type":"Color","default":"#c23531","prop":"borderColor"},{"type":"Color","default":"#314656","prop":"borderColor0"},{"default":2,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":true,"prop":"clip"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"type":["number","Function"],"default":300,"prop":"animationDuration"},{"default":"linear","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"heatmap","children":[{"default":"'heatmap'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":"'cartesian2d'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"default":0,"prop":"geoIndex"},{"default":0,"prop":"calendarIndex"},{"default":20,"prop":"pointSize"},{"default":20,"prop":"blurSize"},{"default":0,"prop":"minOpacity"},{"default":1,"prop":"maxOpacity"},{"default":400,"prop":"progressive"},{"default":3000,"prop":"progressiveThreshold"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"inside","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"inside","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"Array","prop":"value"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"inside","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"inside","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"map","children":[{"default":"'map'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":"''","prop":"map"},{"type":["boolean","string"],"default":false,"prop":"roam"},{"type":"Array","prop":"center"},{"default":0.75,"prop":"aspectScale"},{"type":"Array","prop":"boundingCoords"},{"default":1,"prop":"zoom"},{"type":"Object","isObject":true,"prop":"scaleLimit","children":[{"type":"number","prop":"min"},{"type":"number","prop":"max"}]},{"type":"Object","prop":"nameMap"},{"default":"'name'","prop":"nameProperty"},{"type":["boolean","string"],"default":false,"prop":"selectedMode"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"'#eee'","prop":"areaColor"},{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"'#eee'","prop":"areaColor"},{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'auto'","prop":"left"},{"type":["string","number"],"default":"'auto'","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"},{"type":"Array","prop":"layoutCenter"},{"type":["number","string"],"prop":"layoutSize"},{"type":"number","prop":"geoIndex"},{"default":"'sum'","prop":"mapValueCalculation"},{"type":"boolean","prop":"showLegendSymbol"},{"default":"'column'","prop":"seriesLayoutBy"},{"default":0,"prop":"datasetIndex"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"default":false,"prop":"selected"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","isObject":true,"prop":"areaColor","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'bottom'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"areaColor"},{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":false,"prop":"silent"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"parallel","children":[{"default":"'parallel'","prop":"type"},{"type":"string","prop":"id"},{"default":"'parallel'","prop":"coordinateSystem"},{"default":0,"prop":"parallelIndex"},{"type":"string","prop":"name"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":2,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0.45,"prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":2,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0.45,"prop":"opacity"}]}]},{"default":0.05,"prop":"inactiveOpacity"},{"default":1,"prop":"activeOpacity"},{"default":true,"prop":"realtime"},{"type":["boolean","number"],"default":false,"prop":"smooth"},{"default":500,"prop":"progressive"},{"default":3000,"prop":"progressiveThreshold"},{"default":"sequential","prop":"progressiveChunkMode"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"Array","prop":"value"},{"type":"Object","prop":"lineStyle"},{"type":"Color","default":"\"#000\"","prop":"color"},{"default":2,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0.45,"prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":2,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0.45,"prop":"opacity"}]}]}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"linear","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"lines","children":[{"default":"'lines'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":"'geo'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"default":0,"prop":"geoIndex"},{"default":false,"prop":"polyline"},{"type":"Object","isObject":true,"prop":"effect","children":[{"default":false,"prop":"show"},{"default":4,"prop":"period"},{"type":["number","Function"],"prop":"delay"},{"default":0,"prop":"constantSpeed"},{"default":"'circle'","prop":"symbol"},{"type":["Array","number"],"default":3,"prop":"symbolSize"},{"type":"Color","prop":"color"},{"default":0.2,"prop":"trailLength"},{"default":true,"prop":"loop"}]},{"default":true,"prop":"large"},{"default":2000,"prop":"largeThreshold"},{"type":["string","Array"],"default":"'none'","prop":"symbol"},{"type":["number","Array"],"default":10,"prop":"symbolSize"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'self-adaptive'","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0.5,"prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"default":400,"prop":"progressive"},{"default":3000,"prop":"progressiveThreshold"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"Array","prop":"coords"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":true,"prop":"clip"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"arrayItemType":"graph","children":[{"default":"'graph'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":true,"prop":"legendHoverLink"},{"type":"string","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"default":0,"prop":"polarIndex"},{"default":0,"prop":"geoIndex"},{"default":0,"prop":"calendarIndex"},{"type":"boolean","prop":"hoverAnimation"},{"type":"Array","prop":"center"},{"default":1,"prop":"zoom"},{"default":"'none'","prop":"layout"},{"type":"Object","isObject":true,"prop":"circular","children":[{"default":false,"prop":"rotateLabel"}]},{"type":"Object","isObject":true,"prop":"force","children":[{"type":"string","prop":"initLayout"},{"type":["Array","number"],"default":50,"prop":"repulsion"},{"default":0.1,"prop":"gravity"},{"type":["Array","number"],"default":30,"prop":"edgeLength"},{"default":true,"prop":"layoutAnimation"},{"default":0.6,"prop":"friction"}]},{"type":["boolean","string"],"default":false,"prop":"roam"},{"default":0.6,"prop":"nodeScaleRatio"},{"default":false,"prop":"draggable"},{"type":["string","Function"],"default":"'circle'","prop":"symbol"},{"type":["number","Array","Function"],"default":10,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"focusNodeAdjacency"},{"type":["Array","string"],"default":"['none', 'none']","prop":"edgeSymbol"},{"type":["Array","number"],"default":10,"prop":"edgeSymbolSize"},{"default":"'pointer'","prop":"cursor"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":["Color","Function"],"prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#aaa'","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0.5,"prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"edgeLabel","children":[{"default":false,"prop":"show"},{"default":"'middle'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"edgeLabel","children":[{"default":false,"prop":"show"},{"default":"'middle'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Array","isArray":true,"prop":"categories","children":[{"type":"string","prop":"name"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"inside","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"boolean","prop":"fixed"},{"type":["number","Array"],"prop":"value"},{"type":"number","prop":"category"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Array","prop":"nodes"},{"type":"Array","isArray":true,"prop":"links","children":[{"type":["string","number"],"prop":"source"},{"type":["string","number"],"prop":"target"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'middle'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'middle'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":["Array","string"],"prop":"symbol"},{"type":["Array","string"],"prop":"symbolSize"},{"default":false,"prop":"ignoreForceLayout"}]},{"type":"Array","prop":"edges"},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'center'","prop":"left"},{"type":["string","number"],"default":"'middle'","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"},{"type":["string","number"],"default":"auto","prop":"width"},{"type":["string","number"],"default":"auto","prop":"height"},{"default":false,"prop":"silent"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"sankey","children":[{"default":"'sankey'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"5%","prop":"left"},{"type":["string","number"],"default":"5%","prop":"top"},{"type":["string","number"],"default":"20%","prop":"right"},{"type":["string","number"],"default":"5%","prop":"bottom"},{"type":["string","number"],"prop":"width"},{"type":["string","number"],"prop":"height"},{"default":20,"prop":"nodeWidth"},{"default":8,"prop":"nodeGap"},{"default":"'justify'","prop":"nodeAlign"},{"default":32,"prop":"layoutIterations"},{"default":"'horizontal'","prop":"orient"},{"default":true,"prop":"draggable"},{"type":["boolean","string"],"default":false,"prop":"focusNodeAdjacency"},{"type":"Array","isArray":true,"prop":"levels","children":[{"type":"number","prop":"depth"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"'#314656'\"","prop":"color"},{"default":0.2,"prop":"opacity"},{"default":0.5,"prop":"curveness"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'right'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'#aaa'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"'#314656'\"","prop":"color"},{"default":0.2,"prop":"opacity"},{"default":0.5,"prop":"curveness"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"'#314656'\"","prop":"color"},{"default":0.2,"prop":"opacity"},{"default":0.5,"prop":"curveness"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"type":"number","prop":"depth"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Array","prop":"nodes"},{"type":"Array","isArray":true,"prop":"links","children":[{"type":"string","prop":"source"},{"type":"string","prop":"target"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"'#314656'\"","prop":"color"},{"default":0.2,"prop":"opacity"},{"default":0.5,"prop":"curveness"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"'#314656'\"","prop":"color"},{"default":0.2,"prop":"opacity"},{"default":0.5,"prop":"curveness"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]}]}]},{"type":"Array","prop":"edges"},{"default":false,"prop":"silent"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"'linear'","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"funnel","children":[{"default":"'funnel'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":0,"prop":"min"},{"default":100,"prop":"max"},{"type":["number","string"],"default":"'0%'","prop":"minSize"},{"type":["number","string"],"default":"'100%'","prop":"maxSize"},{"type":["string","Function"],"default":"'descending'","prop":"sort"},{"default":0,"prop":"gap"},{"default":true,"prop":"legendHoverLink"},{"default":"'center'","prop":"funnelAlign"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'outside'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"labelLine","children":[{"type":"boolean","prop":"show"},{"type":"number","prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":["Color","Function"],"prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"labelLine","children":[{"type":"boolean","prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":80,"prop":"left"},{"type":["string","number"],"default":60,"prop":"top"},{"type":["string","number"],"default":80,"prop":"right"},{"type":["string","number"],"default":60,"prop":"bottom"},{"type":["string","number"],"default":"'auto'","prop":"width"},{"type":["string","number"],"default":"'auto'","prop":"height"},{"default":"'column'","prop":"seriesLayoutBy"},{"default":0,"prop":"datasetIndex"},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'outside'","prop":"position"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"labelLine","children":[{"type":"boolean","prop":"show"},{"type":"number","prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"labelLine","children":[{"type":"boolean","prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"gauge","children":[{"default":"'gauge'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"type":["number","string"],"default":"'75%'","prop":"radius"},{"default":true,"prop":"legendHoverLink"},{"default":225,"prop":"startAngle"},{"default":-45,"prop":"endAngle"},{"default":true,"prop":"clockwise"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"}]},{"default":0,"prop":"min"},{"default":100,"prop":"max"},{"default":10,"prop":"splitNumber"},{"type":"Object","isObject":true,"prop":"axisLine","children":[{"default":true,"prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Array","prop":"color"},{"default":30,"prop":"width"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"splitLine","children":[{"default":true,"prop":"show"},{"type":["number","string"],"default":30,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#eee","prop":"color"},{"default":2,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisTick","children":[{"default":true,"prop":"show"},{"default":5,"prop":"splitNumber"},{"type":["number","string"],"default":8,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#eee","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisLabel","children":[{"default":true,"prop":"show"},{"default":5,"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"pointer","children":[{"default":true,"prop":"show"},{"type":["string","number"],"default":"'80%'","prop":"length"},{"default":8,"prop":"width"}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"'auto'","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"*","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"title","children":[{"default":true,"prop":"show"},{"type":"Array","default":"[0, '-40%']","prop":"offsetCenter"},{"type":"Color","default":"'#333'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":15,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"detail","children":[{"default":true,"prop":"show"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"default":0,"prop":"borderWidth"},{"type":["Function","string"],"prop":"formatter"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"type":"Array","default":"[0, '40%']","prop":"offsetCenter"},{"type":"Color","default":"'auto'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":15,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"Color","default":"'auto'","prop":"color"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"pictorialBar","children":[{"default":"'pictorialBar'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":true,"prop":"legendHoverLink"},{"default":"'cartesian2d'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"default":"'pointer'","prop":"cursor"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":["number","string"],"prop":"barWidth"},{"type":["number","string"],"prop":"barMaxWidth"},{"type":["number","string"],"prop":"barMinWidth"},{"default":0,"prop":"barMinHeight"},{"default":"-100%","prop":"barGap"},{"default":"'20%'","prop":"barCategoryGap"},{"default":"'circle'","prop":"symbol"},{"type":["number","Array"],"default":"['100%', '100%']","prop":"symbolSize"},{"default":"'start'","prop":"symbolPosition"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"number","prop":"symbolRotate"},{"type":["boolean","number","string"],"prop":"symbolRepeat"},{"default":"'start'","prop":"symbolRepeatDirection"},{"type":["number","string"],"prop":"symbolMargin"},{"default":false,"prop":"symbolClip"},{"type":"number","prop":"symbolBoundingData"},{"default":400,"prop":"symbolPatternSize"},{"default":false,"isObject":true,"prop":"hoverAnimation","children":[{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"default":"'circle'","prop":"symbol"},{"type":["number","Array"],"default":"['100%', '100%']","prop":"symbolSize"},{"default":"'start'","prop":"symbolPosition"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"number","prop":"symbolRotate"},{"type":["boolean","number","string"],"prop":"symbolRepeat"},{"default":"'start'","prop":"symbolRepeatDirection"},{"type":["number","string"],"prop":"symbolMargin"},{"default":false,"prop":"symbolClip"},{"type":"number","prop":"symbolBoundingData"},{"default":400,"prop":"symbolPatternSize"},{"type":"number","prop":"z"},{"default":false,"prop":"hoverAnimation"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"inside","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","isObject":true,"prop":"animationEasingUpdate","children":[{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"themeRiver","children":[{"default":"'themeRiver'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"5%","prop":"left"},{"type":["string","number"],"default":"5%","prop":"top"},{"type":["string","number"],"default":"5%","prop":"right"},{"type":["string","number"],"default":"5%","prop":"bottom"},{"type":["string","number"],"prop":"width"},{"type":["string","number"],"prop":"height"},{"default":"\"single\"","prop":"coordinateSystem"},{"type":"Array","default":"[\"10%\", \"10%\"]","prop":"boundaryGap"},{"default":0,"prop":"singleAxisIndex"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'left'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"'#000'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":11,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'left'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"'#000'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":11,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"default":20,"prop":"shadowBlur"},{"type":"Color","default":"'rgba(0,0,0,0.8)'","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"date"},{"type":"number","prop":"value"},{"type":"string","prop":"name"}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"custom","children":[{"default":"'custom'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":true,"prop":"legendHoverLink"},{"default":"'cartesian2d'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"default":0,"prop":"polarIndex"},{"default":0,"prop":"geoIndex"},{"default":0,"prop":"calendarIndex"},{"type":"Function","isObject":true,"prop":"renderItem","children":[{"type":"*","isObject":true,"prop":"arguments","children":[{"type":"Object","prop":"params"},{"type":"Object","isObject":true,"prop":"api","children":[{"type":"Function","prop":"value"},{"type":"Function","prop":"coord"},{"type":"Function","prop":"size"},{"type":"Function","prop":"style"},{"type":"Function","prop":"styleEmphasis"},{"type":"Function","prop":"visual"},{"type":"Function","prop":"barLayout"},{"type":"Function","prop":"currentSeriesIndices"},{"type":"Function","prop":"font"},{"type":"Function","prop":"getWidth"},{"type":"Function","prop":"getHeight"},{"type":"Function","prop":"getZr"},{"type":"Function","prop":"getDevicePixelRatio"}]}]},{"type":"Object","prop":"return"},{"type":"Object","isObject":true,"prop":"return_group","children":[{"default":"group","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":0,"prop":"width"},{"default":0,"prop":"height"},{"default":false,"prop":"diffChildrenByName"},{"type":"Array","prop":"children"},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_path","children":[{"default":"path","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"type":"string","prop":"pathData"},{"type":"string","prop":"d"},{"default":"'center'","prop":"layout"},{"default":0,"prop":"x"},{"type":"numbr","default":0,"prop":"y"},{"default":0,"prop":"width"},{"type":"numbr","default":0,"prop":"height"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_image","children":[{"default":"image","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"style","children":[{"type":"string","prop":"image"},{"default":0,"prop":"x"},{"type":"numbr","default":0,"prop":"y"},{"default":0,"prop":"width"},{"type":"numbr","default":0,"prop":"height"},{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_text","children":[{"default":"text","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"''","prop":"text"},{"default":0,"prop":"x"},{"type":"numbr","default":0,"prop":"y"},{"type":"string","prop":"font"},{"default":"'left'","prop":"textAlign"},{"type":"string","prop":"textVerticalAlign"},{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_rect","children":[{"default":"rect","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"x"},{"type":"numbr","default":0,"prop":"y"},{"default":0,"prop":"width"},{"type":"numbr","default":0,"prop":"height"},{"type":"Array","prop":"r"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_circle","children":[{"default":"circle","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"cx"},{"type":"numbr","default":0,"prop":"cy"},{"default":0,"prop":"r"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_ring","children":[{"default":"ring","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"cx"},{"type":"numbr","default":0,"prop":"cy"},{"default":0,"prop":"r"},{"default":0,"prop":"r0"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_sector","children":[{"default":"sector","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"cx"},{"type":"numbr","default":0,"prop":"cy"},{"default":0,"prop":"r"},{"default":0,"prop":"r0"},{"default":0,"prop":"startAngle"},{"type":"number","default":"Math.PI * 2","prop":"endAngle"},{"default":true,"prop":"clockwise"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_arc","children":[{"default":"arc","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"cx"},{"type":"numbr","default":0,"prop":"cy"},{"default":0,"prop":"r"},{"default":0,"prop":"r0"},{"default":0,"prop":"startAngle"},{"type":"number","default":"Math.PI * 2","prop":"endAngle"},{"default":true,"prop":"clockwise"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"type":"string","prop":"fill"},{"default":"\"#000\"","prop":"stroke"},{"default":1,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_polygon","children":[{"default":"polygon","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"type":"Array","prop":"points"},{"type":["number","string"],"default":"undefined","prop":"smooth"},{"default":false,"prop":"smoothConstraint"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_polyline","children":[{"default":"polyline","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"type":"Array","prop":"points"},{"type":["number","string"],"default":"undefined","prop":"smooth"},{"default":false,"prop":"smoothConstraint"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"type":"string","prop":"fill"},{"default":"\"#000\"","prop":"stroke"},{"default":5,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_line","children":[{"default":"line","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"x1"},{"default":0,"prop":"y1"},{"default":0,"prop":"x2"},{"default":0,"prop":"y2"},{"default":1,"prop":"percent"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"type":"string","prop":"fill"},{"default":"\"#000\"","prop":"stroke"},{"default":5,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_bezierCurve","children":[{"default":"bezierCurve","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"x1"},{"default":0,"prop":"y1"},{"default":0,"prop":"x2"},{"default":0,"prop":"y2"},{"default":0,"prop":"cpx1"},{"default":0,"prop":"cpy1"},{"type":"number","prop":"cpx2"},{"type":"number","prop":"cpy2"},{"default":1,"prop":"percent"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"default":"'column'","prop":"seriesLayoutBy"},{"default":0,"prop":"datasetIndex"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"default":false,"prop":"clip"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]}]},{"type":"Array","prop":"color"},{"type":"Color","prop":"backgroundColor"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"default":"'source-over'","prop":"blendMode"},{"default":false,"prop":"useUTC"}]}
\ No newline at end of file
+window.__EC_DOC_option_outline = {"children":[{"type":"Object","isObject":true,"prop":"title","children":[{"type":"string","prop":"id"},{"default":true,"prop":"show"},{"default":"''","prop":"text"},{"default":"''","prop":"link"},{"default":"'blank'","prop":"target"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":18,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":"''","prop":"subtext"},{"default":"''","prop":"sublink"},{"default":"'blank'","prop":"subtarget"},{"type":"Object","isObject":true,"prop":"subtextStyle","children":[{"type":"Color","default":"'#aaa'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":"'auto'","prop":"textAlign"},{"default":"'auto'","prop":"textVerticalAlign"},{"default":false,"prop":"triggerEvent"},{"type":["number","Array"],"default":5,"prop":"padding"},{"default":10,"prop":"itemGap"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'auto'","prop":"left"},{"type":["string","number"],"default":"'auto'","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"},{"type":"Color","default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'#ccc'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"type":["number","Array"],"default":0,"prop":"borderRadius"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"legend","children":[{"type":"string","prop":"type"},{"type":"string","prop":"id"},{"default":true,"prop":"show"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'auto'","prop":"left"},{"type":["string","number"],"default":"'auto'","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"},{"type":["string","number"],"default":"'auto'","prop":"width"},{"type":["string","number"],"default":"'auto'","prop":"height"},{"default":"'horizontal'","prop":"orient"},{"default":"'auto'","prop":"align"},{"type":["number","Array"],"default":5,"prop":"padding"},{"default":10,"prop":"itemGap"},{"default":25,"prop":"itemWidth"},{"default":14,"prop":"itemHeight"},{"default":true,"prop":"symbolKeepAspect"},{"type":["string","Function"],"prop":"formatter"},{"type":["string","boolean"],"default":true,"prop":"selectedMode"},{"type":"Color","default":"'#ccc'","prop":"inactiveColor"},{"type":"Object","prop":"selected"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","prop":"tooltip"},{"type":"string","prop":"icon"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"string","prop":"icon"},{"type":"Object","prop":"textStyle"}]},{"type":"Color","default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'#ccc'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"type":["number","Array"],"default":0,"prop":"borderRadius"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0,"prop":"scrollDataIndex"},{"default":5,"prop":"pageButtonItemGap"},{"type":"number","prop":"pageButtonGap"},{"default":"'end'","prop":"pageButtonPosition"},{"type":["string","Function"],"default":"'{current}/{total}'","prop":"pageFormatter"},{"type":"Object","isObject":true,"prop":"pageIcons","children":[{"type":"Array","prop":"horizontal"},{"type":"Array","prop":"vertical"}]},{"default":"'#2f4554'","prop":"pageIconColor"},{"default":"'#aaa'","prop":"pageIconInactiveColor"},{"type":["number","Array"],"default":15,"prop":"pageIconSize"},{"type":"Object","isObject":true,"prop":"pageTextStyle","children":[{"type":"Color","default":"#333","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"boolean","prop":"animation"},{"default":800,"prop":"animationDurationUpdate"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"selectorLabel","children":[{"default":true,"prop":"show"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":["boolean","Array"],"default":false,"prop":"selector"},{"type":"Object","isObject":true,"prop":"selectorLabel","children":[{"default":true,"prop":"show"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":"'auto'","prop":"selectorPosition"},{"default":7,"prop":"selectorItemGap"},{"default":10,"prop":"selectorButtonGap"}]},{"type":"Object","isObject":true,"prop":"grid","children":[{"type":"string","prop":"id"},{"default":false,"prop":"show"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'10%'","prop":"left"},{"type":["string","number"],"default":60,"prop":"top"},{"type":["string","number"],"default":"'10%'","prop":"right"},{"type":["string","number"],"default":60,"prop":"bottom"},{"type":["string","number"],"default":"'auto'","prop":"width"},{"type":["string","number"],"default":"'auto'","prop":"height"},{"default":false,"prop":"containLabel"},{"type":"Color","default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'#ccc'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"Object","isObject":true,"prop":"tooltip","children":[{"default":true,"prop":"show"},{"default":"'item'","prop":"trigger"},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"default":"'line'","prop":"type"},{"default":"'auto'","prop":"axis"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"crossStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"dashed","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":200,"prop":"animationDurationUpdate"},{"default":"exponentialOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"xAxis","children":[{"type":"string","prop":"id"},{"default":true,"prop":"show"},{"default":0,"prop":"gridIndex"},{"type":"string","prop":"position"},{"default":0,"prop":"offset"},{"default":"'category'","prop":"type"},{"type":"string","prop":"name"},{"default":"'end'","prop":"nameLocation"},{"type":"Object","isObject":true,"prop":"nameTextStyle","children":[{"type":"Color","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":15,"prop":"nameGap"},{"type":"number","prop":"nameRotate"},{"default":false,"prop":"inverse"},{"type":["boolean","Array"],"prop":"boundaryGap"},{"type":["number","string","Function"],"prop":"min"},{"type":["number","string","Function"],"prop":"max"},{"default":false,"prop":"scale"},{"default":5,"prop":"splitNumber"},{"default":0,"prop":"minInterval"},{"type":"number","prop":"maxInterval"},{"type":"number","prop":"interval"},{"default":10,"prop":"logBase"},{"default":false,"prop":"silent"},{"default":false,"prop":"triggerEvent"},{"type":"Object","isObject":true,"prop":"axisLine","children":[{"default":true,"prop":"show"},{"default":true,"prop":"onZero"},{"type":"number","prop":"onZeroAxisIndex"},{"type":["string","Array"],"default":"'none'","prop":"symbol"},{"type":"Array","default":"[10, 15]","prop":"symbolSize"},{"type":["Array","number"],"default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisTick","children":[{"default":true,"prop":"show"},{"default":false,"prop":"alignWithLabel"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":5,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorTick","children":[{"default":false,"prop":"show"},{"default":5,"prop":"splitNumber"},{"default":3,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisLabel","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":0,"prop":"rotate"},{"default":8,"prop":"margin"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","prop":"showMinLabel"},{"type":"boolean","prop":"showMaxLabel"},{"type":["Color","Function"],"prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"splitLine","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":["Array","string"],"default":"['#ccc']","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorSplitLine","children":[{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#eee'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"splitArea","children":[{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Array","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"value"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"default":false,"prop":"show"},{"default":"'line'","prop":"type"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"triggerTooltip"},{"type":"number","prop":"value"},{"type":"boolean","prop":"status"},{"type":"Object","isObject":true,"prop":"handle","children":[{"default":false,"prop":"show"},{"type":"*","prop":"icon"},{"type":["number","Array"],"default":45,"prop":"size"},{"default":50,"prop":"margin"},{"default":"'#333'","prop":"color"},{"default":40,"prop":"throttle"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":2,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]}]},{"default":0,"prop":"zlevel"},{"default":0,"prop":"z"}]},{"type":"Object","isObject":true,"prop":"yAxis","children":[{"type":"string","prop":"id"},{"default":true,"prop":"show"},{"default":0,"prop":"gridIndex"},{"type":"string","prop":"position"},{"default":0,"prop":"offset"},{"default":"'value'","prop":"type"},{"type":"string","prop":"name"},{"default":"'end'","prop":"nameLocation"},{"type":"Object","isObject":true,"prop":"nameTextStyle","children":[{"type":"Color","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":15,"prop":"nameGap"},{"type":"number","prop":"nameRotate"},{"default":false,"prop":"inverse"},{"type":["boolean","Array"],"prop":"boundaryGap"},{"type":["number","string","Function"],"prop":"min"},{"type":["number","string","Function"],"prop":"max"},{"default":false,"prop":"scale"},{"default":5,"prop":"splitNumber"},{"default":0,"prop":"minInterval"},{"type":"number","prop":"maxInterval"},{"type":"number","prop":"interval"},{"default":10,"prop":"logBase"},{"default":false,"prop":"silent"},{"default":false,"prop":"triggerEvent"},{"type":"Object","isObject":true,"prop":"axisLine","children":[{"default":true,"prop":"show"},{"default":true,"prop":"onZero"},{"type":"number","prop":"onZeroAxisIndex"},{"type":["string","Array"],"default":"'none'","prop":"symbol"},{"type":"Array","default":"[10, 15]","prop":"symbolSize"},{"type":["Array","number"],"default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisTick","children":[{"default":true,"prop":"show"},{"default":false,"prop":"alignWithLabel"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":5,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorTick","children":[{"default":false,"prop":"show"},{"default":5,"prop":"splitNumber"},{"default":3,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisLabel","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":0,"prop":"rotate"},{"default":8,"prop":"margin"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","prop":"showMinLabel"},{"type":"boolean","prop":"showMaxLabel"},{"type":["Color","Function"],"prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"splitLine","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":["Array","string"],"default":"['#ccc']","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorSplitLine","children":[{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#eee'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"splitArea","children":[{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Array","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"value"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"default":false,"prop":"show"},{"default":"'line'","prop":"type"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"triggerTooltip"},{"type":"number","prop":"value"},{"type":"boolean","prop":"status"},{"type":"Object","isObject":true,"prop":"handle","children":[{"default":false,"prop":"show"},{"type":"*","prop":"icon"},{"type":["number","Array"],"default":45,"prop":"size"},{"default":50,"prop":"margin"},{"default":"'#333'","prop":"color"},{"default":40,"prop":"throttle"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":2,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]}]},{"default":0,"prop":"zlevel"},{"default":0,"prop":"z"}]},{"type":"Object","isObject":true,"prop":"polar","children":[{"type":"string","prop":"id"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":"Array","default":"['50%', '50%']","prop":"center"},{"type":["number","string","Array"],"prop":"radius"},{"type":"Object","isObject":true,"prop":"tooltip","children":[{"default":true,"prop":"show"},{"default":"'item'","prop":"trigger"},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"default":"'line'","prop":"type"},{"default":"'auto'","prop":"axis"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"crossStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"dashed","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":200,"prop":"animationDurationUpdate"},{"default":"exponentialOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"radiusAxis","children":[{"type":"string","prop":"id"},{"default":0,"prop":"polarIndex"},{"default":"'value'","prop":"type"},{"type":"string","prop":"name"},{"default":"'end'","prop":"nameLocation"},{"type":"Object","isObject":true,"prop":"nameTextStyle","children":[{"type":"Color","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":15,"prop":"nameGap"},{"type":"number","prop":"nameRotate"},{"default":false,"prop":"inverse"},{"type":["boolean","Array"],"prop":"boundaryGap"},{"type":["number","string","Function"],"prop":"min"},{"type":["number","string","Function"],"prop":"max"},{"default":false,"prop":"scale"},{"default":5,"prop":"splitNumber"},{"default":0,"prop":"minInterval"},{"type":"number","prop":"maxInterval"},{"type":"number","prop":"interval"},{"default":10,"prop":"logBase"},{"default":false,"prop":"silent"},{"default":false,"prop":"triggerEvent"},{"type":"Object","isObject":true,"prop":"axisLine","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'none'","prop":"symbol"},{"type":"Array","default":"[10, 15]","prop":"symbolSize"},{"type":["Array","number"],"default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisTick","children":[{"default":true,"prop":"show"},{"default":false,"prop":"alignWithLabel"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":5,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorTick","children":[{"default":false,"prop":"show"},{"default":5,"prop":"splitNumber"},{"default":3,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisLabel","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":0,"prop":"rotate"},{"default":8,"prop":"margin"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","prop":"showMinLabel"},{"type":"boolean","prop":"showMaxLabel"},{"type":["Color","Function"],"prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"splitLine","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":["Array","string"],"default":"['#ccc']","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorSplitLine","children":[{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#eee'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"splitArea","children":[{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Array","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"value"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"default":false,"prop":"show"},{"default":"'line'","prop":"type"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"triggerTooltip"},{"type":"number","prop":"value"},{"type":"boolean","prop":"status"},{"type":"Object","isObject":true,"prop":"handle","children":[{"default":false,"prop":"show"},{"type":"*","prop":"icon"},{"type":["number","Array"],"default":45,"prop":"size"},{"default":50,"prop":"margin"},{"default":"'#333'","prop":"color"},{"default":40,"prop":"throttle"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":2,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]}]},{"default":0,"prop":"zlevel"},{"default":0,"prop":"z"}]},{"type":"Object","isObject":true,"prop":"angleAxis","children":[{"type":"string","prop":"id"},{"default":0,"prop":"polarIndex"},{"default":90,"prop":"startAngle"},{"default":true,"prop":"clockwise"},{"default":"'category'","prop":"type"},{"type":["boolean","Array"],"prop":"boundaryGap"},{"type":["number","string","Function"],"prop":"min"},{"type":["number","string","Function"],"prop":"max"},{"default":false,"prop":"scale"},{"default":5,"prop":"splitNumber"},{"default":0,"prop":"minInterval"},{"type":"number","prop":"maxInterval"},{"type":"number","prop":"interval"},{"default":10,"prop":"logBase"},{"default":false,"prop":"silent"},{"default":false,"prop":"triggerEvent"},{"type":"Object","isObject":true,"prop":"axisLine","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'none'","prop":"symbol"},{"type":"Array","default":"[10, 15]","prop":"symbolSize"},{"type":["Array","number"],"default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisTick","children":[{"default":true,"prop":"show"},{"default":false,"prop":"alignWithLabel"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":5,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorTick","children":[{"default":false,"prop":"show"},{"default":5,"prop":"splitNumber"},{"default":3,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisLabel","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":8,"prop":"margin"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","prop":"showMinLabel"},{"type":"boolean","prop":"showMaxLabel"},{"type":["Color","Function"],"prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"splitLine","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":["Array","string"],"default":"['#ccc']","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorSplitLine","children":[{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#eee'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"splitArea","children":[{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Array","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"value"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"default":false,"prop":"show"},{"default":"'line'","prop":"type"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"triggerTooltip"},{"type":"number","prop":"value"},{"type":"boolean","prop":"status"},{"type":"Object","isObject":true,"prop":"handle","children":[{"default":false,"prop":"show"},{"type":"*","prop":"icon"},{"type":["number","Array"],"default":45,"prop":"size"},{"default":50,"prop":"margin"},{"default":"'#333'","prop":"color"},{"default":40,"prop":"throttle"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":2,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]}]},{"default":0,"prop":"zlevel"},{"default":0,"prop":"z"}]},{"type":"Object","isObject":true,"prop":"radar","children":[{"type":"string","prop":"id"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":"Array","default":"['50%', '50%']","prop":"center"},{"type":["number","string","Array"],"default":"75%","prop":"radius"},{"default":90,"prop":"startAngle"},{"type":"Object","isObject":true,"prop":"name","children":[{"default":true,"prop":"show"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":15,"prop":"nameGap"},{"default":5,"prop":"splitNumber"},{"default":"'polygon'","prop":"shape"},{"default":false,"prop":"scale"},{"default":false,"prop":"silent"},{"default":false,"prop":"triggerEvent"},{"type":"Object","isObject":true,"prop":"axisLine","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'none'","prop":"symbol"},{"type":"Array","default":"[10, 15]","prop":"symbolSize"},{"type":["Array","number"],"default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisTick","children":[{"default":true,"prop":"show"},{"default":5,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisLabel","children":[{"default":true,"prop":"show"},{"default":0,"prop":"rotate"},{"default":8,"prop":"margin"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","prop":"showMinLabel"},{"type":"boolean","prop":"showMaxLabel"},{"type":["Color","Function"],"prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"splitLine","children":[{"default":true,"prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":["Array","string"],"default":"['#ccc']","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"splitArea","children":[{"default":true,"prop":"show"},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Array","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"indicator","children":[{"type":"string","prop":"name"},{"type":"number","prop":"max"},{"type":"number","prop":"min"}]},{"type":"string","prop":"color"}]},{"type":"Array","isArray":true,"prop":"dataZoom","children":[{"type":"Object","isObject":true,"arrayItemType":"inside","children":[{"default":"'inside'","prop":"type"},{"type":"string","prop":"id"},{"default":false,"prop":"disabled"},{"type":["number","Array"],"prop":"xAxisIndex"},{"type":["number","Array"],"prop":"yAxisIndex"},{"type":["number","Array"],"prop":"radiusAxisIndex"},{"type":["number","Array"],"prop":"angleAxisIndex"},{"default":"'filter'","prop":"filterMode"},{"default":0,"prop":"start"},{"default":100,"prop":"end"},{"type":["number","string","Date"],"prop":"startValue"},{"type":["number","string","Date"],"prop":"endValue"},{"type":"number","prop":"minSpan"},{"type":"number","prop":"maxSpan"},{"type":["number","string","Date"],"prop":"minValueSpan"},{"type":["number","string","Date"],"prop":"maxValueSpan"},{"type":"string","prop":"orient"},{"default":false,"prop":"zoomLock"},{"default":100,"prop":"throttle"},{"type":"Array","prop":"rangeMode"},{"type":["boolean","string"],"default":true,"prop":"zoomOnMouseWheel"},{"type":["boolean","string"],"default":true,"prop":"moveOnMouseMove"},{"type":["boolean","string"],"default":false,"prop":"moveOnMouseWheel"},{"default":true,"prop":"preventDefaultMouseMove"}]},{"type":"Object","isObject":true,"arrayItemType":"slider","children":[{"default":"'slider'","prop":"type"},{"type":"string","prop":"id"},{"default":true,"prop":"show"},{"type":"Color","default":"'rgba(47,69,84,0)'","prop":"backgroundColor"},{"type":"Object","isObject":true,"prop":"dataBackground","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#2f4554","prop":"color"},{"default":0.5,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0.3,"prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Color","default":"rgba(47,69,84,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0.3,"prop":"opacity"}]}]},{"type":"Color","default":"'rgba(47,69,84,0.25)'","prop":"fillerColor"},{"type":"Color","default":"'#ddd'","prop":"borderColor"},{"type":"string","prop":"handleIcon"},{"type":["number","string"],"default":"'100%'","prop":"handleSize"},{"type":"Object","isObject":true,"prop":"handleStyle","children":[{"type":"Color","default":"#a7b7cc","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":["number","string"],"default":"'auto'","prop":"labelPrecision"},{"type":["string","Function"],"prop":"labelFormatter"},{"default":true,"prop":"showDetail"},{"default":"'auto'","prop":"showDataShadow"},{"default":true,"prop":"realtime"},{"type":"*","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"#333","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":["number","Array"],"prop":"xAxisIndex"},{"type":["number","Array"],"prop":"yAxisIndex"},{"type":["number","Array"],"prop":"radiusAxisIndex"},{"type":["number","Array"],"prop":"angleAxisIndex"},{"default":"'filter'","prop":"filterMode"},{"default":0,"prop":"start"},{"default":100,"prop":"end"},{"type":["number","string","Date"],"prop":"startValue"},{"type":["number","string","Date"],"prop":"endValue"},{"type":"number","prop":"minSpan"},{"type":"number","prop":"maxSpan"},{"type":["number","string","Date"],"prop":"minValueSpan"},{"type":["number","string","Date"],"prop":"maxValueSpan"},{"type":"string","prop":"orient"},{"default":false,"prop":"zoomLock"},{"default":100,"prop":"throttle"},{"type":"Array","prop":"rangeMode"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'auto'","prop":"left"},{"type":["string","number"],"default":"'auto'","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"}]}]},{"type":"Array","isArray":true,"prop":"visualMap","children":[{"type":"Object","isObject":true,"arrayItemType":"continuous","children":[{"default":"continuous","prop":"type"},{"type":"string","prop":"id"},{"type":"number","prop":"min"},{"type":"number","prop":"max"},{"type":"Array","prop":"range"},{"default":false,"prop":"calculable"},{"default":true,"prop":"realtime"},{"default":false,"prop":"inverse"},{"default":0,"prop":"precision"},{"default":20,"prop":"itemWidth"},{"default":140,"prop":"itemHeight"},{"default":"'auto'","prop":"align"},{"type":"Array","prop":"text"},{"default":10,"prop":"textGap"},{"default":true,"prop":"show"},{"type":"string","prop":"dimension"},{"type":["number","Array"],"prop":"seriesIndex"},{"default":true,"prop":"hoverLink"},{"type":"Object","prop":"inRange"},{"type":"Object","prop":"outOfRange"},{"type":"Object","isObject":true,"prop":"controller","children":[{"type":"Object","prop":"inRange"},{"type":"Object","prop":"outOfRange"}]},{"default":0,"prop":"zlevel"},{"default":4,"prop":"z"},{"type":["string","number"],"default":0,"prop":"left"},{"type":["string","number"],"default":"auto","prop":"top"},{"type":["string","number"],"default":"auto","prop":"right"},{"type":["string","number"],"default":0,"prop":"bottom"},{"default":"'vertical'","prop":"orient"},{"type":["number","Array"],"default":5,"prop":"padding"},{"type":"Color","default":"'rgba(0,0,0,0)'","prop":"backgroundColor"},{"type":"Color","default":"'#ccc'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":"Array","default":"['#bf444c', '#d88273', '#f6efa6']","prop":"color"},{"type":"*","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"#333","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"arrayItemType":"piecewise","children":[{"default":"piecewise","prop":"type"},{"type":"string","prop":"id"},{"default":5,"prop":"splitNumber"},{"type":"Array","prop":"pieces"},{"type":"Array","prop":"categories"},{"type":"number","prop":"min"},{"type":"number","prop":"max"},{"type":"boolean","prop":"minOpen"},{"type":"boolean","prop":"maxOpen"},{"default":"'multiple'","prop":"selectedMode"},{"default":false,"prop":"inverse"},{"type":"number","prop":"precision"},{"default":20,"prop":"itemWidth"},{"default":14,"prop":"itemHeight"},{"default":"'auto'","prop":"align"},{"type":"Array","prop":"text"},{"default":10,"prop":"textGap"},{"type":"boolean","prop":"showLabel"},{"type":"*","prop":"itemGap = 10"},{"default":"'roundRect'","prop":"itemSymbol"},{"default":true,"prop":"show"},{"type":"string","prop":"dimension"},{"type":["number","Array"],"prop":"seriesIndex"},{"default":true,"prop":"hoverLink"},{"type":"Object","prop":"inRange"},{"type":"Object","prop":"outOfRange"},{"type":"Object","isObject":true,"prop":"controller","children":[{"type":"Object","prop":"inRange"},{"type":"Object","prop":"outOfRange"}]},{"default":0,"prop":"zlevel"},{"default":4,"prop":"z"},{"type":["string","number"],"default":0,"prop":"left"},{"type":["string","number"],"default":"auto","prop":"top"},{"type":["string","number"],"default":"auto","prop":"right"},{"type":["string","number"],"default":0,"prop":"bottom"},{"default":"'vertical'","prop":"orient"},{"type":["number","Array"],"default":5,"prop":"padding"},{"type":"Color","default":"'rgba(0,0,0,0)'","prop":"backgroundColor"},{"type":"Color","default":"'#ccc'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":"Array","default":"['#bf444c', '#d88273', '#f6efa6']","prop":"color"},{"type":"*","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"#333","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"tooltip","children":[{"default":true,"prop":"show"},{"default":"'item'","prop":"trigger"},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"default":"'line'","prop":"type"},{"default":"'auto'","prop":"axis"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"crossStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"dashed","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":200,"prop":"animationDurationUpdate"},{"default":"exponentialOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":true,"prop":"showContent"},{"default":false,"prop":"alwaysShowContent"},{"default":"'mousemove|click'","prop":"triggerOn"},{"default":0,"prop":"showDelay"},{"default":100,"prop":"hideDelay"},{"default":true,"prop":"enterable"},{"default":"'html'","prop":"renderMode"},{"default":false,"prop":"confine"},{"default":false,"prop":"appendToBody"},{"default":0.4,"prop":"transitionDuration"},{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"type":"string","prop":"id"},{"default":false,"prop":"show"},{"default":"'line'","prop":"type"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"triggerTooltip"},{"type":"number","prop":"value"},{"type":"boolean","prop":"status"},{"type":"Object","isObject":true,"prop":"handle","children":[{"default":false,"prop":"show"},{"type":"*","prop":"icon"},{"type":["number","Array"],"default":45,"prop":"size"},{"default":50,"prop":"margin"},{"default":"'#333'","prop":"color"},{"default":40,"prop":"throttle"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":2,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Array","prop":"link"},{"default":"'mousemove|click'","prop":"triggerOn"}]},{"type":"Object","isObject":true,"prop":"toolbox","children":[{"type":"string","prop":"id"},{"default":true,"prop":"show"},{"default":"'horizontal'","prop":"orient"},{"default":15,"prop":"itemSize"},{"default":10,"prop":"itemGap"},{"default":true,"prop":"showTitle"},{"type":"Object","isObject":true,"prop":"feature","children":[{"type":"Object","isObject":true,"prop":"saveAsImage","children":[{"default":"'png'","prop":"type"},{"type":"string","prop":"name"},{"type":"Color","default":"'auto'","prop":"backgroundColor"},{"type":"Color","default":"'#fff'","prop":"connectedBackgroundColor"},{"type":"Array","default":"['toolbox']","prop":"excludeComponents"},{"default":true,"prop":"show"},{"default":"'save as image'","prop":"title"},{"type":"*","prop":"icon"},{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","default":"none","prop":"color"},{"type":"Color","default":"#666","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":"'bottom'","prop":"textPosition"},{"default":"'#000'","prop":"textFill"},{"default":"'center'","prop":"textAlign"},{"type":"string","prop":"textBackgroundColor"},{"type":"number","prop":"textBorderRadius"},{"type":"number","prop":"textPadding"}]}]},{"default":1,"prop":"pixelRatio"}]},{"type":"Object","isObject":true,"prop":"restore","children":[{"default":true,"prop":"show"},{"default":"'restore'","prop":"title"},{"type":"*","prop":"icon"},{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","default":"none","prop":"color"},{"type":"Color","default":"#666","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":"'bottom'","prop":"textPosition"},{"default":"'#000'","prop":"textFill"},{"default":"'center'","prop":"textAlign"},{"type":"string","prop":"textBackgroundColor"},{"type":"number","prop":"textBorderRadius"},{"type":"number","prop":"textPadding"}]}]}]},{"type":"Object","isObject":true,"prop":"dataView","children":[{"default":true,"prop":"show"},{"default":"'data view'","prop":"title"},{"type":"*","prop":"icon"},{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","default":"none","prop":"color"},{"type":"Color","default":"#666","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":"'bottom'","prop":"textPosition"},{"default":"'#000'","prop":"textFill"},{"default":"'center'","prop":"textAlign"},{"type":"string","prop":"textBackgroundColor"},{"type":"number","prop":"textBorderRadius"},{"type":"number","prop":"textPadding"}]}]},{"default":false,"prop":"readOnly"},{"type":"Function","prop":"optionToContent"},{"type":"Function","prop":"contentToOption"},{"type":"Array","default":"['data view', 'turn off', 'refresh']","prop":"lang"},{"default":"'#fff'","prop":"backgroundColor"},{"default":"'#fff'","prop":"textareaColor"},{"default":"'#333'","prop":"textareaBorderColor"},{"default":"'#000'","prop":"textColor"},{"default":"'#c23531'","prop":"buttonColor"},{"default":"'#fff'","prop":"buttonTextColor"}]},{"type":"Object","isObject":true,"prop":"dataZoom","children":[{"default":true,"prop":"show"},{"type":"Object","isObject":true,"prop":"title","children":[{"default":"'area zooming'","prop":"zoom"},{"default":"'restore area zooming'","prop":"back"}]},{"type":"Object","isObject":true,"prop":"icon","children":[{"type":"string","prop":"zoom"},{"type":"string","prop":"back"}]},{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","default":"none","prop":"color"},{"type":"Color","default":"#666","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":"'bottom'","prop":"textPosition"},{"default":"'#000'","prop":"textFill"},{"default":"'center'","prop":"textAlign"},{"type":"string","prop":"textBackgroundColor"},{"type":"number","prop":"textBorderRadius"},{"type":"number","prop":"textPadding"}]}]},{"default":"'filter'","prop":"filterMode"},{"type":["number","Array","boolean"],"prop":"xAxisIndex"},{"type":["number","Array","boolean"],"prop":"yAxisIndex"}]},{"type":"Object","isObject":true,"prop":"magicType","children":[{"default":true,"prop":"show"},{"type":"Array","prop":"type"},{"type":"Object","isObject":true,"prop":"title","children":[{"default":"'for line charts'","prop":"line"},{"default":"'for bar charts'","prop":"bar"},{"default":"'for stacked charts'","prop":"stack"},{"default":"'for tiled charts'","prop":"tiled"}]},{"type":"Object","isObject":true,"prop":"icon","children":[{"type":"string","prop":"line"},{"type":"string","prop":"bar"},{"type":"string","prop":"stack"},{"type":"string","prop":"tiled"}]},{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","default":"none","prop":"color"},{"type":"Color","default":"#666","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":"'bottom'","prop":"textPosition"},{"default":"'#000'","prop":"textFill"},{"default":"'center'","prop":"textAlign"},{"type":"string","prop":"textBackgroundColor"},{"type":"number","prop":"textBorderRadius"},{"type":"number","prop":"textPadding"}]}]},{"type":"Object","isObject":true,"prop":"option","children":[{"type":"Object","prop":"line"},{"type":"Object","prop":"bar"},{"type":"Object","prop":"stack"},{"type":"Object","prop":"tiled"}]},{"type":"Object","isObject":true,"prop":"seriesIndex","children":[{"type":"Array","prop":"line"},{"type":"Array","prop":"bar"},{"type":"Array","prop":"stack"},{"type":"Array","prop":"tiled"}]}]},{"type":"Object","isObject":true,"prop":"brush","children":[{"type":"Array","prop":"type"},{"type":"Object","isObject":true,"prop":"icon","children":[{"type":"string","prop":"rect"},{"type":"string","prop":"polygon"},{"type":"string","prop":"lineX"},{"type":"string","prop":"lineY"},{"type":"string","prop":"keep"},{"type":"string","prop":"clear"}]},{"type":"Object","isObject":true,"prop":"title","children":[{"default":"'Rectangle selection'","prop":"rect"},{"default":"'Polygon selection'","prop":"polygon"},{"default":"'Horizontal selection'","prop":"lineX"},{"default":"'Vertical selection'","prop":"lineY"},{"default":"'Keep previous selection'","prop":"keep"},{"default":"'Clear selection'","prop":"clear"}]}]}]},{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","default":"none","prop":"color"},{"type":"Color","default":"#666","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":"'bottom'","prop":"textPosition"},{"default":"'#000'","prop":"textFill"},{"default":"'center'","prop":"textAlign"},{"type":"string","prop":"textBackgroundColor"},{"type":"number","prop":"textBorderRadius"},{"type":"number","prop":"textPadding"}]}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'auto'","prop":"left"},{"type":["string","number"],"default":"'auto'","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"},{"type":["string","number"],"default":"'auto'","prop":"width"},{"type":["string","number"],"default":"'auto'","prop":"height"},{"type":"Object","prop":"tooltip"}]},{"type":"Object","isObject":true,"prop":"brush","children":[{"type":"string","prop":"id"},{"type":"Array","default":"['rect', 'polygon', 'keep', 'clear']","prop":"toolbox"},{"type":["Array","string"],"prop":"brushLink"},{"type":["Array","number","string"],"default":"'all'","prop":"seriesIndex"},{"type":["Array","number","string"],"prop":"geoIndex"},{"type":["Array","number","string"],"prop":"xAxisIndex"},{"type":["Array","number","string"],"prop":"yAxisIndex"},{"default":"'rect'","prop":"brushType"},{"default":"'single'","prop":"brushMode"},{"default":true,"prop":"transformable"},{"type":"Object","prop":"brushStyle"},{"default":"'fixRate'","prop":"throttleType"},{"default":0,"prop":"throttleDelay"},{"default":true,"prop":"removeOnClick"},{"type":"Object","prop":"inBrush"},{"type":"Object","prop":"outOfBrush"},{"default":10000,"prop":"z"}]},{"type":"Object","isObject":true,"prop":"geo","children":[{"type":"string","prop":"id"},{"default":true,"prop":"show"},{"default":"''","prop":"map"},{"type":["boolean","string"],"default":false,"prop":"roam"},{"type":"Array","prop":"center"},{"default":0.75,"prop":"aspectScale"},{"type":"Array","prop":"boundingCoords"},{"default":1,"prop":"zoom"},{"type":"Object","isObject":true,"prop":"scaleLimit","children":[{"type":"number","prop":"min"},{"type":"number","prop":"max"}]},{"type":"Object","prop":"nameMap"},{"default":"'name'","prop":"nameProperty"},{"type":["boolean","string"],"default":false,"prop":"selectedMode"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"'#eee'","prop":"areaColor"},{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"'#eee'","prop":"areaColor"},{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'auto'","prop":"left"},{"type":["string","number"],"default":"'auto'","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"},{"type":"Array","prop":"layoutCenter"},{"type":["number","string"],"prop":"layoutSize"},{"type":"Array","isArray":true,"prop":"regions","children":[{"type":"string","prop":"name"},{"default":false,"prop":"selected"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"areaColor"},{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"areaColor"},{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":false,"prop":"silent"}]},{"type":"Object","isObject":true,"prop":"parallel","children":[{"type":"string","prop":"id"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":80,"prop":"left"},{"type":["string","number"],"default":60,"prop":"top"},{"type":["string","number"],"default":80,"prop":"right"},{"type":["string","number"],"default":60,"prop":"bottom"},{"type":["string","number"],"default":"'auto'","prop":"width"},{"type":["string","number"],"default":"'auto'","prop":"height"},{"default":"'horizontal'","prop":"layout"},{"default":false,"prop":"axisExpandable"},{"type":"number","prop":"axisExpandCenter"},{"default":0,"prop":"axisExpandCount"},{"default":50,"prop":"axisExpandWidth"},{"default":"'click'","prop":"axisExpandTriggerOn"},{"type":"Object","isObject":true,"prop":"parallelAxisDefault","children":[{"default":"value","prop":"type"},{"type":"string","prop":"name"},{"default":"'end'","prop":"nameLocation"},{"type":"Object","isObject":true,"prop":"nameTextStyle","children":[{"type":"Color","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":15,"prop":"nameGap"},{"type":"number","prop":"nameRotate"},{"default":false,"prop":"inverse"},{"type":["boolean","Array"],"prop":"boundaryGap"},{"type":["number","string","Function"],"prop":"min"},{"type":["number","string","Function"],"prop":"max"},{"default":false,"prop":"scale"},{"default":5,"prop":"splitNumber"},{"default":0,"prop":"minInterval"},{"type":"number","prop":"maxInterval"},{"type":"number","prop":"interval"},{"default":10,"prop":"logBase"},{"default":false,"prop":"silent"},{"default":false,"prop":"triggerEvent"},{"type":"Object","isObject":true,"prop":"axisLine","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'none'","prop":"symbol"},{"type":"Array","default":"[10, 15]","prop":"symbolSize"},{"type":["Array","number"],"default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisTick","children":[{"default":true,"prop":"show"},{"default":false,"prop":"alignWithLabel"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":5,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorTick","children":[{"default":false,"prop":"show"},{"default":5,"prop":"splitNumber"},{"default":3,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisLabel","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":0,"prop":"rotate"},{"default":8,"prop":"margin"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","prop":"showMinLabel"},{"type":"boolean","prop":"showMaxLabel"},{"type":["Color","Function"],"prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"value"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"parallelAxis","children":[{"type":"string","prop":"id"},{"type":"number","prop":"dim"},{"default":0,"prop":"parallelIndex"},{"default":true,"prop":"realtime"},{"type":"Object","isObject":true,"prop":"areaSelectStyle","children":[{"default":20,"prop":"width"},{"default":1,"prop":"borderWidth"},{"type":"Color","default":"'rgba(160,197,232)'","prop":"borderColor"},{"type":"Color","default":"'rgba(160,197,232)'","prop":"color"},{"default":0.3,"prop":"opacity"}]},{"default":"value","prop":"type"},{"type":"string","prop":"name"},{"default":"'end'","prop":"nameLocation"},{"type":"Object","isObject":true,"prop":"nameTextStyle","children":[{"type":"Color","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":15,"prop":"nameGap"},{"type":"number","prop":"nameRotate"},{"default":false,"prop":"inverse"},{"type":["boolean","Array"],"prop":"boundaryGap"},{"type":["number","string","Function"],"prop":"min"},{"type":["number","string","Function"],"prop":"max"},{"default":false,"prop":"scale"},{"default":5,"prop":"splitNumber"},{"default":0,"prop":"minInterval"},{"type":"number","prop":"maxInterval"},{"type":"number","prop":"interval"},{"default":10,"prop":"logBase"},{"default":false,"prop":"silent"},{"default":false,"prop":"triggerEvent"},{"type":"Object","isObject":true,"prop":"axisLine","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'none'","prop":"symbol"},{"type":"Array","default":"[10, 15]","prop":"symbolSize"},{"type":["Array","number"],"default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisTick","children":[{"default":true,"prop":"show"},{"default":false,"prop":"alignWithLabel"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":5,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorTick","children":[{"default":false,"prop":"show"},{"default":5,"prop":"splitNumber"},{"default":3,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisLabel","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":0,"prop":"rotate"},{"default":8,"prop":"margin"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","prop":"showMinLabel"},{"type":"boolean","prop":"showMaxLabel"},{"type":["Color","Function"],"prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"value"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"singleAxis","children":[{"type":"string","prop":"id"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'5%'","prop":"left"},{"type":["string","number"],"default":"'5%'","prop":"top"},{"type":["string","number"],"default":"'5%'","prop":"right"},{"type":["string","number"],"default":"'5%'","prop":"bottom"},{"type":["string","number"],"default":"'auto'","prop":"width"},{"type":["string","number"],"default":"'auto'","prop":"height"},{"default":"'horizontal'","prop":"orient"},{"default":"'value'","prop":"type"},{"type":"string","prop":"name"},{"default":"'end'","prop":"nameLocation"},{"type":"Object","isObject":true,"prop":"nameTextStyle","children":[{"type":"Color","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":15,"prop":"nameGap"},{"type":"number","prop":"nameRotate"},{"default":false,"prop":"inverse"},{"type":["boolean","Array"],"prop":"boundaryGap"},{"type":["number","string","Function"],"prop":"min"},{"type":["number","string","Function"],"prop":"max"},{"default":false,"prop":"scale"},{"default":5,"prop":"splitNumber"},{"default":0,"prop":"minInterval"},{"type":"number","prop":"maxInterval"},{"type":"number","prop":"interval"},{"default":10,"prop":"logBase"},{"default":false,"prop":"silent"},{"default":false,"prop":"triggerEvent"},{"type":"Object","isObject":true,"prop":"axisLine","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'none'","prop":"symbol"},{"type":"Array","default":"[10, 15]","prop":"symbolSize"},{"type":["Array","number"],"default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisTick","children":[{"default":true,"prop":"show"},{"default":false,"prop":"alignWithLabel"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":5,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorTick","children":[{"default":false,"prop":"show"},{"default":5,"prop":"splitNumber"},{"default":3,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisLabel","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":0,"prop":"rotate"},{"default":8,"prop":"margin"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","prop":"showMinLabel"},{"type":"boolean","prop":"showMaxLabel"},{"type":["Color","Function"],"prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"splitLine","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":["Array","string"],"default":"['#ccc']","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorSplitLine","children":[{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#eee'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"splitArea","children":[{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Array","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"value"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"default":false,"prop":"show"},{"default":"'line'","prop":"type"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"triggerTooltip"},{"type":"number","prop":"value"},{"type":"boolean","prop":"status"},{"type":"Object","isObject":true,"prop":"handle","children":[{"default":false,"prop":"show"},{"type":"*","prop":"icon"},{"type":["number","Array"],"default":45,"prop":"size"},{"default":50,"prop":"margin"},{"default":"'#333'","prop":"color"},{"default":40,"prop":"throttle"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":2,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"tooltip","children":[{"default":true,"prop":"show"},{"default":"'item'","prop":"trigger"},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"default":"'line'","prop":"type"},{"default":"'auto'","prop":"axis"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"crossStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"dashed","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":200,"prop":"animationDurationUpdate"},{"default":"exponentialOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"timeline","children":[{"default":true,"prop":"show"},{"default":"'slider'","prop":"type"},{"default":"'time'","prop":"axisType"},{"default":0,"prop":"currentIndex"},{"default":false,"prop":"autoPlay"},{"default":false,"prop":"rewind"},{"default":true,"prop":"loop"},{"default":2000,"prop":"playInterval"},{"default":true,"prop":"realtime"},{"default":"'left'","prop":"controlPosition"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'auto'","prop":"left"},{"type":["string","number"],"default":"'auto'","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"},{"type":["number","Array"],"default":5,"prop":"padding"},{"default":"'horizontal'","prop":"orient"},{"default":false,"prop":"inverse"},{"default":"'emptyCircle'","prop":"symbol"},{"type":["number","Array"],"default":10,"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"default":true,"prop":"show"},{"type":"Color","default":"'#304654'","prop":"color"},{"default":2,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'auto'","prop":"position"},{"default":true,"prop":"show"},{"type":["string","number"],"default":"'auto'","prop":"interval"},{"type":"prefix","default":0,"prop":"rotate"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'#304654'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"type":["string","number"],"default":"'auto'","prop":"interval"},{"type":"prefix","default":0,"prop":"rotate"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'#c23531'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"'#304654'","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"'#c23531'","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"checkpointStyle","children":[{"default":"'circle'","prop":"symbol"},{"type":["number","Array"],"default":13,"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Color","default":"'#c23531'","prop":"color"},{"default":5,"prop":"borderWidth"},{"type":"Color","default":"'rgba(194,53,49, 0.5)'","prop":"borderColor"},{"default":true,"prop":"animation"},{"default":300,"prop":"animationDuration"},{"default":"'quinticInOut'","prop":"animationEasing"}]},{"type":"Object","isObject":true,"prop":"controlStyle","children":[{"default":true,"prop":"show"},{"default":true,"prop":"showPlayBtn"},{"default":true,"prop":"showPrevBtn"},{"default":true,"prop":"showNextBtn"},{"default":22,"prop":"itemSize"},{"default":12,"prop":"itemGap"},{"default":"'left'","prop":"position"},{"type":"string","prop":"playIcon"},{"type":"string","prop":"stopIcon"},{"type":"string","prop":"prevIcon"},{"type":"string","prop":"nextIcon"},{"type":"Color","default":"'#304654'","prop":"color"},{"type":"Color","default":"'#304654'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"'#c23531'","prop":"color"},{"type":"Color","default":"'#c23531'","prop":"borderColor"},{"default":2,"prop":"borderWidth"}]}]},{"type":"Array","prop":"data"}]},{"type":"*","isObject":true,"prop":"graphic","children":[{"type":"string","prop":"id"},{"type":"Array","isArray":true,"prop":"elements","children":[{"type":"Object","isObject":true,"arrayItemType":"group","children":[{"default":"group","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"default":0,"prop":"width"},{"default":0,"prop":"height"},{"default":false,"prop":"diffChildrenByName"},{"type":"Array","prop":"children"},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"image","children":[{"default":"image","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"style","children":[{"type":"string","prop":"image"},{"default":0,"prop":"x"},{"type":"numbr","default":0,"prop":"y"},{"default":0,"prop":"width"},{"type":"numbr","default":0,"prop":"height"},{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"text","children":[{"default":"text","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"''","prop":"text"},{"default":0,"prop":"x"},{"type":"numbr","default":0,"prop":"y"},{"type":"string","prop":"font"},{"default":"'left'","prop":"textAlign"},{"type":"string","prop":"textVerticalAlign"},{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"rect","children":[{"default":"rect","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"x"},{"type":"numbr","default":0,"prop":"y"},{"default":0,"prop":"width"},{"type":"numbr","default":0,"prop":"height"},{"type":"Array","prop":"r"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"circle","children":[{"default":"circle","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"cx"},{"type":"numbr","default":0,"prop":"cy"},{"default":0,"prop":"r"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"ring","children":[{"default":"ring","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"cx"},{"type":"numbr","default":0,"prop":"cy"},{"default":0,"prop":"r"},{"default":0,"prop":"r0"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"sector","children":[{"default":"sector","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"cx"},{"type":"numbr","default":0,"prop":"cy"},{"default":0,"prop":"r"},{"default":0,"prop":"r0"},{"default":0,"prop":"startAngle"},{"type":"number","default":"Math.PI * 2","prop":"endAngle"},{"default":true,"prop":"clockwise"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"arc","children":[{"default":"arc","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"cx"},{"type":"numbr","default":0,"prop":"cy"},{"default":0,"prop":"r"},{"default":0,"prop":"r0"},{"default":0,"prop":"startAngle"},{"type":"number","default":"Math.PI * 2","prop":"endAngle"},{"default":true,"prop":"clockwise"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"type":"string","prop":"fill"},{"default":"\"#000\"","prop":"stroke"},{"default":1,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"polygon","children":[{"default":"polygon","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"shape","children":[{"type":"Array","prop":"points"},{"type":["number","string"],"default":"undefined","prop":"smooth"},{"default":false,"prop":"smoothConstraint"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"polyline","children":[{"default":"polyline","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"shape","children":[{"type":"Array","prop":"points"},{"type":["number","string"],"default":"undefined","prop":"smooth"},{"default":false,"prop":"smoothConstraint"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"type":"string","prop":"fill"},{"default":"\"#000\"","prop":"stroke"},{"default":5,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"line","children":[{"default":"line","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"x1"},{"default":0,"prop":"y1"},{"default":0,"prop":"x2"},{"default":0,"prop":"y2"},{"default":1,"prop":"percent"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"type":"string","prop":"fill"},{"default":"\"#000\"","prop":"stroke"},{"default":5,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"bezierCurve","children":[{"default":"bezierCurve","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"x1"},{"default":0,"prop":"y1"},{"default":0,"prop":"x2"},{"default":0,"prop":"y2"},{"default":0,"prop":"cpx1"},{"default":0,"prop":"cpy1"},{"type":"number","prop":"cpx2"},{"type":"number","prop":"cpy2"},{"default":1,"prop":"percent"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]}]}]},{"type":"Object","isObject":true,"prop":"calendar","children":[{"type":"string","prop":"id"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":80,"prop":"left"},{"type":["string","number"],"default":60,"prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"},{"type":["number","string"],"default":"auto","prop":"width"},{"type":["number","string"],"default":"auto","prop":"height"},{"type":["number","string","Array"],"prop":"range"},{"type":["number","Array"],"default":20,"prop":"cellSize"},{"default":"'horizontal'","prop":"orient"},{"type":"Object","isObject":true,"prop":"splitLine","children":[{"default":true,"prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#000","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"#fff","prop":"color"},{"type":"Color","default":"'#ccc'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"dayLabel","children":[{"default":true,"prop":"show"},{"default":0,"prop":"firstDay"},{"default":0,"prop":"margin"},{"default":"'start'","prop":"position"},{"type":["string","Array"],"default":"'en'","prop":"nameMap"},{"type":"Color","default":"#000","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"monthLabel","children":[{"default":true,"prop":"show"},{"type":"string","prop":"align"},{"default":5,"prop":"margin"},{"default":"'start'","prop":"position"},{"type":["string","Array"],"default":"'en'","prop":"nameMap"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"#000","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"yearLabel","children":[{"default":true,"prop":"show"},{"default":30,"prop":"margin"},{"type":"string","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":false,"prop":"silent"}]},{"type":"Object","isObject":true,"prop":"dataset","children":[{"type":"string","prop":"id"},{"type":["Array","Object"],"prop":"source"},{"type":"Array","prop":"dimensions"},{"type":"boolean","prop":"sourceHeader"}]},{"type":"*","isObject":true,"prop":"aria","children":[{"default":false,"prop":"show"},{"type":"string","prop":"description"},{"type":"Object","isObject":true,"prop":"general","children":[{"default":"'This is a chart about \"{title}\".'","prop":"withTitle"},{"default":"'This is a chart'","prop":"withoutTitle"}]},{"type":"Object","isObject":true,"prop":"series","children":[{"default":10,"prop":"maxCount"},{"type":"Object","isObject":true,"prop":"single","children":[{"default":"''","prop":"prefix"},{"default":"'The chart type is {seriesType}, which means {seriesName}. '","prop":"withName"},{"default":"'The chart type is {seriesType}.'","prop":"withoutName"}]},{"type":"Object","isObject":true,"prop":"multiple","children":[{"default":"'It consists of {seriesCount} chart series. '","prop":"prefix"},{"default":"'The chart type is {seriesType}, which means {seriesName}. '","prop":"withName"},{"default":"'The chart type is {seriesType}.'","prop":"withoutName"},{"type":"Object","isObject":true,"prop":"separator","children":[{"default":"';'","prop":"middle"},{"default":"'.'","prop":"end"}]}]}]},{"type":"Object","isObject":true,"prop":"data","children":[{"default":10,"prop":"maxCount"},{"default":"'Its data is --'","prop":"allData"},{"default":"''Where the first {displayCnt} entry is -''","prop":"partialData"},{"default":"'{name}'s data is {value}'","prop":"withName"},{"default":"'{value}'","prop":"withoutName"},{"type":"Object","isObject":true,"prop":"separator","children":[{"default":"','","prop":"middle"},{"default":"''","prop":"end"}]}]}]},{"type":"Array","isArray":true,"prop":"series","children":[{"type":"Object","isObject":true,"arrayItemType":"line","children":[{"default":"'line'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":"'cartesian2d'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"default":0,"prop":"polarIndex"},{"type":["string","Function"],"default":"'circle'","prop":"symbol"},{"type":["number","Array","Function"],"default":4,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":true,"prop":"showSymbol"},{"type":"boolean","default":"'auto'","prop":"showAllSymbol"},{"default":true,"prop":"hoverAnimation"},{"default":true,"prop":"legendHoverLink"},{"type":"string","prop":"stack"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"connectNulls"},{"default":true,"prop":"clip"},{"type":["string","boolean"],"default":false,"prop":"step"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'top'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":["Color","Function"],"prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":2,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":"'auto'","prop":"origin"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":["boolean","number"],"default":false,"prop":"smooth"},{"type":"string","prop":"smoothMonotone"},{"type":"string","prop":"sampling"},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"default":"'column'","prop":"seriesLayoutBy"},{"default":0,"prop":"datasetIndex"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"default":"'circle'","prop":"symbol"},{"type":["number","Array"],"default":4,"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"top","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"auto","prop":"color"},{"type":"Color","default":"'#000'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"auto","prop":"color"},{"type":"Color","default":"'#000'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"linear","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"bar","children":[{"default":"'bar'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":true,"prop":"legendHoverLink"},{"default":"'cartesian2d'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"default":false,"prop":"roundCap"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"auto","prop":"color"},{"type":"Color","default":"'#000'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":["number","Array"],"default":0,"prop":"barBorderRadius"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":false,"prop":"showBackground"},{"type":"Object","isObject":true,"prop":"backgroundStyle","children":[{"type":"Color","default":"'rgba(180, 180, 180, 0.2)'","prop":"color"},{"type":"Color","default":"'#000'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":["number","Array"],"default":0,"prop":"barBorderRadius"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"auto","prop":"color"},{"type":"Color","default":"'#000'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"string","prop":"stack"},{"default":"'pointer'","prop":"cursor"},{"type":["number","string"],"prop":"barWidth"},{"type":["number","string"],"prop":"barMaxWidth"},{"type":["number","string"],"prop":"barMinWidth"},{"default":0,"prop":"barMinHeight"},{"default":"30%","prop":"barGap"},{"default":"'20%'","prop":"barCategoryGap"},{"default":false,"prop":"large"},{"default":400,"prop":"largeThreshold"},{"default":5000,"prop":"progressive"},{"default":3000,"prop":"progressiveThreshold"},{"default":"mod","prop":"progressiveChunkMode"},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"default":"'column'","prop":"seriesLayoutBy"},{"default":0,"prop":"datasetIndex"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"inside","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"auto","prop":"color"},{"type":"Color","default":"'#000'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":["number","Array"],"default":0,"prop":"barBorderRadius"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"auto","prop":"color"},{"type":"Color","default":"'#000'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":true,"prop":"clip"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"pie","children":[{"default":"'pie'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":true,"prop":"legendHoverLink"},{"default":true,"prop":"hoverAnimation"},{"default":10,"prop":"hoverOffset"},{"type":["boolean","string"],"default":false,"prop":"selectedMode"},{"default":10,"prop":"selectedOffset"},{"default":true,"prop":"clockwise"},{"default":90,"prop":"startAngle"},{"default":0,"prop":"minAngle"},{"default":0,"prop":"minShowLabelAngle"},{"type":["boolean","string"],"default":false,"prop":"roseType"},{"default":true,"prop":"avoidLabelOverlap"},{"default":true,"prop":"stillShowZeroSum"},{"default":"'pointer'","prop":"cursor"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":0,"prop":"left"},{"type":["string","number"],"default":0,"prop":"top"},{"type":["string","number"],"default":0,"prop":"right"},{"type":["string","number"],"default":0,"prop":"bottom"},{"type":["string","number"],"default":"'auto'","prop":"width"},{"type":["string","number"],"default":"'auto'","prop":"height"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'outside'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":["boolean","number"],"prop":"rotate"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":"'none'","prop":"alignTo"},{"type":["string","number"],"default":"'25%'","prop":"margin"},{"default":10,"prop":"bleedMargin"},{"default":5,"prop":"distanceToLabelLine"}]},{"type":"Object","isObject":true,"prop":"labelLine","children":[{"type":"boolean","prop":"show"},{"type":"number","prop":"length"},{"type":"number","prop":"length2"},{"type":["boolean","number"],"default":false,"prop":"smooth"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":["Color","Function"],"prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Function"],"prop":"formatter"},{"type":["boolean","number"],"prop":"rotate"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"labelLine","children":[{"type":"boolean","prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","default":"['50%', '50%']","prop":"center"},{"type":["number","string","Array"],"default":"[0, '75%']","prop":"radius"},{"default":"'column'","prop":"seriesLayoutBy"},{"default":0,"prop":"datasetIndex"},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"default":false,"prop":"selected"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'outside'","prop":"position"},{"type":["boolean","number"],"prop":"rotate"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"labelLine","children":[{"type":"boolean","prop":"show"},{"type":"number","prop":"length"},{"type":"number","prop":"length2"},{"type":["boolean","number"],"default":false,"prop":"smooth"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["boolean","number"],"prop":"rotate"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"labelLine","children":[{"type":"boolean","prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":false,"prop":"silent"},{"default":"'expansion'","prop":"animationType"},{"default":"'transition'","prop":"animationTypeUpdate"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"scatter","children":[{"default":"'scatter'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":"'cartesian2d'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"default":0,"prop":"polarIndex"},{"default":0,"prop":"geoIndex"},{"default":0,"prop":"calendarIndex"},{"type":"boolean","prop":"hoverAnimation"},{"default":true,"prop":"legendHoverLink"},{"type":["string","Function"],"default":"'circle'","prop":"symbol"},{"type":["number","Array","Function"],"default":10,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"large"},{"default":2000,"prop":"largeThreshold"},{"default":"'pointer'","prop":"cursor"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":["Color","Function"],"prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0.8,"prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"default":400,"prop":"progressive"},{"default":3000,"prop":"progressiveThreshold"},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"default":"'column'","prop":"seriesLayoutBy"},{"default":0,"prop":"datasetIndex"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"Array","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"inside","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":true,"prop":"clip"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"effectScatter","children":[{"default":"'effectScatter'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":true,"prop":"legendHoverLink"},{"default":"'ripple'","prop":"effectType"},{"default":"'render'","prop":"showEffectOn"},{"type":"Object","isObject":true,"prop":"rippleEffect","children":[{"type":"string","prop":"color"},{"default":4,"prop":"period"},{"default":2.5,"prop":"scale"},{"default":"'fill'","prop":"brushType"}]},{"default":"'cartesian2d'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"default":0,"prop":"polarIndex"},{"default":0,"prop":"geoIndex"},{"default":0,"prop":"calendarIndex"},{"type":["string","Function"],"default":"'circle'","prop":"symbol"},{"type":["number","Array","Function"],"default":10,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":"'pointer'","prop":"cursor"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":["Color","Function"],"prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":["Color","Function"],"prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"default":"'column'","prop":"seriesLayoutBy"},{"default":0,"prop":"datasetIndex"},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"'circle'","prop":"symbol"},{"type":["number","Array"],"default":4,"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"inside","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"radar","children":[{"default":"'radar'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"type":"number","prop":"radarIndex"},{"type":["string","Function"],"default":"'circle'","prop":"symbol"},{"type":["number","Array","Function"],"default":4,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'top'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":["Color","Function"],"prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"default":"'circle'","prop":"symbol"},{"type":["number","Array"],"default":4,"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"top","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"auto","prop":"color"},{"type":"Color","default":"'#000'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"top","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"auto","prop":"color"},{"type":"Color","default":"'#000'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"tree","children":[{"default":"'tree'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"12%","prop":"left"},{"type":["string","number"],"default":"12%","prop":"top"},{"type":["string","number"],"default":"12%","prop":"right"},{"type":["string","number"],"default":"12%","prop":"bottom"},{"type":["string","number"],"prop":"width"},{"type":["string","number"],"prop":"height"},{"default":"'orthogonal'","prop":"layout"},{"default":"'LR'","prop":"orient"},{"type":["string","Function"],"default":"'emptyCircle'","prop":"symbol"},{"type":["number","Array","Function"],"default":7,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":"'curve'","prop":"edgeShape"},{"default":"'50%'","prop":"edgeForkPosition"},{"type":["boolean","string"],"default":false,"prop":"roam"},{"default":true,"prop":"expandAndCollapse"},{"default":2,"prop":"initialTreeDepth"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'#c23531'","prop":"borderColor"},{"default":1.5,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"'#ccc'\"","prop":"color"},{"default":1.5,"prop":"width"},{"default":0.5,"prop":"curveness"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"'#ccc'\"","prop":"color"},{"default":1.5,"prop":"width"},{"default":0.5,"prop":"curveness"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"leaves","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]}]},{"type":"Object","isObject":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"'linear'","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"treemap","children":[{"default":"'treemap'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"center","prop":"left"},{"type":["string","number"],"default":"middle","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"},{"type":["string","number"],"default":"80%","prop":"width"},{"type":["string","number"],"default":"80%","prop":"height"},{"type":"number","prop":"squareRatio"},{"type":"number","prop":"leafDepth"},{"default":"'▶'","prop":"drillDownIcon"},{"type":["boolean","string"],"default":true,"prop":"roam"},{"type":["boolean","string"],"default":"'zoomToNode'","prop":"nodeClick"},{"type":"number","default":"0.32*0.32","prop":"zoomToNodeRatio"},{"type":"Array","isArray":true,"prop":"levels","children":[{"default":0,"prop":"visualDimension"},{"type":"number","prop":"visualMin"},{"type":"number","prop":"visualMax"},{"type":"Array","prop":"color"},{"type":"Array","prop":"colorAlpha"},{"type":"number","prop":"colorSaturation"},{"default":"'index'","prop":"colorMappingBy"},{"default":10,"prop":"visibleMin"},{"type":"number","prop":"childrenVisibleMin"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"upperLabel","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"default":20,"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"number","prop":"colorAlpha"},{"type":"number","prop":"colorSaturation"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"gapWidth"},{"type":"Color","default":"'#fff',","prop":"borderColor"},{"type":"Color","prop":"borderColorSaturation"},{"type":"Color","prop":"strokeColor"},{"type":"number","prop":"strokeWidth"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"upperLabel","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"}]}]}]},{"default":0,"prop":"visualDimension"},{"type":"number","prop":"visualMin"},{"type":"number","prop":"visualMax"},{"type":"Array","prop":"colorAlpha"},{"type":"number","prop":"colorSaturation"},{"default":"'index'","prop":"colorMappingBy"},{"default":10,"prop":"visibleMin"},{"type":"number","prop":"childrenVisibleMin"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"upperLabel","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"default":20,"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"number","prop":"colorAlpha"},{"type":"number","prop":"colorSaturation"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"gapWidth"},{"type":"Color","default":"'#fff',","prop":"borderColor"},{"type":"Color","prop":"borderColorSaturation"},{"type":"Color","prop":"strokeColor"},{"type":"number","prop":"strokeWidth"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"upperLabel","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"}]}]},{"type":"Object","isObject":true,"prop":"breadcrumb","children":[{"default":true,"prop":"show"},{"type":["string","number"],"default":"'center'","prop":"left"},{"type":["string","number"],"default":"'auto'","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":0,"prop":"bottom"},{"default":22,"prop":"height"},{"default":25,"prop":"emptyItemWidth"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"rgba(0,0,0,0.7)","prop":"color"},{"type":"Color","default":"rgba(255,255,255,0.7)","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"rgba(150,150,150,1)","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"#fff","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"*","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"rgba(0,0,0,0.7)","prop":"color"},{"type":"Color","default":"rgba(255,255,255,0.7)","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"rgba(150,150,150,1)","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"#fff","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":["number","Array"],"prop":"value"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":0,"prop":"visualDimension"},{"type":"number","prop":"visualMin"},{"type":"number","prop":"visualMax"},{"type":"Array","prop":"color"},{"type":"Array","prop":"colorAlpha"},{"type":"number","prop":"colorSaturation"},{"default":"'index'","prop":"colorMappingBy"},{"default":10,"prop":"visibleMin"},{"type":"number","prop":"childrenVisibleMin"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"upperLabel","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"default":20,"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"number","prop":"colorAlpha"},{"type":"number","prop":"colorSaturation"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"gapWidth"},{"type":"Color","default":"'#fff',","prop":"borderColor"},{"type":"Color","prop":"borderColorSaturation"},{"type":"Color","prop":"strokeColor"},{"type":"number","prop":"strokeWidth"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"upperLabel","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"}]}]},{"type":"string","prop":"link"},{"default":"'blank'","prop":"target"},{"type":"Array","prop":"children"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"default":false,"prop":"silent"},{"type":["number","Function"],"default":1500,"prop":"animationDuration"},{"default":"quinticInOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"sunburst","children":[{"default":"'sunburst'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":"Array","default":"['50%', '50%']","prop":"center"},{"type":["number","string","Array"],"default":"[0, '75%']","prop":"radius"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"number","prop":"value"},{"type":"string","prop":"name"},{"type":"string","prop":"link"},{"default":"'blank'","prop":"target"},{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"highlight","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"downplay","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]}]},{"type":"Array","prop":"children"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]},{"default":"'descendant'","prop":"highlightPolicy"},{"type":["boolean","string"],"default":"'rootToNode'","prop":"nodeClick"},{"type":["string","Function"],"default":"'desc'","prop":"sort"},{"default":false,"prop":"renderLabelForZeroData"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"highlight","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"downplay","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"levels","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"highlight","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"downplay","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"'cubicOut'","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":500,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"arrayItemType":"boxplot","children":[{"default":"'boxplot'","prop":"type"},{"type":"string","prop":"id"},{"default":"'cartesian2d'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"type":"string","prop":"name"},{"default":true,"prop":"legendHoverLink"},{"default":true,"prop":"hoverAnimation"},{"type":"string","prop":"layout"},{"type":"Array","default":"[7, 50]","prop":"boxWidth"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"#fff","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"#fff","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":2,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"default":5,"prop":"shadowBlur"},{"type":"Color","default":"rgba(0,0,0,0.4)","prop":"shadowColor"},{"default":2,"prop":"shadowOffsetX"},{"default":2,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"Array","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"#fff","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"#fff","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":2,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"default":5,"prop":"shadowBlur"},{"type":"Color","default":"rgba(0,0,0,0.4)","prop":"shadowColor"},{"default":2,"prop":"shadowOffsetX"},{"default":2,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"type":["number","Function"],"default":800,"prop":"animationDuration"},{"default":"elasticOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"candlestick","children":[{"default":"'candlestick'","prop":"type"},{"type":"string","prop":"id"},{"default":"'cartesian2d'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"type":"string","prop":"name"},{"default":true,"prop":"legendHoverLink"},{"default":true,"prop":"hoverAnimation"},{"type":"string","prop":"layout"},{"type":"number","prop":"barWidth"},{"type":["number","string"],"prop":"barMinWidth"},{"type":["number","string"],"prop":"barMaxWidth"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"#c23531","prop":"color"},{"type":"Color","default":"#314656","prop":"color0"},{"type":"Color","default":"#c23531","prop":"borderColor"},{"type":"Color","default":"#314656","prop":"borderColor0"},{"default":1,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"#c23531","prop":"color"},{"type":"Color","default":"#314656","prop":"color0"},{"type":"Color","default":"#c23531","prop":"borderColor"},{"type":"Color","default":"#314656","prop":"borderColor0"},{"default":2,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"default":true,"prop":"large"},{"default":600,"prop":"largeThreshold"},{"default":3000,"prop":"progressive"},{"default":10000,"prop":"progressiveThreshold"},{"default":"mod","prop":"progressiveChunkMode"},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"Array","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"#c23531","prop":"color"},{"type":"Color","default":"#314656","prop":"color0"},{"type":"Color","default":"#c23531","prop":"borderColor"},{"type":"Color","default":"#314656","prop":"borderColor0"},{"default":1,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"#c23531","prop":"color"},{"type":"Color","default":"#314656","prop":"color0"},{"type":"Color","default":"#c23531","prop":"borderColor"},{"type":"Color","default":"#314656","prop":"borderColor0"},{"default":2,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":true,"prop":"clip"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"type":["number","Function"],"default":300,"prop":"animationDuration"},{"default":"linear","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"heatmap","children":[{"default":"'heatmap'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":"'cartesian2d'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"default":0,"prop":"geoIndex"},{"default":0,"prop":"calendarIndex"},{"default":20,"prop":"pointSize"},{"default":20,"prop":"blurSize"},{"default":0,"prop":"minOpacity"},{"default":1,"prop":"maxOpacity"},{"default":400,"prop":"progressive"},{"default":3000,"prop":"progressiveThreshold"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"inside","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"inside","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"Array","prop":"value"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"inside","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"inside","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"map","children":[{"default":"'map'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":"''","prop":"map"},{"type":["boolean","string"],"default":false,"prop":"roam"},{"type":"Array","prop":"center"},{"default":0.75,"prop":"aspectScale"},{"type":"Array","prop":"boundingCoords"},{"default":1,"prop":"zoom"},{"type":"Object","isObject":true,"prop":"scaleLimit","children":[{"type":"number","prop":"min"},{"type":"number","prop":"max"}]},{"type":"Object","prop":"nameMap"},{"default":"'name'","prop":"nameProperty"},{"type":["boolean","string"],"default":false,"prop":"selectedMode"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"'#eee'","prop":"areaColor"},{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"'#eee'","prop":"areaColor"},{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'auto'","prop":"left"},{"type":["string","number"],"default":"'auto'","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"},{"type":"Array","prop":"layoutCenter"},{"type":["number","string"],"prop":"layoutSize"},{"type":"number","prop":"geoIndex"},{"default":"'sum'","prop":"mapValueCalculation"},{"type":"boolean","prop":"showLegendSymbol"},{"default":"'column'","prop":"seriesLayoutBy"},{"default":0,"prop":"datasetIndex"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"default":false,"prop":"selected"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","isObject":true,"prop":"areaColor","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'bottom'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"areaColor"},{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":false,"prop":"silent"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"parallel","children":[{"default":"'parallel'","prop":"type"},{"type":"string","prop":"id"},{"default":"'parallel'","prop":"coordinateSystem"},{"default":0,"prop":"parallelIndex"},{"type":"string","prop":"name"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":2,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0.45,"prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":2,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0.45,"prop":"opacity"}]}]},{"default":0.05,"prop":"inactiveOpacity"},{"default":1,"prop":"activeOpacity"},{"default":true,"prop":"realtime"},{"type":["boolean","number"],"default":false,"prop":"smooth"},{"default":500,"prop":"progressive"},{"default":3000,"prop":"progressiveThreshold"},{"default":"sequential","prop":"progressiveChunkMode"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"Array","prop":"value"},{"type":"Object","prop":"lineStyle"},{"type":"Color","default":"\"#000\"","prop":"color"},{"default":2,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0.45,"prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":2,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0.45,"prop":"opacity"}]}]}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"linear","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"lines","children":[{"default":"'lines'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":"'geo'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"default":0,"prop":"geoIndex"},{"default":false,"prop":"polyline"},{"type":"Object","isObject":true,"prop":"effect","children":[{"default":false,"prop":"show"},{"default":4,"prop":"period"},{"type":["number","Function"],"prop":"delay"},{"default":0,"prop":"constantSpeed"},{"default":"'circle'","prop":"symbol"},{"type":["Array","number"],"default":3,"prop":"symbolSize"},{"type":"Color","prop":"color"},{"default":0.2,"prop":"trailLength"},{"default":true,"prop":"loop"}]},{"default":true,"prop":"large"},{"default":2000,"prop":"largeThreshold"},{"type":["string","Array"],"default":"'none'","prop":"symbol"},{"type":["number","Array"],"default":10,"prop":"symbolSize"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'self-adaptive'","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0.5,"prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"default":400,"prop":"progressive"},{"default":3000,"prop":"progressiveThreshold"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"Array","prop":"coords"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":true,"prop":"clip"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"arrayItemType":"graph","children":[{"default":"'graph'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":true,"prop":"legendHoverLink"},{"type":"string","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"default":0,"prop":"polarIndex"},{"default":0,"prop":"geoIndex"},{"default":0,"prop":"calendarIndex"},{"type":"boolean","prop":"hoverAnimation"},{"type":"Array","prop":"center"},{"default":1,"prop":"zoom"},{"default":"'none'","prop":"layout"},{"type":"Object","isObject":true,"prop":"circular","children":[{"default":false,"prop":"rotateLabel"}]},{"type":"Object","isObject":true,"prop":"force","children":[{"type":"string","prop":"initLayout"},{"type":["Array","number"],"default":50,"prop":"repulsion"},{"default":0.1,"prop":"gravity"},{"type":["Array","number"],"default":30,"prop":"edgeLength"},{"default":true,"prop":"layoutAnimation"},{"default":0.6,"prop":"friction"}]},{"type":["boolean","string"],"default":false,"prop":"roam"},{"default":0.6,"prop":"nodeScaleRatio"},{"default":false,"prop":"draggable"},{"type":["string","Function"],"default":"'circle'","prop":"symbol"},{"type":["number","Array","Function"],"default":10,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"focusNodeAdjacency"},{"type":["Array","string"],"default":"['none', 'none']","prop":"edgeSymbol"},{"type":["Array","number"],"default":10,"prop":"edgeSymbolSize"},{"default":"'pointer'","prop":"cursor"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":["Color","Function"],"prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#aaa'","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0.5,"prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"edgeLabel","children":[{"default":false,"prop":"show"},{"default":"'middle'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"edgeLabel","children":[{"default":false,"prop":"show"},{"default":"'middle'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Array","isArray":true,"prop":"categories","children":[{"type":"string","prop":"name"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"inside","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"boolean","prop":"fixed"},{"type":["number","Array"],"prop":"value"},{"type":"number","prop":"category"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Array","prop":"nodes"},{"type":"Array","isArray":true,"prop":"links","children":[{"type":["string","number"],"prop":"source"},{"type":["string","number"],"prop":"target"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'middle'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'middle'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":["Array","string"],"prop":"symbol"},{"type":["Array","string"],"prop":"symbolSize"},{"default":false,"prop":"ignoreForceLayout"}]},{"type":"Array","prop":"edges"},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'center'","prop":"left"},{"type":["string","number"],"default":"'middle'","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"},{"type":["string","number"],"default":"auto","prop":"width"},{"type":["string","number"],"default":"auto","prop":"height"},{"default":false,"prop":"silent"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"sankey","children":[{"default":"'sankey'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"5%","prop":"left"},{"type":["string","number"],"default":"5%","prop":"top"},{"type":["string","number"],"default":"20%","prop":"right"},{"type":["string","number"],"default":"5%","prop":"bottom"},{"type":["string","number"],"prop":"width"},{"type":["string","number"],"prop":"height"},{"default":20,"prop":"nodeWidth"},{"default":8,"prop":"nodeGap"},{"default":"'justify'","prop":"nodeAlign"},{"default":32,"prop":"layoutIterations"},{"default":"'horizontal'","prop":"orient"},{"default":true,"prop":"draggable"},{"type":["boolean","string"],"default":false,"prop":"focusNodeAdjacency"},{"type":"Array","isArray":true,"prop":"levels","children":[{"type":"number","prop":"depth"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"'#314656'\"","prop":"color"},{"default":0.2,"prop":"opacity"},{"default":0.5,"prop":"curveness"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'right'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'#aaa'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"'#314656'\"","prop":"color"},{"default":0.2,"prop":"opacity"},{"default":0.5,"prop":"curveness"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"'#314656'\"","prop":"color"},{"default":0.2,"prop":"opacity"},{"default":0.5,"prop":"curveness"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"type":"number","prop":"depth"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Array","prop":"nodes"},{"type":"Array","isArray":true,"prop":"links","children":[{"type":"string","prop":"source"},{"type":"string","prop":"target"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"'#314656'\"","prop":"color"},{"default":0.2,"prop":"opacity"},{"default":0.5,"prop":"curveness"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"'#314656'\"","prop":"color"},{"default":0.2,"prop":"opacity"},{"default":0.5,"prop":"curveness"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]}]}]},{"type":"Array","prop":"edges"},{"default":false,"prop":"silent"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"'linear'","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"funnel","children":[{"default":"'funnel'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":0,"prop":"min"},{"default":100,"prop":"max"},{"type":["number","string"],"default":"'0%'","prop":"minSize"},{"type":["number","string"],"default":"'100%'","prop":"maxSize"},{"type":["string","Function"],"default":"'descending'","prop":"sort"},{"default":0,"prop":"gap"},{"default":true,"prop":"legendHoverLink"},{"default":"'center'","prop":"funnelAlign"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'outside'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"labelLine","children":[{"type":"boolean","prop":"show"},{"type":"number","prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":["Color","Function"],"prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"labelLine","children":[{"type":"boolean","prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":80,"prop":"left"},{"type":["string","number"],"default":60,"prop":"top"},{"type":["string","number"],"default":80,"prop":"right"},{"type":["string","number"],"default":60,"prop":"bottom"},{"type":["string","number"],"default":"'auto'","prop":"width"},{"type":["string","number"],"default":"'auto'","prop":"height"},{"default":"'column'","prop":"seriesLayoutBy"},{"default":0,"prop":"datasetIndex"},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'outside'","prop":"position"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"labelLine","children":[{"type":"boolean","prop":"show"},{"type":"number","prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"labelLine","children":[{"type":"boolean","prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"gauge","children":[{"default":"'gauge'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"type":["number","string"],"default":"'75%'","prop":"radius"},{"default":true,"prop":"legendHoverLink"},{"default":225,"prop":"startAngle"},{"default":-45,"prop":"endAngle"},{"default":true,"prop":"clockwise"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"}]},{"default":0,"prop":"min"},{"default":100,"prop":"max"},{"default":10,"prop":"splitNumber"},{"type":"Object","isObject":true,"prop":"axisLine","children":[{"default":true,"prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Array","prop":"color"},{"default":30,"prop":"width"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"splitLine","children":[{"default":true,"prop":"show"},{"type":["number","string"],"default":30,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#eee","prop":"color"},{"default":2,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisTick","children":[{"default":true,"prop":"show"},{"default":5,"prop":"splitNumber"},{"type":["number","string"],"default":8,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#eee","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisLabel","children":[{"default":true,"prop":"show"},{"default":5,"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"pointer","children":[{"default":true,"prop":"show"},{"type":["string","number"],"default":"'80%'","prop":"length"},{"default":8,"prop":"width"}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"'auto'","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"*","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"title","children":[{"default":true,"prop":"show"},{"type":"Array","default":"[0, '-40%']","prop":"offsetCenter"},{"type":"Color","default":"'#333'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":15,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"detail","children":[{"default":true,"prop":"show"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"default":0,"prop":"borderWidth"},{"type":["Function","string"],"prop":"formatter"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"type":"Array","default":"[0, '40%']","prop":"offsetCenter"},{"type":"Color","default":"'auto'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":15,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"Color","default":"'auto'","prop":"color"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"pictorialBar","children":[{"default":"'pictorialBar'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":true,"prop":"legendHoverLink"},{"default":"'cartesian2d'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"default":"'pointer'","prop":"cursor"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":["number","string"],"prop":"barWidth"},{"type":["number","string"],"prop":"barMaxWidth"},{"type":["number","string"],"prop":"barMinWidth"},{"default":0,"prop":"barMinHeight"},{"default":"-100%","prop":"barGap"},{"default":"'20%'","prop":"barCategoryGap"},{"default":"'circle'","prop":"symbol"},{"type":["number","Array"],"default":"['100%', '100%']","prop":"symbolSize"},{"default":"'start'","prop":"symbolPosition"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"number","prop":"symbolRotate"},{"type":["boolean","number","string"],"prop":"symbolRepeat"},{"default":"'start'","prop":"symbolRepeatDirection"},{"type":["number","string"],"prop":"symbolMargin"},{"default":false,"prop":"symbolClip"},{"type":"number","prop":"symbolBoundingData"},{"default":400,"prop":"symbolPatternSize"},{"default":false,"isObject":true,"prop":"hoverAnimation","children":[{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"default":"'circle'","prop":"symbol"},{"type":["number","Array"],"default":"['100%', '100%']","prop":"symbolSize"},{"default":"'start'","prop":"symbolPosition"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"number","prop":"symbolRotate"},{"type":["boolean","number","string"],"prop":"symbolRepeat"},{"default":"'start'","prop":"symbolRepeatDirection"},{"type":["number","string"],"prop":"symbolMargin"},{"default":false,"prop":"symbolClip"},{"type":"number","prop":"symbolBoundingData"},{"default":400,"prop":"symbolPatternSize"},{"type":"number","prop":"z"},{"default":false,"prop":"hoverAnimation"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"inside","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","isObject":true,"prop":"animationEasingUpdate","children":[{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"themeRiver","children":[{"default":"'themeRiver'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"5%","prop":"left"},{"type":["string","number"],"default":"5%","prop":"top"},{"type":["string","number"],"default":"5%","prop":"right"},{"type":["string","number"],"default":"5%","prop":"bottom"},{"type":["string","number"],"prop":"width"},{"type":["string","number"],"prop":"height"},{"default":"\"single\"","prop":"coordinateSystem"},{"type":"Array","default":"[\"10%\", \"10%\"]","prop":"boundaryGap"},{"default":0,"prop":"singleAxisIndex"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'left'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"'#000'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":11,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'left'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"'#000'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":11,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"default":20,"prop":"shadowBlur"},{"type":"Color","default":"'rgba(0,0,0,0.8)'","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"date"},{"type":"number","prop":"value"},{"type":"string","prop":"name"}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"custom","children":[{"default":"'custom'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":true,"prop":"legendHoverLink"},{"default":"'cartesian2d'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"default":0,"prop":"polarIndex"},{"default":0,"prop":"geoIndex"},{"default":0,"prop":"calendarIndex"},{"type":"Function","isObject":true,"prop":"renderItem","children":[{"type":"*","isObject":true,"prop":"arguments","children":[{"type":"Object","prop":"params"},{"type":"Object","isObject":true,"prop":"api","children":[{"type":"Function","prop":"value"},{"type":"Function","prop":"coord"},{"type":"Function","prop":"size"},{"type":"Function","prop":"style"},{"type":"Function","prop":"styleEmphasis"},{"type":"Function","prop":"visual"},{"type":"Function","prop":"barLayout"},{"type":"Function","prop":"currentSeriesIndices"},{"type":"Function","prop":"font"},{"type":"Function","prop":"getWidth"},{"type":"Function","prop":"getHeight"},{"type":"Function","prop":"getZr"},{"type":"Function","prop":"getDevicePixelRatio"}]}]},{"type":"Object","prop":"return"},{"type":"Object","isObject":true,"prop":"return_group","children":[{"default":"group","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":0,"prop":"width"},{"default":0,"prop":"height"},{"default":false,"prop":"diffChildrenByName"},{"type":"Array","prop":"children"},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_path","children":[{"default":"path","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"type":"string","prop":"pathData"},{"type":"string","prop":"d"},{"default":"'center'","prop":"layout"},{"default":0,"prop":"x"},{"type":"numbr","default":0,"prop":"y"},{"default":0,"prop":"width"},{"type":"numbr","default":0,"prop":"height"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_image","children":[{"default":"image","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"style","children":[{"type":"string","prop":"image"},{"default":0,"prop":"x"},{"type":"numbr","default":0,"prop":"y"},{"default":0,"prop":"width"},{"type":"numbr","default":0,"prop":"height"},{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_text","children":[{"default":"text","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"''","prop":"text"},{"default":0,"prop":"x"},{"type":"numbr","default":0,"prop":"y"},{"type":"string","prop":"font"},{"default":"'left'","prop":"textAlign"},{"type":"string","prop":"textVerticalAlign"},{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_rect","children":[{"default":"rect","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"x"},{"type":"numbr","default":0,"prop":"y"},{"default":0,"prop":"width"},{"type":"numbr","default":0,"prop":"height"},{"type":"Array","prop":"r"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_circle","children":[{"default":"circle","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"cx"},{"type":"numbr","default":0,"prop":"cy"},{"default":0,"prop":"r"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_ring","children":[{"default":"ring","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"cx"},{"type":"numbr","default":0,"prop":"cy"},{"default":0,"prop":"r"},{"default":0,"prop":"r0"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_sector","children":[{"default":"sector","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"cx"},{"type":"numbr","default":0,"prop":"cy"},{"default":0,"prop":"r"},{"default":0,"prop":"r0"},{"default":0,"prop":"startAngle"},{"type":"number","default":"Math.PI * 2","prop":"endAngle"},{"default":true,"prop":"clockwise"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_arc","children":[{"default":"arc","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"cx"},{"type":"numbr","default":0,"prop":"cy"},{"default":0,"prop":"r"},{"default":0,"prop":"r0"},{"default":0,"prop":"startAngle"},{"type":"number","default":"Math.PI * 2","prop":"endAngle"},{"default":true,"prop":"clockwise"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"type":"string","prop":"fill"},{"default":"\"#000\"","prop":"stroke"},{"default":1,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_polygon","children":[{"default":"polygon","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"type":"Array","prop":"points"},{"type":["number","string"],"default":"undefined","prop":"smooth"},{"default":false,"prop":"smoothConstraint"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_polyline","children":[{"default":"polyline","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"type":"Array","prop":"points"},{"type":["number","string"],"default":"undefined","prop":"smooth"},{"default":false,"prop":"smoothConstraint"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"type":"string","prop":"fill"},{"default":"\"#000\"","prop":"stroke"},{"default":5,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_line","children":[{"default":"line","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"x1"},{"default":0,"prop":"y1"},{"default":0,"prop":"x2"},{"default":0,"prop":"y2"},{"default":1,"prop":"percent"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"type":"string","prop":"fill"},{"default":"\"#000\"","prop":"stroke"},{"default":5,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_bezierCurve","children":[{"default":"bezierCurve","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"x1"},{"default":0,"prop":"y1"},{"default":0,"prop":"x2"},{"default":0,"prop":"y2"},{"default":0,"prop":"cpx1"},{"default":0,"prop":"cpy1"},{"type":"number","prop":"cpx2"},{"type":"number","prop":"cpy2"},{"default":1,"prop":"percent"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"default":"'column'","prop":"seriesLayoutBy"},{"default":0,"prop":"datasetIndex"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"default":false,"prop":"clip"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]}]},{"type":"Array","prop":"color"},{"type":"Color","prop":"backgroundColor"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"default":"'source-over'","prop":"blendMode"},{"default":3000,"prop":"hoverLayerThreshold"},{"default":false,"prop":"useUTC"}]}
\ No newline at end of file
diff --git a/en/documents/option-parts/option-outline.json b/en/documents/option-parts/option-outline.json
index 35c44bc..3023e25 100644
--- a/en/documents/option-parts/option-outline.json
+++ b/en/documents/option-parts/option-outline.json
@@ -1 +1 @@
-{"children":[{"type":"Object","isObject":true,"prop":"title","children":[{"type":"string","prop":"id"},{"default":true,"prop":"show"},{"default":"''","prop":"text"},{"default":"''","prop":"link"},{"default":"'blank'","prop":"target"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":18,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":"''","prop":"subtext"},{"default":"''","prop":"sublink"},{"default":"'blank'","prop":"subtarget"},{"type":"Object","isObject":true,"prop":"subtextStyle","children":[{"type":"Color","default":"'#aaa'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":"'auto'","prop":"textAlign"},{"default":"'auto'","prop":"textVerticalAlign"},{"default":false,"prop":"triggerEvent"},{"type":["number","Array"],"default":5,"prop":"padding"},{"default":10,"prop":"itemGap"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'auto'","prop":"left"},{"type":["string","number"],"default":"'auto'","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"},{"type":"Color","default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'#ccc'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"type":["number","Array"],"default":0,"prop":"borderRadius"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"legend","children":[{"type":"string","prop":"type"},{"type":"string","prop":"id"},{"default":true,"prop":"show"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'auto'","prop":"left"},{"type":["string","number"],"default":"'auto'","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"},{"type":["string","number"],"default":"'auto'","prop":"width"},{"type":["string","number"],"default":"'auto'","prop":"height"},{"default":"'horizontal'","prop":"orient"},{"default":"'auto'","prop":"align"},{"type":["number","Array"],"default":5,"prop":"padding"},{"default":10,"prop":"itemGap"},{"default":25,"prop":"itemWidth"},{"default":14,"prop":"itemHeight"},{"default":true,"prop":"symbolKeepAspect"},{"type":["string","Function"],"prop":"formatter"},{"type":["string","boolean"],"default":true,"prop":"selectedMode"},{"type":"Color","default":"'#ccc'","prop":"inactiveColor"},{"type":"Object","prop":"selected"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","prop":"tooltip"},{"type":"string","prop":"icon"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"string","prop":"icon"},{"type":"Object","prop":"textStyle"}]},{"type":"Color","default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'#ccc'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"type":["number","Array"],"default":0,"prop":"borderRadius"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0,"prop":"scrollDataIndex"},{"default":5,"prop":"pageButtonItemGap"},{"type":"number","prop":"pageButtonGap"},{"default":"'end'","prop":"pageButtonPosition"},{"type":["string","Function"],"default":"'{current}/{total}'","prop":"pageFormatter"},{"type":"Object","isObject":true,"prop":"pageIcons","children":[{"type":"Array","prop":"horizontal"},{"type":"Array","prop":"vertical"}]},{"default":"'#2f4554'","prop":"pageIconColor"},{"default":"'#aaa'","prop":"pageIconInactiveColor"},{"type":["number","Array"],"default":15,"prop":"pageIconSize"},{"type":"Object","isObject":true,"prop":"pageTextStyle","children":[{"type":"Color","default":"#333","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"boolean","prop":"animation"},{"default":800,"prop":"animationDurationUpdate"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"selectorLabel","children":[{"default":true,"prop":"show"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":["boolean","Array"],"default":false,"prop":"selector"},{"type":"Object","isObject":true,"prop":"selectorLabel","children":[{"default":true,"prop":"show"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":"'auto'","prop":"selectorPosition"},{"default":7,"prop":"selectorItemGap"},{"default":10,"prop":"selectorButtonGap"}]},{"type":"Object","isObject":true,"prop":"grid","children":[{"type":"string","prop":"id"},{"default":false,"prop":"show"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'10%'","prop":"left"},{"type":["string","number"],"default":60,"prop":"top"},{"type":["string","number"],"default":"'10%'","prop":"right"},{"type":["string","number"],"default":60,"prop":"bottom"},{"type":["string","number"],"default":"'auto'","prop":"width"},{"type":["string","number"],"default":"'auto'","prop":"height"},{"default":false,"prop":"containLabel"},{"type":"Color","default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'#ccc'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"Object","isObject":true,"prop":"tooltip","children":[{"default":true,"prop":"show"},{"default":"'item'","prop":"trigger"},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"default":"'line'","prop":"type"},{"default":"'auto'","prop":"axis"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"crossStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"dashed","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":200,"prop":"animationDurationUpdate"},{"default":"exponentialOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"xAxis","children":[{"type":"string","prop":"id"},{"default":true,"prop":"show"},{"default":0,"prop":"gridIndex"},{"type":"string","prop":"position"},{"default":0,"prop":"offset"},{"default":"'category'","prop":"type"},{"type":"string","prop":"name"},{"default":"'end'","prop":"nameLocation"},{"type":"Object","isObject":true,"prop":"nameTextStyle","children":[{"type":"Color","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":15,"prop":"nameGap"},{"type":"number","prop":"nameRotate"},{"default":false,"prop":"inverse"},{"type":["boolean","Array"],"prop":"boundaryGap"},{"type":["number","string","Function"],"prop":"min"},{"type":["number","string","Function"],"prop":"max"},{"default":false,"prop":"scale"},{"default":5,"prop":"splitNumber"},{"default":0,"prop":"minInterval"},{"type":"number","prop":"maxInterval"},{"type":"number","prop":"interval"},{"default":10,"prop":"logBase"},{"default":false,"prop":"silent"},{"default":false,"prop":"triggerEvent"},{"type":"Object","isObject":true,"prop":"axisLine","children":[{"default":true,"prop":"show"},{"default":true,"prop":"onZero"},{"type":"number","prop":"onZeroAxisIndex"},{"type":["string","Array"],"default":"'none'","prop":"symbol"},{"type":"Array","default":"[10, 15]","prop":"symbolSize"},{"type":["Array","number"],"default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisTick","children":[{"default":true,"prop":"show"},{"default":false,"prop":"alignWithLabel"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":5,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorTick","children":[{"default":false,"prop":"show"},{"default":5,"prop":"splitNumber"},{"default":3,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisLabel","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":0,"prop":"rotate"},{"default":8,"prop":"margin"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","prop":"showMinLabel"},{"type":"boolean","prop":"showMaxLabel"},{"type":["Color","Function"],"prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"splitLine","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":["Array","string"],"default":"['#ccc']","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorSplitLine","children":[{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#eee'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"splitArea","children":[{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Array","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"value"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"default":false,"prop":"show"},{"default":"'line'","prop":"type"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"triggerTooltip"},{"type":"number","prop":"value"},{"type":"boolean","prop":"status"},{"type":"Object","isObject":true,"prop":"handle","children":[{"default":false,"prop":"show"},{"type":"*","prop":"icon"},{"type":["number","Array"],"default":45,"prop":"size"},{"default":50,"prop":"margin"},{"default":"'#333'","prop":"color"},{"default":40,"prop":"throttle"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":2,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]}]},{"default":0,"prop":"zlevel"},{"default":0,"prop":"z"}]},{"type":"Object","isObject":true,"prop":"yAxis","children":[{"type":"string","prop":"id"},{"default":true,"prop":"show"},{"default":0,"prop":"gridIndex"},{"type":"string","prop":"position"},{"default":0,"prop":"offset"},{"default":"'value'","prop":"type"},{"type":"string","prop":"name"},{"default":"'end'","prop":"nameLocation"},{"type":"Object","isObject":true,"prop":"nameTextStyle","children":[{"type":"Color","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":15,"prop":"nameGap"},{"type":"number","prop":"nameRotate"},{"default":false,"prop":"inverse"},{"type":["boolean","Array"],"prop":"boundaryGap"},{"type":["number","string","Function"],"prop":"min"},{"type":["number","string","Function"],"prop":"max"},{"default":false,"prop":"scale"},{"default":5,"prop":"splitNumber"},{"default":0,"prop":"minInterval"},{"type":"number","prop":"maxInterval"},{"type":"number","prop":"interval"},{"default":10,"prop":"logBase"},{"default":false,"prop":"silent"},{"default":false,"prop":"triggerEvent"},{"type":"Object","isObject":true,"prop":"axisLine","children":[{"default":true,"prop":"show"},{"default":true,"prop":"onZero"},{"type":"number","prop":"onZeroAxisIndex"},{"type":["string","Array"],"default":"'none'","prop":"symbol"},{"type":"Array","default":"[10, 15]","prop":"symbolSize"},{"type":["Array","number"],"default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisTick","children":[{"default":true,"prop":"show"},{"default":false,"prop":"alignWithLabel"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":5,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorTick","children":[{"default":false,"prop":"show"},{"default":5,"prop":"splitNumber"},{"default":3,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisLabel","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":0,"prop":"rotate"},{"default":8,"prop":"margin"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","prop":"showMinLabel"},{"type":"boolean","prop":"showMaxLabel"},{"type":["Color","Function"],"prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"splitLine","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":["Array","string"],"default":"['#ccc']","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorSplitLine","children":[{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#eee'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"splitArea","children":[{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Array","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"value"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"default":false,"prop":"show"},{"default":"'line'","prop":"type"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"triggerTooltip"},{"type":"number","prop":"value"},{"type":"boolean","prop":"status"},{"type":"Object","isObject":true,"prop":"handle","children":[{"default":false,"prop":"show"},{"type":"*","prop":"icon"},{"type":["number","Array"],"default":45,"prop":"size"},{"default":50,"prop":"margin"},{"default":"'#333'","prop":"color"},{"default":40,"prop":"throttle"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":2,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]}]},{"default":0,"prop":"zlevel"},{"default":0,"prop":"z"}]},{"type":"Object","isObject":true,"prop":"polar","children":[{"type":"string","prop":"id"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":"Array","default":"['50%', '50%']","prop":"center"},{"type":["number","string","Array"],"prop":"radius"},{"type":"Object","isObject":true,"prop":"tooltip","children":[{"default":true,"prop":"show"},{"default":"'item'","prop":"trigger"},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"default":"'line'","prop":"type"},{"default":"'auto'","prop":"axis"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"crossStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"dashed","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":200,"prop":"animationDurationUpdate"},{"default":"exponentialOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"radiusAxis","children":[{"type":"string","prop":"id"},{"default":0,"prop":"polarIndex"},{"default":"'value'","prop":"type"},{"type":"string","prop":"name"},{"default":"'end'","prop":"nameLocation"},{"type":"Object","isObject":true,"prop":"nameTextStyle","children":[{"type":"Color","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":15,"prop":"nameGap"},{"type":"number","prop":"nameRotate"},{"default":false,"prop":"inverse"},{"type":["boolean","Array"],"prop":"boundaryGap"},{"type":["number","string","Function"],"prop":"min"},{"type":["number","string","Function"],"prop":"max"},{"default":false,"prop":"scale"},{"default":5,"prop":"splitNumber"},{"default":0,"prop":"minInterval"},{"type":"number","prop":"maxInterval"},{"type":"number","prop":"interval"},{"default":10,"prop":"logBase"},{"default":false,"prop":"silent"},{"default":false,"prop":"triggerEvent"},{"type":"Object","isObject":true,"prop":"axisLine","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'none'","prop":"symbol"},{"type":"Array","default":"[10, 15]","prop":"symbolSize"},{"type":["Array","number"],"default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisTick","children":[{"default":true,"prop":"show"},{"default":false,"prop":"alignWithLabel"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":5,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorTick","children":[{"default":false,"prop":"show"},{"default":5,"prop":"splitNumber"},{"default":3,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisLabel","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":0,"prop":"rotate"},{"default":8,"prop":"margin"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","prop":"showMinLabel"},{"type":"boolean","prop":"showMaxLabel"},{"type":["Color","Function"],"prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"splitLine","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":["Array","string"],"default":"['#ccc']","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorSplitLine","children":[{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#eee'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"splitArea","children":[{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Array","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"value"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"default":false,"prop":"show"},{"default":"'line'","prop":"type"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"triggerTooltip"},{"type":"number","prop":"value"},{"type":"boolean","prop":"status"},{"type":"Object","isObject":true,"prop":"handle","children":[{"default":false,"prop":"show"},{"type":"*","prop":"icon"},{"type":["number","Array"],"default":45,"prop":"size"},{"default":50,"prop":"margin"},{"default":"'#333'","prop":"color"},{"default":40,"prop":"throttle"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":2,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]}]},{"default":0,"prop":"zlevel"},{"default":0,"prop":"z"}]},{"type":"Object","isObject":true,"prop":"angleAxis","children":[{"type":"string","prop":"id"},{"default":0,"prop":"polarIndex"},{"default":90,"prop":"startAngle"},{"default":true,"prop":"clockwise"},{"default":"'category'","prop":"type"},{"type":["boolean","Array"],"prop":"boundaryGap"},{"type":["number","string","Function"],"prop":"min"},{"type":["number","string","Function"],"prop":"max"},{"default":false,"prop":"scale"},{"default":5,"prop":"splitNumber"},{"default":0,"prop":"minInterval"},{"type":"number","prop":"maxInterval"},{"type":"number","prop":"interval"},{"default":10,"prop":"logBase"},{"default":false,"prop":"silent"},{"default":false,"prop":"triggerEvent"},{"type":"Object","isObject":true,"prop":"axisLine","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'none'","prop":"symbol"},{"type":"Array","default":"[10, 15]","prop":"symbolSize"},{"type":["Array","number"],"default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisTick","children":[{"default":true,"prop":"show"},{"default":false,"prop":"alignWithLabel"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":5,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorTick","children":[{"default":false,"prop":"show"},{"default":5,"prop":"splitNumber"},{"default":3,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisLabel","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":8,"prop":"margin"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","prop":"showMinLabel"},{"type":"boolean","prop":"showMaxLabel"},{"type":["Color","Function"],"prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"splitLine","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":["Array","string"],"default":"['#ccc']","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorSplitLine","children":[{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#eee'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"splitArea","children":[{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Array","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"value"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"default":false,"prop":"show"},{"default":"'line'","prop":"type"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"triggerTooltip"},{"type":"number","prop":"value"},{"type":"boolean","prop":"status"},{"type":"Object","isObject":true,"prop":"handle","children":[{"default":false,"prop":"show"},{"type":"*","prop":"icon"},{"type":["number","Array"],"default":45,"prop":"size"},{"default":50,"prop":"margin"},{"default":"'#333'","prop":"color"},{"default":40,"prop":"throttle"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":2,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]}]},{"default":0,"prop":"zlevel"},{"default":0,"prop":"z"}]},{"type":"Object","isObject":true,"prop":"radar","children":[{"type":"string","prop":"id"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":"Array","default":"['50%', '50%']","prop":"center"},{"type":["number","string","Array"],"default":"75%","prop":"radius"},{"default":90,"prop":"startAngle"},{"type":"Object","isObject":true,"prop":"name","children":[{"default":true,"prop":"show"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":15,"prop":"nameGap"},{"default":5,"prop":"splitNumber"},{"default":"'polygon'","prop":"shape"},{"default":false,"prop":"scale"},{"default":false,"prop":"silent"},{"default":false,"prop":"triggerEvent"},{"type":"Object","isObject":true,"prop":"axisLine","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'none'","prop":"symbol"},{"type":"Array","default":"[10, 15]","prop":"symbolSize"},{"type":["Array","number"],"default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisTick","children":[{"default":true,"prop":"show"},{"default":5,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisLabel","children":[{"default":true,"prop":"show"},{"default":0,"prop":"rotate"},{"default":8,"prop":"margin"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","prop":"showMinLabel"},{"type":"boolean","prop":"showMaxLabel"},{"type":["Color","Function"],"prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"splitLine","children":[{"default":true,"prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":["Array","string"],"default":"['#ccc']","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"splitArea","children":[{"default":true,"prop":"show"},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Array","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"indicator","children":[{"type":"string","prop":"name"},{"type":"number","prop":"max"},{"type":"number","prop":"min"}]},{"type":"string","prop":"color"}]},{"type":"Array","isArray":true,"prop":"dataZoom","children":[{"type":"Object","isObject":true,"arrayItemType":"inside","children":[{"default":"'inside'","prop":"type"},{"type":"string","prop":"id"},{"default":false,"prop":"disabled"},{"type":["number","Array"],"prop":"xAxisIndex"},{"type":["number","Array"],"prop":"yAxisIndex"},{"type":["number","Array"],"prop":"radiusAxisIndex"},{"type":["number","Array"],"prop":"angleAxisIndex"},{"default":"'filter'","prop":"filterMode"},{"default":0,"prop":"start"},{"default":100,"prop":"end"},{"type":["number","string","Date"],"prop":"startValue"},{"type":["number","string","Date"],"prop":"endValue"},{"type":"number","prop":"minSpan"},{"type":"number","prop":"maxSpan"},{"type":["number","string","Date"],"prop":"minValueSpan"},{"type":["number","string","Date"],"prop":"maxValueSpan"},{"type":"string","prop":"orient"},{"default":false,"prop":"zoomLock"},{"default":100,"prop":"throttle"},{"type":"Array","prop":"rangeMode"},{"type":["boolean","string"],"default":true,"prop":"zoomOnMouseWheel"},{"type":["boolean","string"],"default":true,"prop":"moveOnMouseMove"},{"type":["boolean","string"],"default":false,"prop":"moveOnMouseWheel"},{"default":true,"prop":"preventDefaultMouseMove"}]},{"type":"Object","isObject":true,"arrayItemType":"slider","children":[{"default":"'slider'","prop":"type"},{"type":"string","prop":"id"},{"default":true,"prop":"show"},{"type":"Color","default":"'rgba(47,69,84,0)'","prop":"backgroundColor"},{"type":"Object","isObject":true,"prop":"dataBackground","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#2f4554","prop":"color"},{"default":0.5,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0.3,"prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Color","default":"rgba(47,69,84,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0.3,"prop":"opacity"}]}]},{"type":"Color","default":"'rgba(47,69,84,0.25)'","prop":"fillerColor"},{"type":"Color","default":"'#ddd'","prop":"borderColor"},{"type":"string","prop":"handleIcon"},{"type":["number","string"],"default":"'100%'","prop":"handleSize"},{"type":"Object","isObject":true,"prop":"handleStyle","children":[{"type":"Color","default":"#a7b7cc","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":["number","string"],"default":"'auto'","prop":"labelPrecision"},{"type":["string","Function"],"prop":"labelFormatter"},{"default":true,"prop":"showDetail"},{"default":"'auto'","prop":"showDataShadow"},{"default":true,"prop":"realtime"},{"type":"*","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"#333","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":["number","Array"],"prop":"xAxisIndex"},{"type":["number","Array"],"prop":"yAxisIndex"},{"type":["number","Array"],"prop":"radiusAxisIndex"},{"type":["number","Array"],"prop":"angleAxisIndex"},{"default":"'filter'","prop":"filterMode"},{"default":0,"prop":"start"},{"default":100,"prop":"end"},{"type":["number","string","Date"],"prop":"startValue"},{"type":["number","string","Date"],"prop":"endValue"},{"type":"number","prop":"minSpan"},{"type":"number","prop":"maxSpan"},{"type":["number","string","Date"],"prop":"minValueSpan"},{"type":["number","string","Date"],"prop":"maxValueSpan"},{"type":"string","prop":"orient"},{"default":false,"prop":"zoomLock"},{"default":100,"prop":"throttle"},{"type":"Array","prop":"rangeMode"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'auto'","prop":"left"},{"type":["string","number"],"default":"'auto'","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"}]}]},{"type":"Array","isArray":true,"prop":"visualMap","children":[{"type":"Object","isObject":true,"arrayItemType":"continuous","children":[{"default":"continuous","prop":"type"},{"type":"string","prop":"id"},{"type":"number","prop":"min"},{"type":"number","prop":"max"},{"type":"Array","prop":"range"},{"default":false,"prop":"calculable"},{"default":true,"prop":"realtime"},{"default":false,"prop":"inverse"},{"default":0,"prop":"precision"},{"default":20,"prop":"itemWidth"},{"default":140,"prop":"itemHeight"},{"default":"'auto'","prop":"align"},{"type":"Array","prop":"text"},{"default":10,"prop":"textGap"},{"default":true,"prop":"show"},{"type":"string","prop":"dimension"},{"type":["number","Array"],"prop":"seriesIndex"},{"default":true,"prop":"hoverLink"},{"type":"Object","prop":"inRange"},{"type":"Object","prop":"outOfRange"},{"type":"Object","isObject":true,"prop":"controller","children":[{"type":"Object","prop":"inRange"},{"type":"Object","prop":"outOfRange"}]},{"default":0,"prop":"zlevel"},{"default":4,"prop":"z"},{"type":["string","number"],"default":0,"prop":"left"},{"type":["string","number"],"default":"auto","prop":"top"},{"type":["string","number"],"default":"auto","prop":"right"},{"type":["string","number"],"default":0,"prop":"bottom"},{"default":"'vertical'","prop":"orient"},{"type":["number","Array"],"default":5,"prop":"padding"},{"type":"Color","default":"'rgba(0,0,0,0)'","prop":"backgroundColor"},{"type":"Color","default":"'#ccc'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":"Array","default":"['#bf444c', '#d88273', '#f6efa6']","prop":"color"},{"type":"*","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"#333","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"arrayItemType":"piecewise","children":[{"default":"piecewise","prop":"type"},{"type":"string","prop":"id"},{"default":5,"prop":"splitNumber"},{"type":"Array","prop":"pieces"},{"type":"Array","prop":"categories"},{"type":"number","prop":"min"},{"type":"number","prop":"max"},{"type":"boolean","prop":"minOpen"},{"type":"boolean","prop":"maxOpen"},{"default":"'multiple'","prop":"selectedMode"},{"default":false,"prop":"inverse"},{"type":"number","prop":"precision"},{"default":20,"prop":"itemWidth"},{"default":14,"prop":"itemHeight"},{"default":"'auto'","prop":"align"},{"type":"Array","prop":"text"},{"default":10,"prop":"textGap"},{"type":"boolean","prop":"showLabel"},{"type":"*","prop":"itemGap = 10"},{"default":"'roundRect'","prop":"itemSymbol"},{"default":true,"prop":"show"},{"type":"string","prop":"dimension"},{"type":["number","Array"],"prop":"seriesIndex"},{"default":true,"prop":"hoverLink"},{"type":"Object","prop":"inRange"},{"type":"Object","prop":"outOfRange"},{"type":"Object","isObject":true,"prop":"controller","children":[{"type":"Object","prop":"inRange"},{"type":"Object","prop":"outOfRange"}]},{"default":0,"prop":"zlevel"},{"default":4,"prop":"z"},{"type":["string","number"],"default":0,"prop":"left"},{"type":["string","number"],"default":"auto","prop":"top"},{"type":["string","number"],"default":"auto","prop":"right"},{"type":["string","number"],"default":0,"prop":"bottom"},{"default":"'vertical'","prop":"orient"},{"type":["number","Array"],"default":5,"prop":"padding"},{"type":"Color","default":"'rgba(0,0,0,0)'","prop":"backgroundColor"},{"type":"Color","default":"'#ccc'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":"Array","default":"['#bf444c', '#d88273', '#f6efa6']","prop":"color"},{"type":"*","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"#333","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"tooltip","children":[{"default":true,"prop":"show"},{"default":"'item'","prop":"trigger"},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"default":"'line'","prop":"type"},{"default":"'auto'","prop":"axis"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"crossStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"dashed","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":200,"prop":"animationDurationUpdate"},{"default":"exponentialOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":true,"prop":"showContent"},{"default":false,"prop":"alwaysShowContent"},{"default":"'mousemove|click'","prop":"triggerOn"},{"default":0,"prop":"showDelay"},{"default":100,"prop":"hideDelay"},{"default":true,"prop":"enterable"},{"default":"'html'","prop":"renderMode"},{"default":false,"prop":"confine"},{"default":false,"prop":"appendToBody"},{"default":0.4,"prop":"transitionDuration"},{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"type":"string","prop":"id"},{"default":false,"prop":"show"},{"default":"'line'","prop":"type"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"triggerTooltip"},{"type":"number","prop":"value"},{"type":"boolean","prop":"status"},{"type":"Object","isObject":true,"prop":"handle","children":[{"default":false,"prop":"show"},{"type":"*","prop":"icon"},{"type":["number","Array"],"default":45,"prop":"size"},{"default":50,"prop":"margin"},{"default":"'#333'","prop":"color"},{"default":40,"prop":"throttle"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":2,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Array","prop":"link"},{"default":"'mousemove|click'","prop":"triggerOn"}]},{"type":"Object","isObject":true,"prop":"toolbox","children":[{"type":"string","prop":"id"},{"default":true,"prop":"show"},{"default":"'horizontal'","prop":"orient"},{"default":15,"prop":"itemSize"},{"default":10,"prop":"itemGap"},{"default":true,"prop":"showTitle"},{"type":"Object","isObject":true,"prop":"feature","children":[{"type":"Object","isObject":true,"prop":"saveAsImage","children":[{"default":"'png'","prop":"type"},{"type":"string","prop":"name"},{"type":"Color","default":"'auto'","prop":"backgroundColor"},{"type":"Color","default":"'#fff'","prop":"connectedBackgroundColor"},{"type":"Array","default":"['toolbox']","prop":"excludeComponents"},{"default":true,"prop":"show"},{"default":"'save as image'","prop":"title"},{"type":"*","prop":"icon"},{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","default":"none","prop":"color"},{"type":"Color","default":"#666","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":"'bottom'","prop":"textPosition"},{"default":"'#000'","prop":"textFill"},{"default":"'center'","prop":"textAlign"},{"type":"string","prop":"textBackgroundColor"},{"type":"number","prop":"textBorderRadius"},{"type":"number","prop":"textPadding"}]}]},{"default":1,"prop":"pixelRatio"}]},{"type":"Object","isObject":true,"prop":"restore","children":[{"default":true,"prop":"show"},{"default":"'restore'","prop":"title"},{"type":"*","prop":"icon"},{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","default":"none","prop":"color"},{"type":"Color","default":"#666","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":"'bottom'","prop":"textPosition"},{"default":"'#000'","prop":"textFill"},{"default":"'center'","prop":"textAlign"},{"type":"string","prop":"textBackgroundColor"},{"type":"number","prop":"textBorderRadius"},{"type":"number","prop":"textPadding"}]}]}]},{"type":"Object","isObject":true,"prop":"dataView","children":[{"default":true,"prop":"show"},{"default":"'data view'","prop":"title"},{"type":"*","prop":"icon"},{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","default":"none","prop":"color"},{"type":"Color","default":"#666","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":"'bottom'","prop":"textPosition"},{"default":"'#000'","prop":"textFill"},{"default":"'center'","prop":"textAlign"},{"type":"string","prop":"textBackgroundColor"},{"type":"number","prop":"textBorderRadius"},{"type":"number","prop":"textPadding"}]}]},{"default":false,"prop":"readOnly"},{"type":"Function","prop":"optionToContent"},{"type":"Function","prop":"contentToOption"},{"type":"Array","default":"['data view', 'turn off', 'refresh']","prop":"lang"},{"default":"'#fff'","prop":"backgroundColor"},{"default":"'#fff'","prop":"textareaColor"},{"default":"'#333'","prop":"textareaBorderColor"},{"default":"'#000'","prop":"textColor"},{"default":"'#c23531'","prop":"buttonColor"},{"default":"'#fff'","prop":"buttonTextColor"}]},{"type":"Object","isObject":true,"prop":"dataZoom","children":[{"default":true,"prop":"show"},{"type":"Object","isObject":true,"prop":"title","children":[{"default":"'area zooming'","prop":"zoom"},{"default":"'restore area zooming'","prop":"back"}]},{"type":"Object","isObject":true,"prop":"icon","children":[{"type":"string","prop":"zoom"},{"type":"string","prop":"back"}]},{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","default":"none","prop":"color"},{"type":"Color","default":"#666","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":"'bottom'","prop":"textPosition"},{"default":"'#000'","prop":"textFill"},{"default":"'center'","prop":"textAlign"},{"type":"string","prop":"textBackgroundColor"},{"type":"number","prop":"textBorderRadius"},{"type":"number","prop":"textPadding"}]}]},{"default":"'filter'","prop":"filterMode"},{"type":["number","Array","boolean"],"prop":"xAxisIndex"},{"type":["number","Array","boolean"],"prop":"yAxisIndex"}]},{"type":"Object","isObject":true,"prop":"magicType","children":[{"default":true,"prop":"show"},{"type":"Array","prop":"type"},{"type":"Object","isObject":true,"prop":"title","children":[{"default":"'for line charts'","prop":"line"},{"default":"'for bar charts'","prop":"bar"},{"default":"'for stacked charts'","prop":"stack"},{"default":"'for tiled charts'","prop":"tiled"}]},{"type":"Object","isObject":true,"prop":"icon","children":[{"type":"string","prop":"line"},{"type":"string","prop":"bar"},{"type":"string","prop":"stack"},{"type":"string","prop":"tiled"}]},{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","default":"none","prop":"color"},{"type":"Color","default":"#666","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":"'bottom'","prop":"textPosition"},{"default":"'#000'","prop":"textFill"},{"default":"'center'","prop":"textAlign"},{"type":"string","prop":"textBackgroundColor"},{"type":"number","prop":"textBorderRadius"},{"type":"number","prop":"textPadding"}]}]},{"type":"Object","isObject":true,"prop":"option","children":[{"type":"Object","prop":"line"},{"type":"Object","prop":"bar"},{"type":"Object","prop":"stack"},{"type":"Object","prop":"tiled"}]},{"type":"Object","isObject":true,"prop":"seriesIndex","children":[{"type":"Array","prop":"line"},{"type":"Array","prop":"bar"},{"type":"Array","prop":"stack"},{"type":"Array","prop":"tiled"}]}]},{"type":"Object","isObject":true,"prop":"brush","children":[{"type":"Array","prop":"type"},{"type":"Object","isObject":true,"prop":"icon","children":[{"type":"string","prop":"rect"},{"type":"string","prop":"polygon"},{"type":"string","prop":"lineX"},{"type":"string","prop":"lineY"},{"type":"string","prop":"keep"},{"type":"string","prop":"clear"}]},{"type":"Object","isObject":true,"prop":"title","children":[{"default":"'Rectangle selection'","prop":"rect"},{"default":"'Polygon selection'","prop":"polygon"},{"default":"'Horizontal selection'","prop":"lineX"},{"default":"'Vertical selection'","prop":"lineY"},{"default":"'Keep previous selection'","prop":"keep"},{"default":"'Clear selection'","prop":"clear"}]}]}]},{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","default":"none","prop":"color"},{"type":"Color","default":"#666","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":"'bottom'","prop":"textPosition"},{"default":"'#000'","prop":"textFill"},{"default":"'center'","prop":"textAlign"},{"type":"string","prop":"textBackgroundColor"},{"type":"number","prop":"textBorderRadius"},{"type":"number","prop":"textPadding"}]}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'auto'","prop":"left"},{"type":["string","number"],"default":"'auto'","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"},{"type":["string","number"],"default":"'auto'","prop":"width"},{"type":["string","number"],"default":"'auto'","prop":"height"},{"type":"Object","prop":"tooltip"}]},{"type":"Object","isObject":true,"prop":"brush","children":[{"type":"string","prop":"id"},{"type":"Array","default":"['rect', 'polygon', 'keep', 'clear']","prop":"toolbox"},{"type":["Array","string"],"prop":"brushLink"},{"type":["Array","number","string"],"default":"'all'","prop":"seriesIndex"},{"type":["Array","number","string"],"prop":"geoIndex"},{"type":["Array","number","string"],"prop":"xAxisIndex"},{"type":["Array","number","string"],"prop":"yAxisIndex"},{"default":"'rect'","prop":"brushType"},{"default":"'single'","prop":"brushMode"},{"default":true,"prop":"transformable"},{"type":"Object","prop":"brushStyle"},{"default":"'fixRate'","prop":"throttleType"},{"default":0,"prop":"throttleDelay"},{"default":true,"prop":"removeOnClick"},{"type":"Object","prop":"inBrush"},{"type":"Object","prop":"outOfBrush"},{"default":10000,"prop":"z"}]},{"type":"Object","isObject":true,"prop":"geo","children":[{"type":"string","prop":"id"},{"default":true,"prop":"show"},{"default":"''","prop":"map"},{"type":["boolean","string"],"default":false,"prop":"roam"},{"type":"Array","prop":"center"},{"default":0.75,"prop":"aspectScale"},{"type":"Array","prop":"boundingCoords"},{"default":1,"prop":"zoom"},{"type":"Object","isObject":true,"prop":"scaleLimit","children":[{"type":"number","prop":"min"},{"type":"number","prop":"max"}]},{"type":"Object","prop":"nameMap"},{"default":"'name'","prop":"nameProperty"},{"type":["boolean","string"],"default":false,"prop":"selectedMode"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"'#eee'","prop":"areaColor"},{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"'#eee'","prop":"areaColor"},{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'auto'","prop":"left"},{"type":["string","number"],"default":"'auto'","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"},{"type":"Array","prop":"layoutCenter"},{"type":["number","string"],"prop":"layoutSize"},{"type":"Array","isArray":true,"prop":"regions","children":[{"type":"string","prop":"name"},{"default":false,"prop":"selected"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"areaColor"},{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"areaColor"},{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":false,"prop":"silent"}]},{"type":"Object","isObject":true,"prop":"parallel","children":[{"type":"string","prop":"id"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":80,"prop":"left"},{"type":["string","number"],"default":60,"prop":"top"},{"type":["string","number"],"default":80,"prop":"right"},{"type":["string","number"],"default":60,"prop":"bottom"},{"type":["string","number"],"default":"'auto'","prop":"width"},{"type":["string","number"],"default":"'auto'","prop":"height"},{"default":"'horizontal'","prop":"layout"},{"default":false,"prop":"axisExpandable"},{"type":"number","prop":"axisExpandCenter"},{"default":0,"prop":"axisExpandCount"},{"default":50,"prop":"axisExpandWidth"},{"default":"'click'","prop":"axisExpandTriggerOn"},{"type":"Object","isObject":true,"prop":"parallelAxisDefault","children":[{"default":"value","prop":"type"},{"type":"string","prop":"name"},{"default":"'end'","prop":"nameLocation"},{"type":"Object","isObject":true,"prop":"nameTextStyle","children":[{"type":"Color","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":15,"prop":"nameGap"},{"type":"number","prop":"nameRotate"},{"default":false,"prop":"inverse"},{"type":["boolean","Array"],"prop":"boundaryGap"},{"type":["number","string","Function"],"prop":"min"},{"type":["number","string","Function"],"prop":"max"},{"default":false,"prop":"scale"},{"default":5,"prop":"splitNumber"},{"default":0,"prop":"minInterval"},{"type":"number","prop":"maxInterval"},{"type":"number","prop":"interval"},{"default":10,"prop":"logBase"},{"default":false,"prop":"silent"},{"default":false,"prop":"triggerEvent"},{"type":"Object","isObject":true,"prop":"axisLine","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'none'","prop":"symbol"},{"type":"Array","default":"[10, 15]","prop":"symbolSize"},{"type":["Array","number"],"default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisTick","children":[{"default":true,"prop":"show"},{"default":false,"prop":"alignWithLabel"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":5,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorTick","children":[{"default":false,"prop":"show"},{"default":5,"prop":"splitNumber"},{"default":3,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisLabel","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":0,"prop":"rotate"},{"default":8,"prop":"margin"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","prop":"showMinLabel"},{"type":"boolean","prop":"showMaxLabel"},{"type":["Color","Function"],"prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"value"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"parallelAxis","children":[{"type":"string","prop":"id"},{"type":"number","prop":"dim"},{"default":0,"prop":"parallelIndex"},{"default":true,"prop":"realtime"},{"type":"Object","isObject":true,"prop":"areaSelectStyle","children":[{"default":20,"prop":"width"},{"default":1,"prop":"borderWidth"},{"type":"Color","default":"'rgba(160,197,232)'","prop":"borderColor"},{"type":"Color","default":"'rgba(160,197,232)'","prop":"color"},{"default":0.3,"prop":"opacity"}]},{"default":"value","prop":"type"},{"type":"string","prop":"name"},{"default":"'end'","prop":"nameLocation"},{"type":"Object","isObject":true,"prop":"nameTextStyle","children":[{"type":"Color","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":15,"prop":"nameGap"},{"type":"number","prop":"nameRotate"},{"default":false,"prop":"inverse"},{"type":["boolean","Array"],"prop":"boundaryGap"},{"type":["number","string","Function"],"prop":"min"},{"type":["number","string","Function"],"prop":"max"},{"default":false,"prop":"scale"},{"default":5,"prop":"splitNumber"},{"default":0,"prop":"minInterval"},{"type":"number","prop":"maxInterval"},{"type":"number","prop":"interval"},{"default":10,"prop":"logBase"},{"default":false,"prop":"silent"},{"default":false,"prop":"triggerEvent"},{"type":"Object","isObject":true,"prop":"axisLine","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'none'","prop":"symbol"},{"type":"Array","default":"[10, 15]","prop":"symbolSize"},{"type":["Array","number"],"default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisTick","children":[{"default":true,"prop":"show"},{"default":false,"prop":"alignWithLabel"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":5,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorTick","children":[{"default":false,"prop":"show"},{"default":5,"prop":"splitNumber"},{"default":3,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisLabel","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":0,"prop":"rotate"},{"default":8,"prop":"margin"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","prop":"showMinLabel"},{"type":"boolean","prop":"showMaxLabel"},{"type":["Color","Function"],"prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"value"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"singleAxis","children":[{"type":"string","prop":"id"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'5%'","prop":"left"},{"type":["string","number"],"default":"'5%'","prop":"top"},{"type":["string","number"],"default":"'5%'","prop":"right"},{"type":["string","number"],"default":"'5%'","prop":"bottom"},{"type":["string","number"],"default":"'auto'","prop":"width"},{"type":["string","number"],"default":"'auto'","prop":"height"},{"default":"'horizontal'","prop":"orient"},{"default":"'value'","prop":"type"},{"type":"string","prop":"name"},{"default":"'end'","prop":"nameLocation"},{"type":"Object","isObject":true,"prop":"nameTextStyle","children":[{"type":"Color","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":15,"prop":"nameGap"},{"type":"number","prop":"nameRotate"},{"default":false,"prop":"inverse"},{"type":["boolean","Array"],"prop":"boundaryGap"},{"type":["number","string","Function"],"prop":"min"},{"type":["number","string","Function"],"prop":"max"},{"default":false,"prop":"scale"},{"default":5,"prop":"splitNumber"},{"default":0,"prop":"minInterval"},{"type":"number","prop":"maxInterval"},{"type":"number","prop":"interval"},{"default":10,"prop":"logBase"},{"default":false,"prop":"silent"},{"default":false,"prop":"triggerEvent"},{"type":"Object","isObject":true,"prop":"axisLine","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'none'","prop":"symbol"},{"type":"Array","default":"[10, 15]","prop":"symbolSize"},{"type":["Array","number"],"default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisTick","children":[{"default":true,"prop":"show"},{"default":false,"prop":"alignWithLabel"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":5,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorTick","children":[{"default":false,"prop":"show"},{"default":5,"prop":"splitNumber"},{"default":3,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisLabel","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":0,"prop":"rotate"},{"default":8,"prop":"margin"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","prop":"showMinLabel"},{"type":"boolean","prop":"showMaxLabel"},{"type":["Color","Function"],"prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"splitLine","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":["Array","string"],"default":"['#ccc']","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorSplitLine","children":[{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#eee'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"splitArea","children":[{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Array","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"value"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"default":false,"prop":"show"},{"default":"'line'","prop":"type"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"triggerTooltip"},{"type":"number","prop":"value"},{"type":"boolean","prop":"status"},{"type":"Object","isObject":true,"prop":"handle","children":[{"default":false,"prop":"show"},{"type":"*","prop":"icon"},{"type":["number","Array"],"default":45,"prop":"size"},{"default":50,"prop":"margin"},{"default":"'#333'","prop":"color"},{"default":40,"prop":"throttle"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":2,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"tooltip","children":[{"default":true,"prop":"show"},{"default":"'item'","prop":"trigger"},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"default":"'line'","prop":"type"},{"default":"'auto'","prop":"axis"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"crossStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"dashed","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":200,"prop":"animationDurationUpdate"},{"default":"exponentialOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"timeline","children":[{"default":true,"prop":"show"},{"default":"'slider'","prop":"type"},{"default":"'time'","prop":"axisType"},{"default":0,"prop":"currentIndex"},{"default":false,"prop":"autoPlay"},{"default":false,"prop":"rewind"},{"default":true,"prop":"loop"},{"default":2000,"prop":"playInterval"},{"default":true,"prop":"realtime"},{"default":"'left'","prop":"controlPosition"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'auto'","prop":"left"},{"type":["string","number"],"default":"'auto'","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"},{"type":["number","Array"],"default":5,"prop":"padding"},{"default":"'horizontal'","prop":"orient"},{"default":false,"prop":"inverse"},{"default":"'emptyCircle'","prop":"symbol"},{"type":["number","Array"],"default":10,"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"default":true,"prop":"show"},{"type":"Color","default":"'#304654'","prop":"color"},{"default":2,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'auto'","prop":"position"},{"default":true,"prop":"show"},{"type":["string","number"],"default":"'auto'","prop":"interval"},{"type":"prefix","default":0,"prop":"rotate"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'#304654'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"type":["string","number"],"default":"'auto'","prop":"interval"},{"type":"prefix","default":0,"prop":"rotate"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'#c23531'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"'#304654'","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"'#c23531'","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"checkpointStyle","children":[{"default":"'circle'","prop":"symbol"},{"type":["number","Array"],"default":13,"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Color","default":"'#c23531'","prop":"color"},{"default":5,"prop":"borderWidth"},{"type":"Color","default":"'rgba(194,53,49, 0.5)'","prop":"borderColor"},{"default":true,"prop":"animation"},{"default":300,"prop":"animationDuration"},{"default":"'quinticInOut'","prop":"animationEasing"}]},{"type":"Object","isObject":true,"prop":"controlStyle","children":[{"default":true,"prop":"show"},{"default":true,"prop":"showPlayBtn"},{"default":true,"prop":"showPrevBtn"},{"default":true,"prop":"showNextBtn"},{"default":22,"prop":"itemSize"},{"default":12,"prop":"itemGap"},{"default":"'left'","prop":"position"},{"type":"string","prop":"playIcon"},{"type":"string","prop":"stopIcon"},{"type":"string","prop":"prevIcon"},{"type":"string","prop":"nextIcon"},{"type":"Color","default":"'#304654'","prop":"color"},{"type":"Color","default":"'#304654'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"'#c23531'","prop":"color"},{"type":"Color","default":"'#c23531'","prop":"borderColor"},{"default":2,"prop":"borderWidth"}]}]},{"type":"Array","prop":"data"}]},{"type":"*","isObject":true,"prop":"graphic","children":[{"type":"string","prop":"id"},{"type":"Array","isArray":true,"prop":"elements","children":[{"type":"Object","isObject":true,"arrayItemType":"group","children":[{"default":"group","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"default":0,"prop":"width"},{"default":0,"prop":"height"},{"default":false,"prop":"diffChildrenByName"},{"type":"Array","prop":"children"},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"image","children":[{"default":"image","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"style","children":[{"type":"string","prop":"image"},{"default":0,"prop":"x"},{"type":"numbr","default":0,"prop":"y"},{"default":0,"prop":"width"},{"type":"numbr","default":0,"prop":"height"},{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"text","children":[{"default":"text","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"''","prop":"text"},{"default":0,"prop":"x"},{"type":"numbr","default":0,"prop":"y"},{"type":"string","prop":"font"},{"default":"'left'","prop":"textAlign"},{"type":"string","prop":"textVerticalAlign"},{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"rect","children":[{"default":"rect","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"x"},{"type":"numbr","default":0,"prop":"y"},{"default":0,"prop":"width"},{"type":"numbr","default":0,"prop":"height"},{"type":"Array","prop":"r"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"circle","children":[{"default":"circle","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"cx"},{"type":"numbr","default":0,"prop":"cy"},{"default":0,"prop":"r"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"ring","children":[{"default":"ring","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"cx"},{"type":"numbr","default":0,"prop":"cy"},{"default":0,"prop":"r"},{"default":0,"prop":"r0"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"sector","children":[{"default":"sector","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"cx"},{"type":"numbr","default":0,"prop":"cy"},{"default":0,"prop":"r"},{"default":0,"prop":"r0"},{"default":0,"prop":"startAngle"},{"type":"number","default":"Math.PI * 2","prop":"endAngle"},{"default":true,"prop":"clockwise"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"arc","children":[{"default":"arc","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"cx"},{"type":"numbr","default":0,"prop":"cy"},{"default":0,"prop":"r"},{"default":0,"prop":"r0"},{"default":0,"prop":"startAngle"},{"type":"number","default":"Math.PI * 2","prop":"endAngle"},{"default":true,"prop":"clockwise"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"type":"string","prop":"fill"},{"default":"\"#000\"","prop":"stroke"},{"default":1,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"polygon","children":[{"default":"polygon","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"shape","children":[{"type":"Array","prop":"points"},{"type":["number","string"],"default":"undefined","prop":"smooth"},{"default":false,"prop":"smoothConstraint"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"polyline","children":[{"default":"polyline","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"shape","children":[{"type":"Array","prop":"points"},{"type":["number","string"],"default":"undefined","prop":"smooth"},{"default":false,"prop":"smoothConstraint"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"type":"string","prop":"fill"},{"default":"\"#000\"","prop":"stroke"},{"default":5,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"line","children":[{"default":"line","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"x1"},{"default":0,"prop":"y1"},{"default":0,"prop":"x2"},{"default":0,"prop":"y2"},{"default":1,"prop":"percent"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"type":"string","prop":"fill"},{"default":"\"#000\"","prop":"stroke"},{"default":5,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"bezierCurve","children":[{"default":"bezierCurve","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"x1"},{"default":0,"prop":"y1"},{"default":0,"prop":"x2"},{"default":0,"prop":"y2"},{"default":0,"prop":"cpx1"},{"default":0,"prop":"cpy1"},{"type":"number","prop":"cpx2"},{"type":"number","prop":"cpy2"},{"default":1,"prop":"percent"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]}]}]},{"type":"Object","isObject":true,"prop":"calendar","children":[{"type":"string","prop":"id"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":80,"prop":"left"},{"type":["string","number"],"default":60,"prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"},{"type":["number","string"],"default":"auto","prop":"width"},{"type":["number","string"],"default":"auto","prop":"height"},{"type":["number","string","Array"],"prop":"range"},{"type":["number","Array"],"default":20,"prop":"cellSize"},{"default":"'horizontal'","prop":"orient"},{"type":"Object","isObject":true,"prop":"splitLine","children":[{"default":true,"prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#000","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"#fff","prop":"color"},{"type":"Color","default":"'#ccc'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"dayLabel","children":[{"default":true,"prop":"show"},{"default":0,"prop":"firstDay"},{"default":0,"prop":"margin"},{"default":"'start'","prop":"position"},{"type":["string","Array"],"default":"'en'","prop":"nameMap"},{"type":"Color","default":"#000","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"monthLabel","children":[{"default":true,"prop":"show"},{"type":"string","prop":"align"},{"default":5,"prop":"margin"},{"default":"'start'","prop":"position"},{"type":["string","Array"],"default":"'en'","prop":"nameMap"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"#000","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"yearLabel","children":[{"default":true,"prop":"show"},{"default":30,"prop":"margin"},{"type":"string","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":false,"prop":"silent"}]},{"type":"Object","isObject":true,"prop":"dataset","children":[{"type":"string","prop":"id"},{"type":["Array","Object"],"prop":"source"},{"type":"Array","prop":"dimensions"},{"type":"boolean","prop":"sourceHeader"}]},{"type":"*","isObject":true,"prop":"aria","children":[{"default":false,"prop":"show"},{"type":"string","prop":"description"},{"type":"Object","isObject":true,"prop":"general","children":[{"default":"'This is a chart about \"{title}\".'","prop":"withTitle"},{"default":"'This is a chart'","prop":"withoutTitle"}]},{"type":"Object","isObject":true,"prop":"series","children":[{"default":10,"prop":"maxCount"},{"type":"Object","isObject":true,"prop":"single","children":[{"default":"''","prop":"prefix"},{"default":"'The chart type is {seriesType}, which means {seriesName}. '","prop":"withName"},{"default":"'The chart type is {seriesType}.'","prop":"withoutName"}]},{"type":"Object","isObject":true,"prop":"multiple","children":[{"default":"'It consists of {seriesCount} chart series. '","prop":"prefix"},{"default":"'The chart type is {seriesType}, which means {seriesName}. '","prop":"withName"},{"default":"'The chart type is {seriesType}.'","prop":"withoutName"},{"type":"Object","isObject":true,"prop":"separator","children":[{"default":"';'","prop":"middle"},{"default":"'.'","prop":"end"}]}]}]},{"type":"Object","isObject":true,"prop":"data","children":[{"default":10,"prop":"maxCount"},{"default":"'Its data is --'","prop":"allData"},{"default":"''Where the first {displayCnt} entry is -''","prop":"partialData"},{"default":"'{name}'s data is {value}'","prop":"withName"},{"default":"'{value}'","prop":"withoutName"},{"type":"Object","isObject":true,"prop":"separator","children":[{"default":"','","prop":"middle"},{"default":"''","prop":"end"}]}]}]},{"type":"Array","isArray":true,"prop":"series","children":[{"type":"Object","isObject":true,"arrayItemType":"line","children":[{"default":"'line'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":"'cartesian2d'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"default":0,"prop":"polarIndex"},{"type":["string","Function"],"default":"'circle'","prop":"symbol"},{"type":["number","Array","Function"],"default":4,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":true,"prop":"showSymbol"},{"type":"boolean","default":"'auto'","prop":"showAllSymbol"},{"default":true,"prop":"hoverAnimation"},{"default":true,"prop":"legendHoverLink"},{"type":"string","prop":"stack"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"connectNulls"},{"default":true,"prop":"clip"},{"type":["string","boolean"],"default":false,"prop":"step"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'top'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":["Color","Function"],"prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":2,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":"'auto'","prop":"origin"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":["boolean","number"],"default":false,"prop":"smooth"},{"type":"string","prop":"smoothMonotone"},{"type":"string","prop":"sampling"},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"default":"'column'","prop":"seriesLayoutBy"},{"default":0,"prop":"datasetIndex"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"default":"'circle'","prop":"symbol"},{"type":["number","Array"],"default":4,"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"top","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"auto","prop":"color"},{"type":"Color","default":"'#000'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"auto","prop":"color"},{"type":"Color","default":"'#000'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"linear","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"bar","children":[{"default":"'bar'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":true,"prop":"legendHoverLink"},{"default":"'cartesian2d'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"default":false,"prop":"roundCap"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"auto","prop":"color"},{"type":"Color","default":"'#000'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":["number","Array"],"default":0,"prop":"barBorderRadius"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":false,"prop":"showBackground"},{"type":"Object","isObject":true,"prop":"backgroundStyle","children":[{"type":"Color","default":"'rgba(180, 180, 180, 0.2)'","prop":"color"},{"type":"Color","default":"'#000'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":["number","Array"],"default":0,"prop":"barBorderRadius"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"auto","prop":"color"},{"type":"Color","default":"'#000'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"string","prop":"stack"},{"default":"'pointer'","prop":"cursor"},{"type":["number","string"],"prop":"barWidth"},{"type":["number","string"],"prop":"barMaxWidth"},{"type":["number","string"],"prop":"barMinWidth"},{"default":0,"prop":"barMinHeight"},{"default":"30%","prop":"barGap"},{"default":"'20%'","prop":"barCategoryGap"},{"default":false,"prop":"large"},{"default":400,"prop":"largeThreshold"},{"default":5000,"prop":"progressive"},{"default":3000,"prop":"progressiveThreshold"},{"default":"mod","prop":"progressiveChunkMode"},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"default":"'column'","prop":"seriesLayoutBy"},{"default":0,"prop":"datasetIndex"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"inside","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"auto","prop":"color"},{"type":"Color","default":"'#000'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":["number","Array"],"default":0,"prop":"barBorderRadius"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"auto","prop":"color"},{"type":"Color","default":"'#000'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":true,"prop":"clip"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"pie","children":[{"default":"'pie'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":true,"prop":"legendHoverLink"},{"default":true,"prop":"hoverAnimation"},{"default":10,"prop":"hoverOffset"},{"type":["boolean","string"],"default":false,"prop":"selectedMode"},{"default":10,"prop":"selectedOffset"},{"default":true,"prop":"clockwise"},{"default":90,"prop":"startAngle"},{"default":0,"prop":"minAngle"},{"default":0,"prop":"minShowLabelAngle"},{"type":["boolean","string"],"default":false,"prop":"roseType"},{"default":true,"prop":"avoidLabelOverlap"},{"default":true,"prop":"stillShowZeroSum"},{"default":"'pointer'","prop":"cursor"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":0,"prop":"left"},{"type":["string","number"],"default":0,"prop":"top"},{"type":["string","number"],"default":0,"prop":"right"},{"type":["string","number"],"default":0,"prop":"bottom"},{"type":["string","number"],"default":"'auto'","prop":"width"},{"type":["string","number"],"default":"'auto'","prop":"height"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'outside'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":["boolean","number"],"prop":"rotate"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":"'none'","prop":"alignTo"},{"type":["string","number"],"default":"'25%'","prop":"margin"},{"default":10,"prop":"bleedMargin"},{"default":5,"prop":"distanceToLabelLine"}]},{"type":"Object","isObject":true,"prop":"labelLine","children":[{"type":"boolean","prop":"show"},{"type":"number","prop":"length"},{"type":"number","prop":"length2"},{"type":["boolean","number"],"default":false,"prop":"smooth"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":["Color","Function"],"prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Function"],"prop":"formatter"},{"type":["boolean","number"],"prop":"rotate"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"labelLine","children":[{"type":"boolean","prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","default":"['50%', '50%']","prop":"center"},{"type":["number","string","Array"],"default":"[0, '75%']","prop":"radius"},{"default":"'column'","prop":"seriesLayoutBy"},{"default":0,"prop":"datasetIndex"},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"default":false,"prop":"selected"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'outside'","prop":"position"},{"type":["boolean","number"],"prop":"rotate"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"labelLine","children":[{"type":"boolean","prop":"show"},{"type":"number","prop":"length"},{"type":"number","prop":"length2"},{"type":["boolean","number"],"default":false,"prop":"smooth"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["boolean","number"],"prop":"rotate"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"labelLine","children":[{"type":"boolean","prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":false,"prop":"silent"},{"default":"'expansion'","prop":"animationType"},{"default":"'transition'","prop":"animationTypeUpdate"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"scatter","children":[{"default":"'scatter'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":"'cartesian2d'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"default":0,"prop":"polarIndex"},{"default":0,"prop":"geoIndex"},{"default":0,"prop":"calendarIndex"},{"type":"boolean","prop":"hoverAnimation"},{"default":true,"prop":"legendHoverLink"},{"type":["string","Function"],"default":"'circle'","prop":"symbol"},{"type":["number","Array","Function"],"default":10,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"large"},{"default":2000,"prop":"largeThreshold"},{"default":"'pointer'","prop":"cursor"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":["Color","Function"],"prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0.8,"prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"default":400,"prop":"progressive"},{"default":3000,"prop":"progressiveThreshold"},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"default":"'column'","prop":"seriesLayoutBy"},{"default":0,"prop":"datasetIndex"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"Array","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"inside","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":true,"prop":"clip"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"effectScatter","children":[{"default":"'effectScatter'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":true,"prop":"legendHoverLink"},{"default":"'ripple'","prop":"effectType"},{"default":"'render'","prop":"showEffectOn"},{"type":"Object","isObject":true,"prop":"rippleEffect","children":[{"type":"string","prop":"color"},{"default":4,"prop":"period"},{"default":2.5,"prop":"scale"},{"default":"'fill'","prop":"brushType"}]},{"default":"'cartesian2d'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"default":0,"prop":"polarIndex"},{"default":0,"prop":"geoIndex"},{"default":0,"prop":"calendarIndex"},{"type":["string","Function"],"default":"'circle'","prop":"symbol"},{"type":["number","Array","Function"],"default":10,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":"'pointer'","prop":"cursor"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":["Color","Function"],"prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":["Color","Function"],"prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"default":"'column'","prop":"seriesLayoutBy"},{"default":0,"prop":"datasetIndex"},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"'circle'","prop":"symbol"},{"type":["number","Array"],"default":4,"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"inside","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"radar","children":[{"default":"'radar'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"type":"number","prop":"radarIndex"},{"type":["string","Function"],"default":"'circle'","prop":"symbol"},{"type":["number","Array","Function"],"default":4,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'top'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":["Color","Function"],"prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"default":"'circle'","prop":"symbol"},{"type":["number","Array"],"default":4,"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"top","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"auto","prop":"color"},{"type":"Color","default":"'#000'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"top","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"auto","prop":"color"},{"type":"Color","default":"'#000'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"tree","children":[{"default":"'tree'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"12%","prop":"left"},{"type":["string","number"],"default":"12%","prop":"top"},{"type":["string","number"],"default":"12%","prop":"right"},{"type":["string","number"],"default":"12%","prop":"bottom"},{"type":["string","number"],"prop":"width"},{"type":["string","number"],"prop":"height"},{"default":"'orthogonal'","prop":"layout"},{"default":"'LR'","prop":"orient"},{"type":["string","Function"],"default":"'emptyCircle'","prop":"symbol"},{"type":["number","Array","Function"],"default":7,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":"'curve'","prop":"edgeShape"},{"default":"'50%'","prop":"edgeForkPosition"},{"type":["boolean","string"],"default":false,"prop":"roam"},{"default":true,"prop":"expandAndCollapse"},{"default":2,"prop":"initialTreeDepth"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'#c23531'","prop":"borderColor"},{"default":1.5,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"'#ccc'\"","prop":"color"},{"default":1.5,"prop":"width"},{"default":0.5,"prop":"curveness"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"'#ccc'\"","prop":"color"},{"default":1.5,"prop":"width"},{"default":0.5,"prop":"curveness"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"leaves","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]}]},{"type":"Object","isObject":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"'linear'","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"treemap","children":[{"default":"'treemap'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"center","prop":"left"},{"type":["string","number"],"default":"middle","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"},{"type":["string","number"],"default":"80%","prop":"width"},{"type":["string","number"],"default":"80%","prop":"height"},{"type":"number","prop":"squareRatio"},{"type":"number","prop":"leafDepth"},{"default":"'▶'","prop":"drillDownIcon"},{"type":["boolean","string"],"default":true,"prop":"roam"},{"type":["boolean","string"],"default":"'zoomToNode'","prop":"nodeClick"},{"type":"number","default":"0.32*0.32","prop":"zoomToNodeRatio"},{"type":"Array","isArray":true,"prop":"levels","children":[{"default":0,"prop":"visualDimension"},{"type":"number","prop":"visualMin"},{"type":"number","prop":"visualMax"},{"type":"Array","prop":"color"},{"type":"Array","prop":"colorAlpha"},{"type":"number","prop":"colorSaturation"},{"default":"'index'","prop":"colorMappingBy"},{"default":10,"prop":"visibleMin"},{"type":"number","prop":"childrenVisibleMin"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"upperLabel","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"default":20,"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"number","prop":"colorAlpha"},{"type":"number","prop":"colorSaturation"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"gapWidth"},{"type":"Color","default":"'#fff',","prop":"borderColor"},{"type":"Color","prop":"borderColorSaturation"},{"type":"Color","prop":"strokeColor"},{"type":"number","prop":"strokeWidth"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"upperLabel","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"}]}]}]},{"default":0,"prop":"visualDimension"},{"type":"number","prop":"visualMin"},{"type":"number","prop":"visualMax"},{"type":"Array","prop":"colorAlpha"},{"type":"number","prop":"colorSaturation"},{"default":"'index'","prop":"colorMappingBy"},{"default":10,"prop":"visibleMin"},{"type":"number","prop":"childrenVisibleMin"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"upperLabel","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"default":20,"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"number","prop":"colorAlpha"},{"type":"number","prop":"colorSaturation"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"gapWidth"},{"type":"Color","default":"'#fff',","prop":"borderColor"},{"type":"Color","prop":"borderColorSaturation"},{"type":"Color","prop":"strokeColor"},{"type":"number","prop":"strokeWidth"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"upperLabel","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"}]}]},{"type":"Object","isObject":true,"prop":"breadcrumb","children":[{"default":true,"prop":"show"},{"type":["string","number"],"default":"'center'","prop":"left"},{"type":["string","number"],"default":"'auto'","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":0,"prop":"bottom"},{"default":22,"prop":"height"},{"default":25,"prop":"emptyItemWidth"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"rgba(0,0,0,0.7)","prop":"color"},{"type":"Color","default":"rgba(255,255,255,0.7)","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"rgba(150,150,150,1)","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"#fff","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"*","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"rgba(0,0,0,0.7)","prop":"color"},{"type":"Color","default":"rgba(255,255,255,0.7)","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"rgba(150,150,150,1)","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"#fff","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":["number","Array"],"prop":"value"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":0,"prop":"visualDimension"},{"type":"number","prop":"visualMin"},{"type":"number","prop":"visualMax"},{"type":"Array","prop":"color"},{"type":"Array","prop":"colorAlpha"},{"type":"number","prop":"colorSaturation"},{"default":"'index'","prop":"colorMappingBy"},{"default":10,"prop":"visibleMin"},{"type":"number","prop":"childrenVisibleMin"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"upperLabel","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"default":20,"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"number","prop":"colorAlpha"},{"type":"number","prop":"colorSaturation"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"gapWidth"},{"type":"Color","default":"'#fff',","prop":"borderColor"},{"type":"Color","prop":"borderColorSaturation"},{"type":"Color","prop":"strokeColor"},{"type":"number","prop":"strokeWidth"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"upperLabel","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"}]}]},{"type":"string","prop":"link"},{"default":"'blank'","prop":"target"},{"type":"Array","prop":"children"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"default":false,"prop":"silent"},{"type":["number","Function"],"default":1500,"prop":"animationDuration"},{"default":"quinticInOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"sunburst","children":[{"default":"'sunburst'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":"Array","default":"['50%', '50%']","prop":"center"},{"type":["number","string","Array"],"default":"[0, '75%']","prop":"radius"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"number","prop":"value"},{"type":"string","prop":"name"},{"type":"string","prop":"link"},{"default":"'blank'","prop":"target"},{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"highlight","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"downplay","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]}]},{"type":"Array","prop":"children"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]},{"default":"'descendant'","prop":"highlightPolicy"},{"type":["boolean","string"],"default":"'rootToNode'","prop":"nodeClick"},{"type":["string","Function"],"default":"'desc'","prop":"sort"},{"default":false,"prop":"renderLabelForZeroData"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"highlight","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"downplay","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"levels","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"highlight","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"downplay","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"'cubicOut'","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":500,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"arrayItemType":"boxplot","children":[{"default":"'boxplot'","prop":"type"},{"type":"string","prop":"id"},{"default":"'cartesian2d'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"type":"string","prop":"name"},{"default":true,"prop":"legendHoverLink"},{"default":true,"prop":"hoverAnimation"},{"type":"string","prop":"layout"},{"type":"Array","default":"[7, 50]","prop":"boxWidth"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"#fff","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"#fff","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":2,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"default":5,"prop":"shadowBlur"},{"type":"Color","default":"rgba(0,0,0,0.4)","prop":"shadowColor"},{"default":2,"prop":"shadowOffsetX"},{"default":2,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"Array","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"#fff","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"#fff","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":2,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"default":5,"prop":"shadowBlur"},{"type":"Color","default":"rgba(0,0,0,0.4)","prop":"shadowColor"},{"default":2,"prop":"shadowOffsetX"},{"default":2,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"type":["number","Function"],"default":800,"prop":"animationDuration"},{"default":"elasticOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"candlestick","children":[{"default":"'candlestick'","prop":"type"},{"type":"string","prop":"id"},{"default":"'cartesian2d'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"type":"string","prop":"name"},{"default":true,"prop":"legendHoverLink"},{"default":true,"prop":"hoverAnimation"},{"type":"string","prop":"layout"},{"type":"number","prop":"barWidth"},{"type":["number","string"],"prop":"barMinWidth"},{"type":["number","string"],"prop":"barMaxWidth"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"#c23531","prop":"color"},{"type":"Color","default":"#314656","prop":"color0"},{"type":"Color","default":"#c23531","prop":"borderColor"},{"type":"Color","default":"#314656","prop":"borderColor0"},{"default":1,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"#c23531","prop":"color"},{"type":"Color","default":"#314656","prop":"color0"},{"type":"Color","default":"#c23531","prop":"borderColor"},{"type":"Color","default":"#314656","prop":"borderColor0"},{"default":2,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"default":true,"prop":"large"},{"default":600,"prop":"largeThreshold"},{"default":3000,"prop":"progressive"},{"default":10000,"prop":"progressiveThreshold"},{"default":"mod","prop":"progressiveChunkMode"},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"Array","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"#c23531","prop":"color"},{"type":"Color","default":"#314656","prop":"color0"},{"type":"Color","default":"#c23531","prop":"borderColor"},{"type":"Color","default":"#314656","prop":"borderColor0"},{"default":1,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"#c23531","prop":"color"},{"type":"Color","default":"#314656","prop":"color0"},{"type":"Color","default":"#c23531","prop":"borderColor"},{"type":"Color","default":"#314656","prop":"borderColor0"},{"default":2,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":true,"prop":"clip"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"type":["number","Function"],"default":300,"prop":"animationDuration"},{"default":"linear","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"heatmap","children":[{"default":"'heatmap'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":"'cartesian2d'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"default":0,"prop":"geoIndex"},{"default":0,"prop":"calendarIndex"},{"default":20,"prop":"pointSize"},{"default":20,"prop":"blurSize"},{"default":0,"prop":"minOpacity"},{"default":1,"prop":"maxOpacity"},{"default":400,"prop":"progressive"},{"default":3000,"prop":"progressiveThreshold"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"inside","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"inside","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"Array","prop":"value"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"inside","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"inside","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"map","children":[{"default":"'map'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":"''","prop":"map"},{"type":["boolean","string"],"default":false,"prop":"roam"},{"type":"Array","prop":"center"},{"default":0.75,"prop":"aspectScale"},{"type":"Array","prop":"boundingCoords"},{"default":1,"prop":"zoom"},{"type":"Object","isObject":true,"prop":"scaleLimit","children":[{"type":"number","prop":"min"},{"type":"number","prop":"max"}]},{"type":"Object","prop":"nameMap"},{"default":"'name'","prop":"nameProperty"},{"type":["boolean","string"],"default":false,"prop":"selectedMode"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"'#eee'","prop":"areaColor"},{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"'#eee'","prop":"areaColor"},{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'auto'","prop":"left"},{"type":["string","number"],"default":"'auto'","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"},{"type":"Array","prop":"layoutCenter"},{"type":["number","string"],"prop":"layoutSize"},{"type":"number","prop":"geoIndex"},{"default":"'sum'","prop":"mapValueCalculation"},{"type":"boolean","prop":"showLegendSymbol"},{"default":"'column'","prop":"seriesLayoutBy"},{"default":0,"prop":"datasetIndex"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"default":false,"prop":"selected"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","isObject":true,"prop":"areaColor","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'bottom'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"areaColor"},{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":false,"prop":"silent"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"parallel","children":[{"default":"'parallel'","prop":"type"},{"type":"string","prop":"id"},{"default":"'parallel'","prop":"coordinateSystem"},{"default":0,"prop":"parallelIndex"},{"type":"string","prop":"name"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":2,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0.45,"prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":2,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0.45,"prop":"opacity"}]}]},{"default":0.05,"prop":"inactiveOpacity"},{"default":1,"prop":"activeOpacity"},{"default":true,"prop":"realtime"},{"type":["boolean","number"],"default":false,"prop":"smooth"},{"default":500,"prop":"progressive"},{"default":3000,"prop":"progressiveThreshold"},{"default":"sequential","prop":"progressiveChunkMode"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"Array","prop":"value"},{"type":"Object","prop":"lineStyle"},{"type":"Color","default":"\"#000\"","prop":"color"},{"default":2,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0.45,"prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":2,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0.45,"prop":"opacity"}]}]}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"linear","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"lines","children":[{"default":"'lines'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":"'geo'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"default":0,"prop":"geoIndex"},{"default":false,"prop":"polyline"},{"type":"Object","isObject":true,"prop":"effect","children":[{"default":false,"prop":"show"},{"default":4,"prop":"period"},{"type":["number","Function"],"prop":"delay"},{"default":0,"prop":"constantSpeed"},{"default":"'circle'","prop":"symbol"},{"type":["Array","number"],"default":3,"prop":"symbolSize"},{"type":"Color","prop":"color"},{"default":0.2,"prop":"trailLength"},{"default":true,"prop":"loop"}]},{"default":true,"prop":"large"},{"default":2000,"prop":"largeThreshold"},{"type":["string","Array"],"default":"'none'","prop":"symbol"},{"type":["number","Array"],"default":10,"prop":"symbolSize"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'self-adaptive'","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0.5,"prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"default":400,"prop":"progressive"},{"default":3000,"prop":"progressiveThreshold"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"Array","prop":"coords"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":true,"prop":"clip"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"arrayItemType":"graph","children":[{"default":"'graph'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":true,"prop":"legendHoverLink"},{"type":"string","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"default":0,"prop":"polarIndex"},{"default":0,"prop":"geoIndex"},{"default":0,"prop":"calendarIndex"},{"type":"boolean","prop":"hoverAnimation"},{"type":"Array","prop":"center"},{"default":1,"prop":"zoom"},{"default":"'none'","prop":"layout"},{"type":"Object","isObject":true,"prop":"circular","children":[{"default":false,"prop":"rotateLabel"}]},{"type":"Object","isObject":true,"prop":"force","children":[{"type":"string","prop":"initLayout"},{"type":["Array","number"],"default":50,"prop":"repulsion"},{"default":0.1,"prop":"gravity"},{"type":["Array","number"],"default":30,"prop":"edgeLength"},{"default":true,"prop":"layoutAnimation"},{"default":0.6,"prop":"friction"}]},{"type":["boolean","string"],"default":false,"prop":"roam"},{"default":0.6,"prop":"nodeScaleRatio"},{"default":false,"prop":"draggable"},{"type":["string","Function"],"default":"'circle'","prop":"symbol"},{"type":["number","Array","Function"],"default":10,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"focusNodeAdjacency"},{"type":["Array","string"],"default":"['none', 'none']","prop":"edgeSymbol"},{"type":["Array","number"],"default":10,"prop":"edgeSymbolSize"},{"default":"'pointer'","prop":"cursor"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":["Color","Function"],"prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#aaa'","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0.5,"prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"edgeLabel","children":[{"default":false,"prop":"show"},{"default":"'middle'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"edgeLabel","children":[{"default":false,"prop":"show"},{"default":"'middle'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Array","isArray":true,"prop":"categories","children":[{"type":"string","prop":"name"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"inside","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"boolean","prop":"fixed"},{"type":["number","Array"],"prop":"value"},{"type":"number","prop":"category"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Array","prop":"nodes"},{"type":"Array","isArray":true,"prop":"links","children":[{"type":["string","number"],"prop":"source"},{"type":["string","number"],"prop":"target"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'middle'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'middle'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":["Array","string"],"prop":"symbol"},{"type":["Array","string"],"prop":"symbolSize"},{"default":false,"prop":"ignoreForceLayout"}]},{"type":"Array","prop":"edges"},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'center'","prop":"left"},{"type":["string","number"],"default":"'middle'","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"},{"type":["string","number"],"default":"auto","prop":"width"},{"type":["string","number"],"default":"auto","prop":"height"},{"default":false,"prop":"silent"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"sankey","children":[{"default":"'sankey'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"5%","prop":"left"},{"type":["string","number"],"default":"5%","prop":"top"},{"type":["string","number"],"default":"20%","prop":"right"},{"type":["string","number"],"default":"5%","prop":"bottom"},{"type":["string","number"],"prop":"width"},{"type":["string","number"],"prop":"height"},{"default":20,"prop":"nodeWidth"},{"default":8,"prop":"nodeGap"},{"default":"'justify'","prop":"nodeAlign"},{"default":32,"prop":"layoutIterations"},{"default":"'horizontal'","prop":"orient"},{"default":true,"prop":"draggable"},{"type":["boolean","string"],"default":false,"prop":"focusNodeAdjacency"},{"type":"Array","isArray":true,"prop":"levels","children":[{"type":"number","prop":"depth"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"'#314656'\"","prop":"color"},{"default":0.2,"prop":"opacity"},{"default":0.5,"prop":"curveness"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'right'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'#aaa'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"'#314656'\"","prop":"color"},{"default":0.2,"prop":"opacity"},{"default":0.5,"prop":"curveness"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"'#314656'\"","prop":"color"},{"default":0.2,"prop":"opacity"},{"default":0.5,"prop":"curveness"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"type":"number","prop":"depth"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Array","prop":"nodes"},{"type":"Array","isArray":true,"prop":"links","children":[{"type":"string","prop":"source"},{"type":"string","prop":"target"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"'#314656'\"","prop":"color"},{"default":0.2,"prop":"opacity"},{"default":0.5,"prop":"curveness"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"'#314656'\"","prop":"color"},{"default":0.2,"prop":"opacity"},{"default":0.5,"prop":"curveness"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]}]}]},{"type":"Array","prop":"edges"},{"default":false,"prop":"silent"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"'linear'","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"funnel","children":[{"default":"'funnel'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":0,"prop":"min"},{"default":100,"prop":"max"},{"type":["number","string"],"default":"'0%'","prop":"minSize"},{"type":["number","string"],"default":"'100%'","prop":"maxSize"},{"type":["string","Function"],"default":"'descending'","prop":"sort"},{"default":0,"prop":"gap"},{"default":true,"prop":"legendHoverLink"},{"default":"'center'","prop":"funnelAlign"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'outside'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"labelLine","children":[{"type":"boolean","prop":"show"},{"type":"number","prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":["Color","Function"],"prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"labelLine","children":[{"type":"boolean","prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":80,"prop":"left"},{"type":["string","number"],"default":60,"prop":"top"},{"type":["string","number"],"default":80,"prop":"right"},{"type":["string","number"],"default":60,"prop":"bottom"},{"type":["string","number"],"default":"'auto'","prop":"width"},{"type":["string","number"],"default":"'auto'","prop":"height"},{"default":"'column'","prop":"seriesLayoutBy"},{"default":0,"prop":"datasetIndex"},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'outside'","prop":"position"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"labelLine","children":[{"type":"boolean","prop":"show"},{"type":"number","prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"labelLine","children":[{"type":"boolean","prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"gauge","children":[{"default":"'gauge'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"type":["number","string"],"default":"'75%'","prop":"radius"},{"default":true,"prop":"legendHoverLink"},{"default":225,"prop":"startAngle"},{"default":-45,"prop":"endAngle"},{"default":true,"prop":"clockwise"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"}]},{"default":0,"prop":"min"},{"default":100,"prop":"max"},{"default":10,"prop":"splitNumber"},{"type":"Object","isObject":true,"prop":"axisLine","children":[{"default":true,"prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Array","prop":"color"},{"default":30,"prop":"width"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"splitLine","children":[{"default":true,"prop":"show"},{"type":["number","string"],"default":30,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#eee","prop":"color"},{"default":2,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisTick","children":[{"default":true,"prop":"show"},{"default":5,"prop":"splitNumber"},{"type":["number","string"],"default":8,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#eee","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisLabel","children":[{"default":true,"prop":"show"},{"default":5,"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"pointer","children":[{"default":true,"prop":"show"},{"type":["string","number"],"default":"'80%'","prop":"length"},{"default":8,"prop":"width"}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"'auto'","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"*","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"title","children":[{"default":true,"prop":"show"},{"type":"Array","default":"[0, '-40%']","prop":"offsetCenter"},{"type":"Color","default":"'#333'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":15,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"detail","children":[{"default":true,"prop":"show"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"default":0,"prop":"borderWidth"},{"type":["Function","string"],"prop":"formatter"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"type":"Array","default":"[0, '40%']","prop":"offsetCenter"},{"type":"Color","default":"'auto'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":15,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"Color","default":"'auto'","prop":"color"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"pictorialBar","children":[{"default":"'pictorialBar'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":true,"prop":"legendHoverLink"},{"default":"'cartesian2d'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"default":"'pointer'","prop":"cursor"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":["number","string"],"prop":"barWidth"},{"type":["number","string"],"prop":"barMaxWidth"},{"type":["number","string"],"prop":"barMinWidth"},{"default":0,"prop":"barMinHeight"},{"default":"-100%","prop":"barGap"},{"default":"'20%'","prop":"barCategoryGap"},{"default":"'circle'","prop":"symbol"},{"type":["number","Array"],"default":"['100%', '100%']","prop":"symbolSize"},{"default":"'start'","prop":"symbolPosition"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"number","prop":"symbolRotate"},{"type":["boolean","number","string"],"prop":"symbolRepeat"},{"default":"'start'","prop":"symbolRepeatDirection"},{"type":["number","string"],"prop":"symbolMargin"},{"default":false,"prop":"symbolClip"},{"type":"number","prop":"symbolBoundingData"},{"default":400,"prop":"symbolPatternSize"},{"default":false,"isObject":true,"prop":"hoverAnimation","children":[{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"default":"'circle'","prop":"symbol"},{"type":["number","Array"],"default":"['100%', '100%']","prop":"symbolSize"},{"default":"'start'","prop":"symbolPosition"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"number","prop":"symbolRotate"},{"type":["boolean","number","string"],"prop":"symbolRepeat"},{"default":"'start'","prop":"symbolRepeatDirection"},{"type":["number","string"],"prop":"symbolMargin"},{"default":false,"prop":"symbolClip"},{"type":"number","prop":"symbolBoundingData"},{"default":400,"prop":"symbolPatternSize"},{"type":"number","prop":"z"},{"default":false,"prop":"hoverAnimation"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"inside","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","isObject":true,"prop":"animationEasingUpdate","children":[{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"themeRiver","children":[{"default":"'themeRiver'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"5%","prop":"left"},{"type":["string","number"],"default":"5%","prop":"top"},{"type":["string","number"],"default":"5%","prop":"right"},{"type":["string","number"],"default":"5%","prop":"bottom"},{"type":["string","number"],"prop":"width"},{"type":["string","number"],"prop":"height"},{"default":"\"single\"","prop":"coordinateSystem"},{"type":"Array","default":"[\"10%\", \"10%\"]","prop":"boundaryGap"},{"default":0,"prop":"singleAxisIndex"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'left'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"'#000'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":11,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'left'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"'#000'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":11,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"default":20,"prop":"shadowBlur"},{"type":"Color","default":"'rgba(0,0,0,0.8)'","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"date"},{"type":"number","prop":"value"},{"type":"string","prop":"name"}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"custom","children":[{"default":"'custom'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":true,"prop":"legendHoverLink"},{"default":"'cartesian2d'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"default":0,"prop":"polarIndex"},{"default":0,"prop":"geoIndex"},{"default":0,"prop":"calendarIndex"},{"type":"Function","isObject":true,"prop":"renderItem","children":[{"type":"*","isObject":true,"prop":"arguments","children":[{"type":"Object","prop":"params"},{"type":"Object","isObject":true,"prop":"api","children":[{"type":"Function","prop":"value"},{"type":"Function","prop":"coord"},{"type":"Function","prop":"size"},{"type":"Function","prop":"style"},{"type":"Function","prop":"styleEmphasis"},{"type":"Function","prop":"visual"},{"type":"Function","prop":"barLayout"},{"type":"Function","prop":"currentSeriesIndices"},{"type":"Function","prop":"font"},{"type":"Function","prop":"getWidth"},{"type":"Function","prop":"getHeight"},{"type":"Function","prop":"getZr"},{"type":"Function","prop":"getDevicePixelRatio"}]}]},{"type":"Object","prop":"return"},{"type":"Object","isObject":true,"prop":"return_group","children":[{"default":"group","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":0,"prop":"width"},{"default":0,"prop":"height"},{"default":false,"prop":"diffChildrenByName"},{"type":"Array","prop":"children"},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_path","children":[{"default":"path","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"type":"string","prop":"pathData"},{"type":"string","prop":"d"},{"default":"'center'","prop":"layout"},{"default":0,"prop":"x"},{"type":"numbr","default":0,"prop":"y"},{"default":0,"prop":"width"},{"type":"numbr","default":0,"prop":"height"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_image","children":[{"default":"image","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"style","children":[{"type":"string","prop":"image"},{"default":0,"prop":"x"},{"type":"numbr","default":0,"prop":"y"},{"default":0,"prop":"width"},{"type":"numbr","default":0,"prop":"height"},{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_text","children":[{"default":"text","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"''","prop":"text"},{"default":0,"prop":"x"},{"type":"numbr","default":0,"prop":"y"},{"type":"string","prop":"font"},{"default":"'left'","prop":"textAlign"},{"type":"string","prop":"textVerticalAlign"},{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_rect","children":[{"default":"rect","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"x"},{"type":"numbr","default":0,"prop":"y"},{"default":0,"prop":"width"},{"type":"numbr","default":0,"prop":"height"},{"type":"Array","prop":"r"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_circle","children":[{"default":"circle","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"cx"},{"type":"numbr","default":0,"prop":"cy"},{"default":0,"prop":"r"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_ring","children":[{"default":"ring","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"cx"},{"type":"numbr","default":0,"prop":"cy"},{"default":0,"prop":"r"},{"default":0,"prop":"r0"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_sector","children":[{"default":"sector","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"cx"},{"type":"numbr","default":0,"prop":"cy"},{"default":0,"prop":"r"},{"default":0,"prop":"r0"},{"default":0,"prop":"startAngle"},{"type":"number","default":"Math.PI * 2","prop":"endAngle"},{"default":true,"prop":"clockwise"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_arc","children":[{"default":"arc","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"cx"},{"type":"numbr","default":0,"prop":"cy"},{"default":0,"prop":"r"},{"default":0,"prop":"r0"},{"default":0,"prop":"startAngle"},{"type":"number","default":"Math.PI * 2","prop":"endAngle"},{"default":true,"prop":"clockwise"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"type":"string","prop":"fill"},{"default":"\"#000\"","prop":"stroke"},{"default":1,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_polygon","children":[{"default":"polygon","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"type":"Array","prop":"points"},{"type":["number","string"],"default":"undefined","prop":"smooth"},{"default":false,"prop":"smoothConstraint"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_polyline","children":[{"default":"polyline","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"type":"Array","prop":"points"},{"type":["number","string"],"default":"undefined","prop":"smooth"},{"default":false,"prop":"smoothConstraint"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"type":"string","prop":"fill"},{"default":"\"#000\"","prop":"stroke"},{"default":5,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_line","children":[{"default":"line","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"x1"},{"default":0,"prop":"y1"},{"default":0,"prop":"x2"},{"default":0,"prop":"y2"},{"default":1,"prop":"percent"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"type":"string","prop":"fill"},{"default":"\"#000\"","prop":"stroke"},{"default":5,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_bezierCurve","children":[{"default":"bezierCurve","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"x1"},{"default":0,"prop":"y1"},{"default":0,"prop":"x2"},{"default":0,"prop":"y2"},{"default":0,"prop":"cpx1"},{"default":0,"prop":"cpy1"},{"type":"number","prop":"cpx2"},{"type":"number","prop":"cpy2"},{"default":1,"prop":"percent"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"default":"'column'","prop":"seriesLayoutBy"},{"default":0,"prop":"datasetIndex"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"default":false,"prop":"clip"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]}]},{"type":"Array","prop":"color"},{"type":"Color","prop":"backgroundColor"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"default":"'source-over'","prop":"blendMode"},{"default":false,"prop":"useUTC"}]}
\ No newline at end of file
+{"children":[{"type":"Object","isObject":true,"prop":"title","children":[{"type":"string","prop":"id"},{"default":true,"prop":"show"},{"default":"''","prop":"text"},{"default":"''","prop":"link"},{"default":"'blank'","prop":"target"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":18,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":"''","prop":"subtext"},{"default":"''","prop":"sublink"},{"default":"'blank'","prop":"subtarget"},{"type":"Object","isObject":true,"prop":"subtextStyle","children":[{"type":"Color","default":"'#aaa'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":"'auto'","prop":"textAlign"},{"default":"'auto'","prop":"textVerticalAlign"},{"default":false,"prop":"triggerEvent"},{"type":["number","Array"],"default":5,"prop":"padding"},{"default":10,"prop":"itemGap"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'auto'","prop":"left"},{"type":["string","number"],"default":"'auto'","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"},{"type":"Color","default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'#ccc'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"type":["number","Array"],"default":0,"prop":"borderRadius"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"legend","children":[{"type":"string","prop":"type"},{"type":"string","prop":"id"},{"default":true,"prop":"show"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'auto'","prop":"left"},{"type":["string","number"],"default":"'auto'","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"},{"type":["string","number"],"default":"'auto'","prop":"width"},{"type":["string","number"],"default":"'auto'","prop":"height"},{"default":"'horizontal'","prop":"orient"},{"default":"'auto'","prop":"align"},{"type":["number","Array"],"default":5,"prop":"padding"},{"default":10,"prop":"itemGap"},{"default":25,"prop":"itemWidth"},{"default":14,"prop":"itemHeight"},{"default":true,"prop":"symbolKeepAspect"},{"type":["string","Function"],"prop":"formatter"},{"type":["string","boolean"],"default":true,"prop":"selectedMode"},{"type":"Color","default":"'#ccc'","prop":"inactiveColor"},{"type":"Object","prop":"selected"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","prop":"tooltip"},{"type":"string","prop":"icon"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"string","prop":"icon"},{"type":"Object","prop":"textStyle"}]},{"type":"Color","default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'#ccc'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"type":["number","Array"],"default":0,"prop":"borderRadius"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0,"prop":"scrollDataIndex"},{"default":5,"prop":"pageButtonItemGap"},{"type":"number","prop":"pageButtonGap"},{"default":"'end'","prop":"pageButtonPosition"},{"type":["string","Function"],"default":"'{current}/{total}'","prop":"pageFormatter"},{"type":"Object","isObject":true,"prop":"pageIcons","children":[{"type":"Array","prop":"horizontal"},{"type":"Array","prop":"vertical"}]},{"default":"'#2f4554'","prop":"pageIconColor"},{"default":"'#aaa'","prop":"pageIconInactiveColor"},{"type":["number","Array"],"default":15,"prop":"pageIconSize"},{"type":"Object","isObject":true,"prop":"pageTextStyle","children":[{"type":"Color","default":"#333","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"boolean","prop":"animation"},{"default":800,"prop":"animationDurationUpdate"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"selectorLabel","children":[{"default":true,"prop":"show"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":["boolean","Array"],"default":false,"prop":"selector"},{"type":"Object","isObject":true,"prop":"selectorLabel","children":[{"default":true,"prop":"show"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":"'auto'","prop":"selectorPosition"},{"default":7,"prop":"selectorItemGap"},{"default":10,"prop":"selectorButtonGap"}]},{"type":"Object","isObject":true,"prop":"grid","children":[{"type":"string","prop":"id"},{"default":false,"prop":"show"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'10%'","prop":"left"},{"type":["string","number"],"default":60,"prop":"top"},{"type":["string","number"],"default":"'10%'","prop":"right"},{"type":["string","number"],"default":60,"prop":"bottom"},{"type":["string","number"],"default":"'auto'","prop":"width"},{"type":["string","number"],"default":"'auto'","prop":"height"},{"default":false,"prop":"containLabel"},{"type":"Color","default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'#ccc'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"Object","isObject":true,"prop":"tooltip","children":[{"default":true,"prop":"show"},{"default":"'item'","prop":"trigger"},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"default":"'line'","prop":"type"},{"default":"'auto'","prop":"axis"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"crossStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"dashed","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":200,"prop":"animationDurationUpdate"},{"default":"exponentialOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"xAxis","children":[{"type":"string","prop":"id"},{"default":true,"prop":"show"},{"default":0,"prop":"gridIndex"},{"type":"string","prop":"position"},{"default":0,"prop":"offset"},{"default":"'category'","prop":"type"},{"type":"string","prop":"name"},{"default":"'end'","prop":"nameLocation"},{"type":"Object","isObject":true,"prop":"nameTextStyle","children":[{"type":"Color","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":15,"prop":"nameGap"},{"type":"number","prop":"nameRotate"},{"default":false,"prop":"inverse"},{"type":["boolean","Array"],"prop":"boundaryGap"},{"type":["number","string","Function"],"prop":"min"},{"type":["number","string","Function"],"prop":"max"},{"default":false,"prop":"scale"},{"default":5,"prop":"splitNumber"},{"default":0,"prop":"minInterval"},{"type":"number","prop":"maxInterval"},{"type":"number","prop":"interval"},{"default":10,"prop":"logBase"},{"default":false,"prop":"silent"},{"default":false,"prop":"triggerEvent"},{"type":"Object","isObject":true,"prop":"axisLine","children":[{"default":true,"prop":"show"},{"default":true,"prop":"onZero"},{"type":"number","prop":"onZeroAxisIndex"},{"type":["string","Array"],"default":"'none'","prop":"symbol"},{"type":"Array","default":"[10, 15]","prop":"symbolSize"},{"type":["Array","number"],"default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisTick","children":[{"default":true,"prop":"show"},{"default":false,"prop":"alignWithLabel"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":5,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorTick","children":[{"default":false,"prop":"show"},{"default":5,"prop":"splitNumber"},{"default":3,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisLabel","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":0,"prop":"rotate"},{"default":8,"prop":"margin"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","prop":"showMinLabel"},{"type":"boolean","prop":"showMaxLabel"},{"type":["Color","Function"],"prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"splitLine","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":["Array","string"],"default":"['#ccc']","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorSplitLine","children":[{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#eee'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"splitArea","children":[{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Array","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"value"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"default":false,"prop":"show"},{"default":"'line'","prop":"type"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"triggerTooltip"},{"type":"number","prop":"value"},{"type":"boolean","prop":"status"},{"type":"Object","isObject":true,"prop":"handle","children":[{"default":false,"prop":"show"},{"type":"*","prop":"icon"},{"type":["number","Array"],"default":45,"prop":"size"},{"default":50,"prop":"margin"},{"default":"'#333'","prop":"color"},{"default":40,"prop":"throttle"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":2,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]}]},{"default":0,"prop":"zlevel"},{"default":0,"prop":"z"}]},{"type":"Object","isObject":true,"prop":"yAxis","children":[{"type":"string","prop":"id"},{"default":true,"prop":"show"},{"default":0,"prop":"gridIndex"},{"type":"string","prop":"position"},{"default":0,"prop":"offset"},{"default":"'value'","prop":"type"},{"type":"string","prop":"name"},{"default":"'end'","prop":"nameLocation"},{"type":"Object","isObject":true,"prop":"nameTextStyle","children":[{"type":"Color","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":15,"prop":"nameGap"},{"type":"number","prop":"nameRotate"},{"default":false,"prop":"inverse"},{"type":["boolean","Array"],"prop":"boundaryGap"},{"type":["number","string","Function"],"prop":"min"},{"type":["number","string","Function"],"prop":"max"},{"default":false,"prop":"scale"},{"default":5,"prop":"splitNumber"},{"default":0,"prop":"minInterval"},{"type":"number","prop":"maxInterval"},{"type":"number","prop":"interval"},{"default":10,"prop":"logBase"},{"default":false,"prop":"silent"},{"default":false,"prop":"triggerEvent"},{"type":"Object","isObject":true,"prop":"axisLine","children":[{"default":true,"prop":"show"},{"default":true,"prop":"onZero"},{"type":"number","prop":"onZeroAxisIndex"},{"type":["string","Array"],"default":"'none'","prop":"symbol"},{"type":"Array","default":"[10, 15]","prop":"symbolSize"},{"type":["Array","number"],"default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisTick","children":[{"default":true,"prop":"show"},{"default":false,"prop":"alignWithLabel"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":5,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorTick","children":[{"default":false,"prop":"show"},{"default":5,"prop":"splitNumber"},{"default":3,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisLabel","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":0,"prop":"rotate"},{"default":8,"prop":"margin"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","prop":"showMinLabel"},{"type":"boolean","prop":"showMaxLabel"},{"type":["Color","Function"],"prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"splitLine","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":["Array","string"],"default":"['#ccc']","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorSplitLine","children":[{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#eee'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"splitArea","children":[{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Array","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"value"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"default":false,"prop":"show"},{"default":"'line'","prop":"type"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"triggerTooltip"},{"type":"number","prop":"value"},{"type":"boolean","prop":"status"},{"type":"Object","isObject":true,"prop":"handle","children":[{"default":false,"prop":"show"},{"type":"*","prop":"icon"},{"type":["number","Array"],"default":45,"prop":"size"},{"default":50,"prop":"margin"},{"default":"'#333'","prop":"color"},{"default":40,"prop":"throttle"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":2,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]}]},{"default":0,"prop":"zlevel"},{"default":0,"prop":"z"}]},{"type":"Object","isObject":true,"prop":"polar","children":[{"type":"string","prop":"id"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":"Array","default":"['50%', '50%']","prop":"center"},{"type":["number","string","Array"],"prop":"radius"},{"type":"Object","isObject":true,"prop":"tooltip","children":[{"default":true,"prop":"show"},{"default":"'item'","prop":"trigger"},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"default":"'line'","prop":"type"},{"default":"'auto'","prop":"axis"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"crossStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"dashed","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":200,"prop":"animationDurationUpdate"},{"default":"exponentialOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"radiusAxis","children":[{"type":"string","prop":"id"},{"default":0,"prop":"polarIndex"},{"default":"'value'","prop":"type"},{"type":"string","prop":"name"},{"default":"'end'","prop":"nameLocation"},{"type":"Object","isObject":true,"prop":"nameTextStyle","children":[{"type":"Color","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":15,"prop":"nameGap"},{"type":"number","prop":"nameRotate"},{"default":false,"prop":"inverse"},{"type":["boolean","Array"],"prop":"boundaryGap"},{"type":["number","string","Function"],"prop":"min"},{"type":["number","string","Function"],"prop":"max"},{"default":false,"prop":"scale"},{"default":5,"prop":"splitNumber"},{"default":0,"prop":"minInterval"},{"type":"number","prop":"maxInterval"},{"type":"number","prop":"interval"},{"default":10,"prop":"logBase"},{"default":false,"prop":"silent"},{"default":false,"prop":"triggerEvent"},{"type":"Object","isObject":true,"prop":"axisLine","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'none'","prop":"symbol"},{"type":"Array","default":"[10, 15]","prop":"symbolSize"},{"type":["Array","number"],"default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisTick","children":[{"default":true,"prop":"show"},{"default":false,"prop":"alignWithLabel"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":5,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorTick","children":[{"default":false,"prop":"show"},{"default":5,"prop":"splitNumber"},{"default":3,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisLabel","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":0,"prop":"rotate"},{"default":8,"prop":"margin"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","prop":"showMinLabel"},{"type":"boolean","prop":"showMaxLabel"},{"type":["Color","Function"],"prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"splitLine","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":["Array","string"],"default":"['#ccc']","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorSplitLine","children":[{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#eee'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"splitArea","children":[{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Array","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"value"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"default":false,"prop":"show"},{"default":"'line'","prop":"type"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"triggerTooltip"},{"type":"number","prop":"value"},{"type":"boolean","prop":"status"},{"type":"Object","isObject":true,"prop":"handle","children":[{"default":false,"prop":"show"},{"type":"*","prop":"icon"},{"type":["number","Array"],"default":45,"prop":"size"},{"default":50,"prop":"margin"},{"default":"'#333'","prop":"color"},{"default":40,"prop":"throttle"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":2,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]}]},{"default":0,"prop":"zlevel"},{"default":0,"prop":"z"}]},{"type":"Object","isObject":true,"prop":"angleAxis","children":[{"type":"string","prop":"id"},{"default":0,"prop":"polarIndex"},{"default":90,"prop":"startAngle"},{"default":true,"prop":"clockwise"},{"default":"'category'","prop":"type"},{"type":["boolean","Array"],"prop":"boundaryGap"},{"type":["number","string","Function"],"prop":"min"},{"type":["number","string","Function"],"prop":"max"},{"default":false,"prop":"scale"},{"default":5,"prop":"splitNumber"},{"default":0,"prop":"minInterval"},{"type":"number","prop":"maxInterval"},{"type":"number","prop":"interval"},{"default":10,"prop":"logBase"},{"default":false,"prop":"silent"},{"default":false,"prop":"triggerEvent"},{"type":"Object","isObject":true,"prop":"axisLine","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'none'","prop":"symbol"},{"type":"Array","default":"[10, 15]","prop":"symbolSize"},{"type":["Array","number"],"default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisTick","children":[{"default":true,"prop":"show"},{"default":false,"prop":"alignWithLabel"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":5,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorTick","children":[{"default":false,"prop":"show"},{"default":5,"prop":"splitNumber"},{"default":3,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisLabel","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":8,"prop":"margin"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","prop":"showMinLabel"},{"type":"boolean","prop":"showMaxLabel"},{"type":["Color","Function"],"prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"splitLine","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":["Array","string"],"default":"['#ccc']","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorSplitLine","children":[{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#eee'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"splitArea","children":[{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Array","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"value"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"default":false,"prop":"show"},{"default":"'line'","prop":"type"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"triggerTooltip"},{"type":"number","prop":"value"},{"type":"boolean","prop":"status"},{"type":"Object","isObject":true,"prop":"handle","children":[{"default":false,"prop":"show"},{"type":"*","prop":"icon"},{"type":["number","Array"],"default":45,"prop":"size"},{"default":50,"prop":"margin"},{"default":"'#333'","prop":"color"},{"default":40,"prop":"throttle"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":2,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]}]},{"default":0,"prop":"zlevel"},{"default":0,"prop":"z"}]},{"type":"Object","isObject":true,"prop":"radar","children":[{"type":"string","prop":"id"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":"Array","default":"['50%', '50%']","prop":"center"},{"type":["number","string","Array"],"default":"75%","prop":"radius"},{"default":90,"prop":"startAngle"},{"type":"Object","isObject":true,"prop":"name","children":[{"default":true,"prop":"show"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":15,"prop":"nameGap"},{"default":5,"prop":"splitNumber"},{"default":"'polygon'","prop":"shape"},{"default":false,"prop":"scale"},{"default":false,"prop":"silent"},{"default":false,"prop":"triggerEvent"},{"type":"Object","isObject":true,"prop":"axisLine","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'none'","prop":"symbol"},{"type":"Array","default":"[10, 15]","prop":"symbolSize"},{"type":["Array","number"],"default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisTick","children":[{"default":true,"prop":"show"},{"default":5,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisLabel","children":[{"default":true,"prop":"show"},{"default":0,"prop":"rotate"},{"default":8,"prop":"margin"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","prop":"showMinLabel"},{"type":"boolean","prop":"showMaxLabel"},{"type":["Color","Function"],"prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"splitLine","children":[{"default":true,"prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":["Array","string"],"default":"['#ccc']","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"splitArea","children":[{"default":true,"prop":"show"},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Array","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"indicator","children":[{"type":"string","prop":"name"},{"type":"number","prop":"max"},{"type":"number","prop":"min"}]},{"type":"string","prop":"color"}]},{"type":"Array","isArray":true,"prop":"dataZoom","children":[{"type":"Object","isObject":true,"arrayItemType":"inside","children":[{"default":"'inside'","prop":"type"},{"type":"string","prop":"id"},{"default":false,"prop":"disabled"},{"type":["number","Array"],"prop":"xAxisIndex"},{"type":["number","Array"],"prop":"yAxisIndex"},{"type":["number","Array"],"prop":"radiusAxisIndex"},{"type":["number","Array"],"prop":"angleAxisIndex"},{"default":"'filter'","prop":"filterMode"},{"default":0,"prop":"start"},{"default":100,"prop":"end"},{"type":["number","string","Date"],"prop":"startValue"},{"type":["number","string","Date"],"prop":"endValue"},{"type":"number","prop":"minSpan"},{"type":"number","prop":"maxSpan"},{"type":["number","string","Date"],"prop":"minValueSpan"},{"type":["number","string","Date"],"prop":"maxValueSpan"},{"type":"string","prop":"orient"},{"default":false,"prop":"zoomLock"},{"default":100,"prop":"throttle"},{"type":"Array","prop":"rangeMode"},{"type":["boolean","string"],"default":true,"prop":"zoomOnMouseWheel"},{"type":["boolean","string"],"default":true,"prop":"moveOnMouseMove"},{"type":["boolean","string"],"default":false,"prop":"moveOnMouseWheel"},{"default":true,"prop":"preventDefaultMouseMove"}]},{"type":"Object","isObject":true,"arrayItemType":"slider","children":[{"default":"'slider'","prop":"type"},{"type":"string","prop":"id"},{"default":true,"prop":"show"},{"type":"Color","default":"'rgba(47,69,84,0)'","prop":"backgroundColor"},{"type":"Object","isObject":true,"prop":"dataBackground","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#2f4554","prop":"color"},{"default":0.5,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0.3,"prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Color","default":"rgba(47,69,84,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0.3,"prop":"opacity"}]}]},{"type":"Color","default":"'rgba(47,69,84,0.25)'","prop":"fillerColor"},{"type":"Color","default":"'#ddd'","prop":"borderColor"},{"type":"string","prop":"handleIcon"},{"type":["number","string"],"default":"'100%'","prop":"handleSize"},{"type":"Object","isObject":true,"prop":"handleStyle","children":[{"type":"Color","default":"#a7b7cc","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":["number","string"],"default":"'auto'","prop":"labelPrecision"},{"type":["string","Function"],"prop":"labelFormatter"},{"default":true,"prop":"showDetail"},{"default":"'auto'","prop":"showDataShadow"},{"default":true,"prop":"realtime"},{"type":"*","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"#333","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":["number","Array"],"prop":"xAxisIndex"},{"type":["number","Array"],"prop":"yAxisIndex"},{"type":["number","Array"],"prop":"radiusAxisIndex"},{"type":["number","Array"],"prop":"angleAxisIndex"},{"default":"'filter'","prop":"filterMode"},{"default":0,"prop":"start"},{"default":100,"prop":"end"},{"type":["number","string","Date"],"prop":"startValue"},{"type":["number","string","Date"],"prop":"endValue"},{"type":"number","prop":"minSpan"},{"type":"number","prop":"maxSpan"},{"type":["number","string","Date"],"prop":"minValueSpan"},{"type":["number","string","Date"],"prop":"maxValueSpan"},{"type":"string","prop":"orient"},{"default":false,"prop":"zoomLock"},{"default":100,"prop":"throttle"},{"type":"Array","prop":"rangeMode"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'auto'","prop":"left"},{"type":["string","number"],"default":"'auto'","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"}]}]},{"type":"Array","isArray":true,"prop":"visualMap","children":[{"type":"Object","isObject":true,"arrayItemType":"continuous","children":[{"default":"continuous","prop":"type"},{"type":"string","prop":"id"},{"type":"number","prop":"min"},{"type":"number","prop":"max"},{"type":"Array","prop":"range"},{"default":false,"prop":"calculable"},{"default":true,"prop":"realtime"},{"default":false,"prop":"inverse"},{"default":0,"prop":"precision"},{"default":20,"prop":"itemWidth"},{"default":140,"prop":"itemHeight"},{"default":"'auto'","prop":"align"},{"type":"Array","prop":"text"},{"default":10,"prop":"textGap"},{"default":true,"prop":"show"},{"type":"string","prop":"dimension"},{"type":["number","Array"],"prop":"seriesIndex"},{"default":true,"prop":"hoverLink"},{"type":"Object","prop":"inRange"},{"type":"Object","prop":"outOfRange"},{"type":"Object","isObject":true,"prop":"controller","children":[{"type":"Object","prop":"inRange"},{"type":"Object","prop":"outOfRange"}]},{"default":0,"prop":"zlevel"},{"default":4,"prop":"z"},{"type":["string","number"],"default":0,"prop":"left"},{"type":["string","number"],"default":"auto","prop":"top"},{"type":["string","number"],"default":"auto","prop":"right"},{"type":["string","number"],"default":0,"prop":"bottom"},{"default":"'vertical'","prop":"orient"},{"type":["number","Array"],"default":5,"prop":"padding"},{"type":"Color","default":"'rgba(0,0,0,0)'","prop":"backgroundColor"},{"type":"Color","default":"'#ccc'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":"Array","default":"['#bf444c', '#d88273', '#f6efa6']","prop":"color"},{"type":"*","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"#333","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"arrayItemType":"piecewise","children":[{"default":"piecewise","prop":"type"},{"type":"string","prop":"id"},{"default":5,"prop":"splitNumber"},{"type":"Array","prop":"pieces"},{"type":"Array","prop":"categories"},{"type":"number","prop":"min"},{"type":"number","prop":"max"},{"type":"boolean","prop":"minOpen"},{"type":"boolean","prop":"maxOpen"},{"default":"'multiple'","prop":"selectedMode"},{"default":false,"prop":"inverse"},{"type":"number","prop":"precision"},{"default":20,"prop":"itemWidth"},{"default":14,"prop":"itemHeight"},{"default":"'auto'","prop":"align"},{"type":"Array","prop":"text"},{"default":10,"prop":"textGap"},{"type":"boolean","prop":"showLabel"},{"type":"*","prop":"itemGap = 10"},{"default":"'roundRect'","prop":"itemSymbol"},{"default":true,"prop":"show"},{"type":"string","prop":"dimension"},{"type":["number","Array"],"prop":"seriesIndex"},{"default":true,"prop":"hoverLink"},{"type":"Object","prop":"inRange"},{"type":"Object","prop":"outOfRange"},{"type":"Object","isObject":true,"prop":"controller","children":[{"type":"Object","prop":"inRange"},{"type":"Object","prop":"outOfRange"}]},{"default":0,"prop":"zlevel"},{"default":4,"prop":"z"},{"type":["string","number"],"default":0,"prop":"left"},{"type":["string","number"],"default":"auto","prop":"top"},{"type":["string","number"],"default":"auto","prop":"right"},{"type":["string","number"],"default":0,"prop":"bottom"},{"default":"'vertical'","prop":"orient"},{"type":["number","Array"],"default":5,"prop":"padding"},{"type":"Color","default":"'rgba(0,0,0,0)'","prop":"backgroundColor"},{"type":"Color","default":"'#ccc'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":"Array","default":"['#bf444c', '#d88273', '#f6efa6']","prop":"color"},{"type":"*","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"#333","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"tooltip","children":[{"default":true,"prop":"show"},{"default":"'item'","prop":"trigger"},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"default":"'line'","prop":"type"},{"default":"'auto'","prop":"axis"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"crossStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"dashed","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":200,"prop":"animationDurationUpdate"},{"default":"exponentialOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":true,"prop":"showContent"},{"default":false,"prop":"alwaysShowContent"},{"default":"'mousemove|click'","prop":"triggerOn"},{"default":0,"prop":"showDelay"},{"default":100,"prop":"hideDelay"},{"default":true,"prop":"enterable"},{"default":"'html'","prop":"renderMode"},{"default":false,"prop":"confine"},{"default":false,"prop":"appendToBody"},{"default":0.4,"prop":"transitionDuration"},{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"type":"string","prop":"id"},{"default":false,"prop":"show"},{"default":"'line'","prop":"type"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"triggerTooltip"},{"type":"number","prop":"value"},{"type":"boolean","prop":"status"},{"type":"Object","isObject":true,"prop":"handle","children":[{"default":false,"prop":"show"},{"type":"*","prop":"icon"},{"type":["number","Array"],"default":45,"prop":"size"},{"default":50,"prop":"margin"},{"default":"'#333'","prop":"color"},{"default":40,"prop":"throttle"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":2,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Array","prop":"link"},{"default":"'mousemove|click'","prop":"triggerOn"}]},{"type":"Object","isObject":true,"prop":"toolbox","children":[{"type":"string","prop":"id"},{"default":true,"prop":"show"},{"default":"'horizontal'","prop":"orient"},{"default":15,"prop":"itemSize"},{"default":10,"prop":"itemGap"},{"default":true,"prop":"showTitle"},{"type":"Object","isObject":true,"prop":"feature","children":[{"type":"Object","isObject":true,"prop":"saveAsImage","children":[{"default":"'png'","prop":"type"},{"type":"string","prop":"name"},{"type":"Color","default":"'auto'","prop":"backgroundColor"},{"type":"Color","default":"'#fff'","prop":"connectedBackgroundColor"},{"type":"Array","default":"['toolbox']","prop":"excludeComponents"},{"default":true,"prop":"show"},{"default":"'save as image'","prop":"title"},{"type":"*","prop":"icon"},{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","default":"none","prop":"color"},{"type":"Color","default":"#666","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":"'bottom'","prop":"textPosition"},{"default":"'#000'","prop":"textFill"},{"default":"'center'","prop":"textAlign"},{"type":"string","prop":"textBackgroundColor"},{"type":"number","prop":"textBorderRadius"},{"type":"number","prop":"textPadding"}]}]},{"default":1,"prop":"pixelRatio"}]},{"type":"Object","isObject":true,"prop":"restore","children":[{"default":true,"prop":"show"},{"default":"'restore'","prop":"title"},{"type":"*","prop":"icon"},{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","default":"none","prop":"color"},{"type":"Color","default":"#666","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":"'bottom'","prop":"textPosition"},{"default":"'#000'","prop":"textFill"},{"default":"'center'","prop":"textAlign"},{"type":"string","prop":"textBackgroundColor"},{"type":"number","prop":"textBorderRadius"},{"type":"number","prop":"textPadding"}]}]}]},{"type":"Object","isObject":true,"prop":"dataView","children":[{"default":true,"prop":"show"},{"default":"'data view'","prop":"title"},{"type":"*","prop":"icon"},{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","default":"none","prop":"color"},{"type":"Color","default":"#666","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":"'bottom'","prop":"textPosition"},{"default":"'#000'","prop":"textFill"},{"default":"'center'","prop":"textAlign"},{"type":"string","prop":"textBackgroundColor"},{"type":"number","prop":"textBorderRadius"},{"type":"number","prop":"textPadding"}]}]},{"default":false,"prop":"readOnly"},{"type":"Function","prop":"optionToContent"},{"type":"Function","prop":"contentToOption"},{"type":"Array","default":"['data view', 'turn off', 'refresh']","prop":"lang"},{"default":"'#fff'","prop":"backgroundColor"},{"default":"'#fff'","prop":"textareaColor"},{"default":"'#333'","prop":"textareaBorderColor"},{"default":"'#000'","prop":"textColor"},{"default":"'#c23531'","prop":"buttonColor"},{"default":"'#fff'","prop":"buttonTextColor"}]},{"type":"Object","isObject":true,"prop":"dataZoom","children":[{"default":true,"prop":"show"},{"type":"Object","isObject":true,"prop":"title","children":[{"default":"'area zooming'","prop":"zoom"},{"default":"'restore area zooming'","prop":"back"}]},{"type":"Object","isObject":true,"prop":"icon","children":[{"type":"string","prop":"zoom"},{"type":"string","prop":"back"}]},{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","default":"none","prop":"color"},{"type":"Color","default":"#666","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":"'bottom'","prop":"textPosition"},{"default":"'#000'","prop":"textFill"},{"default":"'center'","prop":"textAlign"},{"type":"string","prop":"textBackgroundColor"},{"type":"number","prop":"textBorderRadius"},{"type":"number","prop":"textPadding"}]}]},{"default":"'filter'","prop":"filterMode"},{"type":["number","Array","boolean"],"prop":"xAxisIndex"},{"type":["number","Array","boolean"],"prop":"yAxisIndex"}]},{"type":"Object","isObject":true,"prop":"magicType","children":[{"default":true,"prop":"show"},{"type":"Array","prop":"type"},{"type":"Object","isObject":true,"prop":"title","children":[{"default":"'for line charts'","prop":"line"},{"default":"'for bar charts'","prop":"bar"},{"default":"'for stacked charts'","prop":"stack"},{"default":"'for tiled charts'","prop":"tiled"}]},{"type":"Object","isObject":true,"prop":"icon","children":[{"type":"string","prop":"line"},{"type":"string","prop":"bar"},{"type":"string","prop":"stack"},{"type":"string","prop":"tiled"}]},{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","default":"none","prop":"color"},{"type":"Color","default":"#666","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":"'bottom'","prop":"textPosition"},{"default":"'#000'","prop":"textFill"},{"default":"'center'","prop":"textAlign"},{"type":"string","prop":"textBackgroundColor"},{"type":"number","prop":"textBorderRadius"},{"type":"number","prop":"textPadding"}]}]},{"type":"Object","isObject":true,"prop":"option","children":[{"type":"Object","prop":"line"},{"type":"Object","prop":"bar"},{"type":"Object","prop":"stack"},{"type":"Object","prop":"tiled"}]},{"type":"Object","isObject":true,"prop":"seriesIndex","children":[{"type":"Array","prop":"line"},{"type":"Array","prop":"bar"},{"type":"Array","prop":"stack"},{"type":"Array","prop":"tiled"}]}]},{"type":"Object","isObject":true,"prop":"brush","children":[{"type":"Array","prop":"type"},{"type":"Object","isObject":true,"prop":"icon","children":[{"type":"string","prop":"rect"},{"type":"string","prop":"polygon"},{"type":"string","prop":"lineX"},{"type":"string","prop":"lineY"},{"type":"string","prop":"keep"},{"type":"string","prop":"clear"}]},{"type":"Object","isObject":true,"prop":"title","children":[{"default":"'Rectangle selection'","prop":"rect"},{"default":"'Polygon selection'","prop":"polygon"},{"default":"'Horizontal selection'","prop":"lineX"},{"default":"'Vertical selection'","prop":"lineY"},{"default":"'Keep previous selection'","prop":"keep"},{"default":"'Clear selection'","prop":"clear"}]}]}]},{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","default":"none","prop":"color"},{"type":"Color","default":"#666","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"iconStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":"'bottom'","prop":"textPosition"},{"default":"'#000'","prop":"textFill"},{"default":"'center'","prop":"textAlign"},{"type":"string","prop":"textBackgroundColor"},{"type":"number","prop":"textBorderRadius"},{"type":"number","prop":"textPadding"}]}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'auto'","prop":"left"},{"type":["string","number"],"default":"'auto'","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"},{"type":["string","number"],"default":"'auto'","prop":"width"},{"type":["string","number"],"default":"'auto'","prop":"height"},{"type":"Object","prop":"tooltip"}]},{"type":"Object","isObject":true,"prop":"brush","children":[{"type":"string","prop":"id"},{"type":"Array","default":"['rect', 'polygon', 'keep', 'clear']","prop":"toolbox"},{"type":["Array","string"],"prop":"brushLink"},{"type":["Array","number","string"],"default":"'all'","prop":"seriesIndex"},{"type":["Array","number","string"],"prop":"geoIndex"},{"type":["Array","number","string"],"prop":"xAxisIndex"},{"type":["Array","number","string"],"prop":"yAxisIndex"},{"default":"'rect'","prop":"brushType"},{"default":"'single'","prop":"brushMode"},{"default":true,"prop":"transformable"},{"type":"Object","prop":"brushStyle"},{"default":"'fixRate'","prop":"throttleType"},{"default":0,"prop":"throttleDelay"},{"default":true,"prop":"removeOnClick"},{"type":"Object","prop":"inBrush"},{"type":"Object","prop":"outOfBrush"},{"default":10000,"prop":"z"}]},{"type":"Object","isObject":true,"prop":"geo","children":[{"type":"string","prop":"id"},{"default":true,"prop":"show"},{"default":"''","prop":"map"},{"type":["boolean","string"],"default":false,"prop":"roam"},{"type":"Array","prop":"center"},{"default":0.75,"prop":"aspectScale"},{"type":"Array","prop":"boundingCoords"},{"default":1,"prop":"zoom"},{"type":"Object","isObject":true,"prop":"scaleLimit","children":[{"type":"number","prop":"min"},{"type":"number","prop":"max"}]},{"type":"Object","prop":"nameMap"},{"default":"'name'","prop":"nameProperty"},{"type":["boolean","string"],"default":false,"prop":"selectedMode"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"'#eee'","prop":"areaColor"},{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"'#eee'","prop":"areaColor"},{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'auto'","prop":"left"},{"type":["string","number"],"default":"'auto'","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"},{"type":"Array","prop":"layoutCenter"},{"type":["number","string"],"prop":"layoutSize"},{"type":"Array","isArray":true,"prop":"regions","children":[{"type":"string","prop":"name"},{"default":false,"prop":"selected"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"areaColor"},{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"areaColor"},{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":false,"prop":"silent"}]},{"type":"Object","isObject":true,"prop":"parallel","children":[{"type":"string","prop":"id"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":80,"prop":"left"},{"type":["string","number"],"default":60,"prop":"top"},{"type":["string","number"],"default":80,"prop":"right"},{"type":["string","number"],"default":60,"prop":"bottom"},{"type":["string","number"],"default":"'auto'","prop":"width"},{"type":["string","number"],"default":"'auto'","prop":"height"},{"default":"'horizontal'","prop":"layout"},{"default":false,"prop":"axisExpandable"},{"type":"number","prop":"axisExpandCenter"},{"default":0,"prop":"axisExpandCount"},{"default":50,"prop":"axisExpandWidth"},{"default":"'click'","prop":"axisExpandTriggerOn"},{"type":"Object","isObject":true,"prop":"parallelAxisDefault","children":[{"default":"value","prop":"type"},{"type":"string","prop":"name"},{"default":"'end'","prop":"nameLocation"},{"type":"Object","isObject":true,"prop":"nameTextStyle","children":[{"type":"Color","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":15,"prop":"nameGap"},{"type":"number","prop":"nameRotate"},{"default":false,"prop":"inverse"},{"type":["boolean","Array"],"prop":"boundaryGap"},{"type":["number","string","Function"],"prop":"min"},{"type":["number","string","Function"],"prop":"max"},{"default":false,"prop":"scale"},{"default":5,"prop":"splitNumber"},{"default":0,"prop":"minInterval"},{"type":"number","prop":"maxInterval"},{"type":"number","prop":"interval"},{"default":10,"prop":"logBase"},{"default":false,"prop":"silent"},{"default":false,"prop":"triggerEvent"},{"type":"Object","isObject":true,"prop":"axisLine","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'none'","prop":"symbol"},{"type":"Array","default":"[10, 15]","prop":"symbolSize"},{"type":["Array","number"],"default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisTick","children":[{"default":true,"prop":"show"},{"default":false,"prop":"alignWithLabel"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":5,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorTick","children":[{"default":false,"prop":"show"},{"default":5,"prop":"splitNumber"},{"default":3,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisLabel","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":0,"prop":"rotate"},{"default":8,"prop":"margin"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","prop":"showMinLabel"},{"type":"boolean","prop":"showMaxLabel"},{"type":["Color","Function"],"prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"value"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"parallelAxis","children":[{"type":"string","prop":"id"},{"type":"number","prop":"dim"},{"default":0,"prop":"parallelIndex"},{"default":true,"prop":"realtime"},{"type":"Object","isObject":true,"prop":"areaSelectStyle","children":[{"default":20,"prop":"width"},{"default":1,"prop":"borderWidth"},{"type":"Color","default":"'rgba(160,197,232)'","prop":"borderColor"},{"type":"Color","default":"'rgba(160,197,232)'","prop":"color"},{"default":0.3,"prop":"opacity"}]},{"default":"value","prop":"type"},{"type":"string","prop":"name"},{"default":"'end'","prop":"nameLocation"},{"type":"Object","isObject":true,"prop":"nameTextStyle","children":[{"type":"Color","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":15,"prop":"nameGap"},{"type":"number","prop":"nameRotate"},{"default":false,"prop":"inverse"},{"type":["boolean","Array"],"prop":"boundaryGap"},{"type":["number","string","Function"],"prop":"min"},{"type":["number","string","Function"],"prop":"max"},{"default":false,"prop":"scale"},{"default":5,"prop":"splitNumber"},{"default":0,"prop":"minInterval"},{"type":"number","prop":"maxInterval"},{"type":"number","prop":"interval"},{"default":10,"prop":"logBase"},{"default":false,"prop":"silent"},{"default":false,"prop":"triggerEvent"},{"type":"Object","isObject":true,"prop":"axisLine","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'none'","prop":"symbol"},{"type":"Array","default":"[10, 15]","prop":"symbolSize"},{"type":["Array","number"],"default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisTick","children":[{"default":true,"prop":"show"},{"default":false,"prop":"alignWithLabel"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":5,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorTick","children":[{"default":false,"prop":"show"},{"default":5,"prop":"splitNumber"},{"default":3,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisLabel","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":0,"prop":"rotate"},{"default":8,"prop":"margin"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","prop":"showMinLabel"},{"type":"boolean","prop":"showMaxLabel"},{"type":["Color","Function"],"prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"value"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"singleAxis","children":[{"type":"string","prop":"id"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'5%'","prop":"left"},{"type":["string","number"],"default":"'5%'","prop":"top"},{"type":["string","number"],"default":"'5%'","prop":"right"},{"type":["string","number"],"default":"'5%'","prop":"bottom"},{"type":["string","number"],"default":"'auto'","prop":"width"},{"type":["string","number"],"default":"'auto'","prop":"height"},{"default":"'horizontal'","prop":"orient"},{"default":"'value'","prop":"type"},{"type":"string","prop":"name"},{"default":"'end'","prop":"nameLocation"},{"type":"Object","isObject":true,"prop":"nameTextStyle","children":[{"type":"Color","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":15,"prop":"nameGap"},{"type":"number","prop":"nameRotate"},{"default":false,"prop":"inverse"},{"type":["boolean","Array"],"prop":"boundaryGap"},{"type":["number","string","Function"],"prop":"min"},{"type":["number","string","Function"],"prop":"max"},{"default":false,"prop":"scale"},{"default":5,"prop":"splitNumber"},{"default":0,"prop":"minInterval"},{"type":"number","prop":"maxInterval"},{"type":"number","prop":"interval"},{"default":10,"prop":"logBase"},{"default":false,"prop":"silent"},{"default":false,"prop":"triggerEvent"},{"type":"Object","isObject":true,"prop":"axisLine","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'none'","prop":"symbol"},{"type":"Array","default":"[10, 15]","prop":"symbolSize"},{"type":["Array","number"],"default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#333'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisTick","children":[{"default":true,"prop":"show"},{"default":false,"prop":"alignWithLabel"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":5,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorTick","children":[{"default":false,"prop":"show"},{"default":5,"prop":"splitNumber"},{"default":3,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisLabel","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"inside"},{"default":0,"prop":"rotate"},{"default":8,"prop":"margin"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","prop":"showMinLabel"},{"type":"boolean","prop":"showMaxLabel"},{"type":["Color","Function"],"prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"splitLine","children":[{"default":true,"prop":"show"},{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":["Array","string"],"default":"['#ccc']","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"minorSplitLine","children":[{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#eee'","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"splitArea","children":[{"type":["number","Function"],"default":"'auto'","prop":"interval"},{"default":false,"prop":"show"},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Array","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"value"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"default":false,"prop":"show"},{"default":"'line'","prop":"type"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"triggerTooltip"},{"type":"number","prop":"value"},{"type":"boolean","prop":"status"},{"type":"Object","isObject":true,"prop":"handle","children":[{"default":false,"prop":"show"},{"type":"*","prop":"icon"},{"type":["number","Array"],"default":45,"prop":"size"},{"default":50,"prop":"margin"},{"default":"'#333'","prop":"color"},{"default":40,"prop":"throttle"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":2,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"tooltip","children":[{"default":true,"prop":"show"},{"default":"'item'","prop":"trigger"},{"type":"Object","isObject":true,"prop":"axisPointer","children":[{"default":"'line'","prop":"type"},{"default":"'auto'","prop":"axis"},{"type":"boolean","prop":"snap"},{"type":"number","prop":"z"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["number","string"],"default":"'auto'","prop":"precision"},{"type":["string","Function"],"prop":"formatter"},{"type":"boolean","default":3,"prop":"margin"},{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":["string","Array"],"default":"[5, 7, 5, 7]","prop":"padding"},{"default":"'auto'","prop":"backgroundColor"},{"type":"string","prop":"borderColor"},{"type":"string","default":0,"prop":"borderWidth"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"#aaa","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"shadowStyle","children":[{"type":"Color","default":"'rgba(150,150,150,0.3)","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"crossStyle","children":[{"type":"Color","default":"#555","prop":"color"},{"default":1,"prop":"width"},{"default":"dashed","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":200,"prop":"animationDurationUpdate"},{"default":"exponentialOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"timeline","children":[{"default":true,"prop":"show"},{"default":"'slider'","prop":"type"},{"default":"'time'","prop":"axisType"},{"default":0,"prop":"currentIndex"},{"default":false,"prop":"autoPlay"},{"default":false,"prop":"rewind"},{"default":true,"prop":"loop"},{"default":2000,"prop":"playInterval"},{"default":true,"prop":"realtime"},{"default":"'left'","prop":"controlPosition"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'auto'","prop":"left"},{"type":["string","number"],"default":"'auto'","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"},{"type":["number","Array"],"default":5,"prop":"padding"},{"default":"'horizontal'","prop":"orient"},{"default":false,"prop":"inverse"},{"default":"'emptyCircle'","prop":"symbol"},{"type":["number","Array"],"default":10,"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"default":true,"prop":"show"},{"type":"Color","default":"'#304654'","prop":"color"},{"default":2,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'auto'","prop":"position"},{"default":true,"prop":"show"},{"type":["string","number"],"default":"'auto'","prop":"interval"},{"type":"prefix","default":0,"prop":"rotate"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'#304654'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"type":["string","number"],"default":"'auto'","prop":"interval"},{"type":"prefix","default":0,"prop":"rotate"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'#c23531'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"'#304654'","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"'#c23531'","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"checkpointStyle","children":[{"default":"'circle'","prop":"symbol"},{"type":["number","Array"],"default":13,"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Color","default":"'#c23531'","prop":"color"},{"default":5,"prop":"borderWidth"},{"type":"Color","default":"'rgba(194,53,49, 0.5)'","prop":"borderColor"},{"default":true,"prop":"animation"},{"default":300,"prop":"animationDuration"},{"default":"'quinticInOut'","prop":"animationEasing"}]},{"type":"Object","isObject":true,"prop":"controlStyle","children":[{"default":true,"prop":"show"},{"default":true,"prop":"showPlayBtn"},{"default":true,"prop":"showPrevBtn"},{"default":true,"prop":"showNextBtn"},{"default":22,"prop":"itemSize"},{"default":12,"prop":"itemGap"},{"default":"'left'","prop":"position"},{"type":"string","prop":"playIcon"},{"type":"string","prop":"stopIcon"},{"type":"string","prop":"prevIcon"},{"type":"string","prop":"nextIcon"},{"type":"Color","default":"'#304654'","prop":"color"},{"type":"Color","default":"'#304654'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"'#c23531'","prop":"color"},{"type":"Color","default":"'#c23531'","prop":"borderColor"},{"default":2,"prop":"borderWidth"}]}]},{"type":"Array","prop":"data"}]},{"type":"*","isObject":true,"prop":"graphic","children":[{"type":"string","prop":"id"},{"type":"Array","isArray":true,"prop":"elements","children":[{"type":"Object","isObject":true,"arrayItemType":"group","children":[{"default":"group","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"default":0,"prop":"width"},{"default":0,"prop":"height"},{"default":false,"prop":"diffChildrenByName"},{"type":"Array","prop":"children"},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"image","children":[{"default":"image","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"style","children":[{"type":"string","prop":"image"},{"default":0,"prop":"x"},{"type":"numbr","default":0,"prop":"y"},{"default":0,"prop":"width"},{"type":"numbr","default":0,"prop":"height"},{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"text","children":[{"default":"text","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"''","prop":"text"},{"default":0,"prop":"x"},{"type":"numbr","default":0,"prop":"y"},{"type":"string","prop":"font"},{"default":"'left'","prop":"textAlign"},{"type":"string","prop":"textVerticalAlign"},{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"rect","children":[{"default":"rect","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"x"},{"type":"numbr","default":0,"prop":"y"},{"default":0,"prop":"width"},{"type":"numbr","default":0,"prop":"height"},{"type":"Array","prop":"r"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"circle","children":[{"default":"circle","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"cx"},{"type":"numbr","default":0,"prop":"cy"},{"default":0,"prop":"r"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"ring","children":[{"default":"ring","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"cx"},{"type":"numbr","default":0,"prop":"cy"},{"default":0,"prop":"r"},{"default":0,"prop":"r0"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"sector","children":[{"default":"sector","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"cx"},{"type":"numbr","default":0,"prop":"cy"},{"default":0,"prop":"r"},{"default":0,"prop":"r0"},{"default":0,"prop":"startAngle"},{"type":"number","default":"Math.PI * 2","prop":"endAngle"},{"default":true,"prop":"clockwise"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"arc","children":[{"default":"arc","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"cx"},{"type":"numbr","default":0,"prop":"cy"},{"default":0,"prop":"r"},{"default":0,"prop":"r0"},{"default":0,"prop":"startAngle"},{"type":"number","default":"Math.PI * 2","prop":"endAngle"},{"default":true,"prop":"clockwise"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"type":"string","prop":"fill"},{"default":"\"#000\"","prop":"stroke"},{"default":1,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"polygon","children":[{"default":"polygon","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"shape","children":[{"type":"Array","prop":"points"},{"type":["number","string"],"default":"undefined","prop":"smooth"},{"default":false,"prop":"smoothConstraint"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"polyline","children":[{"default":"polyline","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"shape","children":[{"type":"Array","prop":"points"},{"type":["number","string"],"default":"undefined","prop":"smooth"},{"default":false,"prop":"smoothConstraint"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"type":"string","prop":"fill"},{"default":"\"#000\"","prop":"stroke"},{"default":5,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"line","children":[{"default":"line","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"x1"},{"default":0,"prop":"y1"},{"default":0,"prop":"x2"},{"default":0,"prop":"y2"},{"default":1,"prop":"percent"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"type":"string","prop":"fill"},{"default":"\"#000\"","prop":"stroke"},{"default":5,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]},{"type":"Object","isObject":true,"arrayItemType":"bezierCurve","children":[{"default":"bezierCurve","prop":"type"},{"default":"undefined","prop":"id"},{"default":"'merge'","prop":"$action"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":["number","string"],"default":"undefined","prop":"left"},{"type":["number","string"],"default":"undefined","prop":"right"},{"type":["number","string"],"default":"undefined","prop":"top"},{"type":["number","string"],"default":"undefined","prop":"bottom"},{"type":"strin","default":"'all'","prop":"bounding"},{"default":0,"prop":"z"},{"default":0,"prop":"zlevel"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"draggable"},{"default":false,"prop":"progressive"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"x1"},{"default":0,"prop":"y1"},{"default":0,"prop":"x2"},{"default":0,"prop":"y2"},{"default":0,"prop":"cpx1"},{"default":0,"prop":"cpy1"},{"type":"number","prop":"cpx2"},{"type":"number","prop":"cpy2"},{"default":1,"prop":"percent"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Function","prop":"onclick"},{"type":"Function","prop":"onmouseover"},{"type":"Function","prop":"onmouseout"},{"type":"Function","prop":"onmousemove"},{"type":"Function","prop":"onmousewheel"},{"type":"Function","prop":"onmousedown"},{"type":"Function","prop":"onmouseup"},{"type":"Function","prop":"ondrag"},{"type":"Function","prop":"ondragstart"},{"type":"Function","prop":"ondragend"},{"type":"Function","prop":"ondragenter"},{"type":"Function","prop":"ondragleave"},{"type":"Function","prop":"ondragover"},{"type":"Function","prop":"ondrop"}]}]}]},{"type":"Object","isObject":true,"prop":"calendar","children":[{"type":"string","prop":"id"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":80,"prop":"left"},{"type":["string","number"],"default":60,"prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"},{"type":["number","string"],"default":"auto","prop":"width"},{"type":["number","string"],"default":"auto","prop":"height"},{"type":["number","string","Array"],"prop":"range"},{"type":["number","Array"],"default":20,"prop":"cellSize"},{"default":"'horizontal'","prop":"orient"},{"type":"Object","isObject":true,"prop":"splitLine","children":[{"default":true,"prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#000","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"#fff","prop":"color"},{"type":"Color","default":"'#ccc'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"dayLabel","children":[{"default":true,"prop":"show"},{"default":0,"prop":"firstDay"},{"default":0,"prop":"margin"},{"default":"'start'","prop":"position"},{"type":["string","Array"],"default":"'en'","prop":"nameMap"},{"type":"Color","default":"#000","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"monthLabel","children":[{"default":true,"prop":"show"},{"type":"string","prop":"align"},{"default":5,"prop":"margin"},{"default":"'start'","prop":"position"},{"type":["string","Array"],"default":"'en'","prop":"nameMap"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"#000","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"yearLabel","children":[{"default":true,"prop":"show"},{"default":30,"prop":"margin"},{"type":"string","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"default":false,"prop":"silent"}]},{"type":"Object","isObject":true,"prop":"dataset","children":[{"type":"string","prop":"id"},{"type":["Array","Object"],"prop":"source"},{"type":"Array","prop":"dimensions"},{"type":"boolean","prop":"sourceHeader"}]},{"type":"*","isObject":true,"prop":"aria","children":[{"default":false,"prop":"show"},{"type":"string","prop":"description"},{"type":"Object","isObject":true,"prop":"general","children":[{"default":"'This is a chart about \"{title}\".'","prop":"withTitle"},{"default":"'This is a chart'","prop":"withoutTitle"}]},{"type":"Object","isObject":true,"prop":"series","children":[{"default":10,"prop":"maxCount"},{"type":"Object","isObject":true,"prop":"single","children":[{"default":"''","prop":"prefix"},{"default":"'The chart type is {seriesType}, which means {seriesName}. '","prop":"withName"},{"default":"'The chart type is {seriesType}.'","prop":"withoutName"}]},{"type":"Object","isObject":true,"prop":"multiple","children":[{"default":"'It consists of {seriesCount} chart series. '","prop":"prefix"},{"default":"'The chart type is {seriesType}, which means {seriesName}. '","prop":"withName"},{"default":"'The chart type is {seriesType}.'","prop":"withoutName"},{"type":"Object","isObject":true,"prop":"separator","children":[{"default":"';'","prop":"middle"},{"default":"'.'","prop":"end"}]}]}]},{"type":"Object","isObject":true,"prop":"data","children":[{"default":10,"prop":"maxCount"},{"default":"'Its data is --'","prop":"allData"},{"default":"''Where the first {displayCnt} entry is -''","prop":"partialData"},{"default":"'{name}'s data is {value}'","prop":"withName"},{"default":"'{value}'","prop":"withoutName"},{"type":"Object","isObject":true,"prop":"separator","children":[{"default":"','","prop":"middle"},{"default":"''","prop":"end"}]}]}]},{"type":"Array","isArray":true,"prop":"series","children":[{"type":"Object","isObject":true,"arrayItemType":"line","children":[{"default":"'line'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":"'cartesian2d'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"default":0,"prop":"polarIndex"},{"type":["string","Function"],"default":"'circle'","prop":"symbol"},{"type":["number","Array","Function"],"default":4,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":true,"prop":"showSymbol"},{"type":"boolean","default":"'auto'","prop":"showAllSymbol"},{"default":true,"prop":"hoverAnimation"},{"default":true,"prop":"legendHoverLink"},{"type":"string","prop":"stack"},{"default":"'pointer'","prop":"cursor"},{"default":false,"prop":"connectNulls"},{"default":true,"prop":"clip"},{"type":["string","boolean"],"default":false,"prop":"step"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'top'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":["Color","Function"],"prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":2,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":"'auto'","prop":"origin"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":["boolean","number"],"default":false,"prop":"smooth"},{"type":"string","prop":"smoothMonotone"},{"type":"string","prop":"sampling"},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"default":"'column'","prop":"seriesLayoutBy"},{"default":0,"prop":"datasetIndex"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"default":"'circle'","prop":"symbol"},{"type":["number","Array"],"default":4,"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"top","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"auto","prop":"color"},{"type":"Color","default":"'#000'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"auto","prop":"color"},{"type":"Color","default":"'#000'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"linear","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"bar","children":[{"default":"'bar'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":true,"prop":"legendHoverLink"},{"default":"'cartesian2d'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"default":false,"prop":"roundCap"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"auto","prop":"color"},{"type":"Color","default":"'#000'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":["number","Array"],"default":0,"prop":"barBorderRadius"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"default":false,"prop":"showBackground"},{"type":"Object","isObject":true,"prop":"backgroundStyle","children":[{"type":"Color","default":"'rgba(180, 180, 180, 0.2)'","prop":"color"},{"type":"Color","default":"'#000'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":["number","Array"],"default":0,"prop":"barBorderRadius"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"auto","prop":"color"},{"type":"Color","default":"'#000'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"string","prop":"stack"},{"default":"'pointer'","prop":"cursor"},{"type":["number","string"],"prop":"barWidth"},{"type":["number","string"],"prop":"barMaxWidth"},{"type":["number","string"],"prop":"barMinWidth"},{"default":0,"prop":"barMinHeight"},{"default":"30%","prop":"barGap"},{"default":"'20%'","prop":"barCategoryGap"},{"default":false,"prop":"large"},{"default":400,"prop":"largeThreshold"},{"default":5000,"prop":"progressive"},{"default":3000,"prop":"progressiveThreshold"},{"default":"mod","prop":"progressiveChunkMode"},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"default":"'column'","prop":"seriesLayoutBy"},{"default":0,"prop":"datasetIndex"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"inside","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"auto","prop":"color"},{"type":"Color","default":"'#000'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":["number","Array"],"default":0,"prop":"barBorderRadius"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"auto","prop":"color"},{"type":"Color","default":"'#000'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":true,"prop":"clip"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"pie","children":[{"default":"'pie'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":true,"prop":"legendHoverLink"},{"default":true,"prop":"hoverAnimation"},{"default":10,"prop":"hoverOffset"},{"type":["boolean","string"],"default":false,"prop":"selectedMode"},{"default":10,"prop":"selectedOffset"},{"default":true,"prop":"clockwise"},{"default":90,"prop":"startAngle"},{"default":0,"prop":"minAngle"},{"default":0,"prop":"minShowLabelAngle"},{"type":["boolean","string"],"default":false,"prop":"roseType"},{"default":true,"prop":"avoidLabelOverlap"},{"default":true,"prop":"stillShowZeroSum"},{"default":"'pointer'","prop":"cursor"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":0,"prop":"left"},{"type":["string","number"],"default":0,"prop":"top"},{"type":["string","number"],"default":0,"prop":"right"},{"type":["string","number"],"default":0,"prop":"bottom"},{"type":["string","number"],"default":"'auto'","prop":"width"},{"type":["string","number"],"default":"'auto'","prop":"height"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'outside'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":["boolean","number"],"prop":"rotate"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":"'none'","prop":"alignTo"},{"type":["string","number"],"default":"'25%'","prop":"margin"},{"default":10,"prop":"bleedMargin"},{"default":5,"prop":"distanceToLabelLine"}]},{"type":"Object","isObject":true,"prop":"labelLine","children":[{"type":"boolean","prop":"show"},{"type":"number","prop":"length"},{"type":"number","prop":"length2"},{"type":["boolean","number"],"default":false,"prop":"smooth"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":["Color","Function"],"prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Function"],"prop":"formatter"},{"type":["boolean","number"],"prop":"rotate"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"labelLine","children":[{"type":"boolean","prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","default":"['50%', '50%']","prop":"center"},{"type":["number","string","Array"],"default":"[0, '75%']","prop":"radius"},{"default":"'column'","prop":"seriesLayoutBy"},{"default":0,"prop":"datasetIndex"},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"default":false,"prop":"selected"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'outside'","prop":"position"},{"type":["boolean","number"],"prop":"rotate"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"labelLine","children":[{"type":"boolean","prop":"show"},{"type":"number","prop":"length"},{"type":"number","prop":"length2"},{"type":["boolean","number"],"default":false,"prop":"smooth"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["boolean","number"],"prop":"rotate"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"labelLine","children":[{"type":"boolean","prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":false,"prop":"silent"},{"default":"'expansion'","prop":"animationType"},{"default":"'transition'","prop":"animationTypeUpdate"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"scatter","children":[{"default":"'scatter'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":"'cartesian2d'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"default":0,"prop":"polarIndex"},{"default":0,"prop":"geoIndex"},{"default":0,"prop":"calendarIndex"},{"type":"boolean","prop":"hoverAnimation"},{"default":true,"prop":"legendHoverLink"},{"type":["string","Function"],"default":"'circle'","prop":"symbol"},{"type":["number","Array","Function"],"default":10,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"large"},{"default":2000,"prop":"largeThreshold"},{"default":"'pointer'","prop":"cursor"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":["Color","Function"],"prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0.8,"prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"default":400,"prop":"progressive"},{"default":3000,"prop":"progressiveThreshold"},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"default":"'column'","prop":"seriesLayoutBy"},{"default":0,"prop":"datasetIndex"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"Array","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"inside","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":true,"prop":"clip"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"effectScatter","children":[{"default":"'effectScatter'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":true,"prop":"legendHoverLink"},{"default":"'ripple'","prop":"effectType"},{"default":"'render'","prop":"showEffectOn"},{"type":"Object","isObject":true,"prop":"rippleEffect","children":[{"type":"string","prop":"color"},{"default":4,"prop":"period"},{"default":2.5,"prop":"scale"},{"default":"'fill'","prop":"brushType"}]},{"default":"'cartesian2d'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"default":0,"prop":"polarIndex"},{"default":0,"prop":"geoIndex"},{"default":0,"prop":"calendarIndex"},{"type":["string","Function"],"default":"'circle'","prop":"symbol"},{"type":["number","Array","Function"],"default":10,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":"'pointer'","prop":"cursor"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":["Color","Function"],"prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":["Color","Function"],"prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"default":"'column'","prop":"seriesLayoutBy"},{"default":0,"prop":"datasetIndex"},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"'circle'","prop":"symbol"},{"type":["number","Array"],"default":4,"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"inside","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"radar","children":[{"default":"'radar'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"type":"number","prop":"radarIndex"},{"type":["string","Function"],"default":"'circle'","prop":"symbol"},{"type":["number","Array","Function"],"default":4,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'top'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":["Color","Function"],"prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"default":"'circle'","prop":"symbol"},{"type":["number","Array"],"default":4,"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"top","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"auto","prop":"color"},{"type":"Color","default":"'#000'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"top","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"auto","prop":"color"},{"type":"Color","default":"'#000'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"areaStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"tree","children":[{"default":"'tree'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"12%","prop":"left"},{"type":["string","number"],"default":"12%","prop":"top"},{"type":["string","number"],"default":"12%","prop":"right"},{"type":["string","number"],"default":"12%","prop":"bottom"},{"type":["string","number"],"prop":"width"},{"type":["string","number"],"prop":"height"},{"default":"'orthogonal'","prop":"layout"},{"default":"'LR'","prop":"orient"},{"type":["string","Function"],"default":"'emptyCircle'","prop":"symbol"},{"type":["number","Array","Function"],"default":7,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":"'curve'","prop":"edgeShape"},{"default":"'50%'","prop":"edgeForkPosition"},{"type":["boolean","string"],"default":false,"prop":"roam"},{"default":true,"prop":"expandAndCollapse"},{"default":2,"prop":"initialTreeDepth"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'#c23531'","prop":"borderColor"},{"default":1.5,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"'#ccc'\"","prop":"color"},{"default":1.5,"prop":"width"},{"default":0.5,"prop":"curveness"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"'#ccc'\"","prop":"color"},{"default":1.5,"prop":"width"},{"default":0.5,"prop":"curveness"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"leaves","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]}]},{"type":"Object","isObject":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"'linear'","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"treemap","children":[{"default":"'treemap'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"center","prop":"left"},{"type":["string","number"],"default":"middle","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"},{"type":["string","number"],"default":"80%","prop":"width"},{"type":["string","number"],"default":"80%","prop":"height"},{"type":"number","prop":"squareRatio"},{"type":"number","prop":"leafDepth"},{"default":"'▶'","prop":"drillDownIcon"},{"type":["boolean","string"],"default":true,"prop":"roam"},{"type":["boolean","string"],"default":"'zoomToNode'","prop":"nodeClick"},{"type":"number","default":"0.32*0.32","prop":"zoomToNodeRatio"},{"type":"Array","isArray":true,"prop":"levels","children":[{"default":0,"prop":"visualDimension"},{"type":"number","prop":"visualMin"},{"type":"number","prop":"visualMax"},{"type":"Array","prop":"color"},{"type":"Array","prop":"colorAlpha"},{"type":"number","prop":"colorSaturation"},{"default":"'index'","prop":"colorMappingBy"},{"default":10,"prop":"visibleMin"},{"type":"number","prop":"childrenVisibleMin"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"upperLabel","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"default":20,"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"number","prop":"colorAlpha"},{"type":"number","prop":"colorSaturation"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"gapWidth"},{"type":"Color","default":"'#fff',","prop":"borderColor"},{"type":"Color","prop":"borderColorSaturation"},{"type":"Color","prop":"strokeColor"},{"type":"number","prop":"strokeWidth"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"upperLabel","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"}]}]}]},{"default":0,"prop":"visualDimension"},{"type":"number","prop":"visualMin"},{"type":"number","prop":"visualMax"},{"type":"Array","prop":"colorAlpha"},{"type":"number","prop":"colorSaturation"},{"default":"'index'","prop":"colorMappingBy"},{"default":10,"prop":"visibleMin"},{"type":"number","prop":"childrenVisibleMin"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"upperLabel","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"default":20,"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"number","prop":"colorAlpha"},{"type":"number","prop":"colorSaturation"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"gapWidth"},{"type":"Color","default":"'#fff',","prop":"borderColor"},{"type":"Color","prop":"borderColorSaturation"},{"type":"Color","prop":"strokeColor"},{"type":"number","prop":"strokeWidth"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"upperLabel","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"}]}]},{"type":"Object","isObject":true,"prop":"breadcrumb","children":[{"default":true,"prop":"show"},{"type":["string","number"],"default":"'center'","prop":"left"},{"type":["string","number"],"default":"'auto'","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":0,"prop":"bottom"},{"default":22,"prop":"height"},{"default":25,"prop":"emptyItemWidth"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"rgba(0,0,0,0.7)","prop":"color"},{"type":"Color","default":"rgba(255,255,255,0.7)","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"rgba(150,150,150,1)","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"#fff","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"*","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"rgba(0,0,0,0.7)","prop":"color"},{"type":"Color","default":"rgba(255,255,255,0.7)","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"default":3,"prop":"shadowBlur"},{"type":"Color","default":"rgba(150,150,150,1)","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"#fff","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":["number","Array"],"prop":"value"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":0,"prop":"visualDimension"},{"type":"number","prop":"visualMin"},{"type":"number","prop":"visualMax"},{"type":"Array","prop":"color"},{"type":"Array","prop":"colorAlpha"},{"type":"number","prop":"colorSaturation"},{"default":"'index'","prop":"colorMappingBy"},{"default":10,"prop":"visibleMin"},{"type":"number","prop":"childrenVisibleMin"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"upperLabel","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"default":20,"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"number","prop":"colorAlpha"},{"type":"number","prop":"colorSaturation"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"gapWidth"},{"type":"Color","default":"'#fff',","prop":"borderColor"},{"type":"Color","prop":"borderColorSaturation"},{"type":"Color","prop":"strokeColor"},{"type":"number","prop":"strokeWidth"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"upperLabel","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"default":true,"prop":"ellipsis"}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"}]}]},{"type":"string","prop":"link"},{"default":"'blank'","prop":"target"},{"type":"Array","prop":"children"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"default":false,"prop":"silent"},{"type":["number","Function"],"default":1500,"prop":"animationDuration"},{"default":"quinticInOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"sunburst","children":[{"default":"'sunburst'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":"Array","default":"['50%', '50%']","prop":"center"},{"type":["number","string","Array"],"default":"[0, '75%']","prop":"radius"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"number","prop":"value"},{"type":"string","prop":"name"},{"type":"string","prop":"link"},{"default":"'blank'","prop":"target"},{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"highlight","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"downplay","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]}]},{"type":"Array","prop":"children"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]},{"default":"'descendant'","prop":"highlightPolicy"},{"type":["boolean","string"],"default":"'rootToNode'","prop":"nodeClick"},{"type":["string","Function"],"default":"'desc'","prop":"sort"},{"default":false,"prop":"renderLabelForZeroData"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"highlight","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"downplay","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"levels","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"highlight","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"downplay","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"type":["string","number"],"default":"'radial'","prop":"rotate"},{"default":"'center'","prop":"align"},{"type":"number","prop":"minAngle"},{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'white'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":1,"prop":"opacity"}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"'cubicOut'","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":500,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"arrayItemType":"boxplot","children":[{"default":"'boxplot'","prop":"type"},{"type":"string","prop":"id"},{"default":"'cartesian2d'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"type":"string","prop":"name"},{"default":true,"prop":"legendHoverLink"},{"default":true,"prop":"hoverAnimation"},{"type":"string","prop":"layout"},{"type":"Array","default":"[7, 50]","prop":"boxWidth"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"#fff","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"#fff","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":2,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"default":5,"prop":"shadowBlur"},{"type":"Color","default":"rgba(0,0,0,0.4)","prop":"shadowColor"},{"default":2,"prop":"shadowOffsetX"},{"default":2,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"Array","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"#fff","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"#fff","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":2,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"default":5,"prop":"shadowBlur"},{"type":"Color","default":"rgba(0,0,0,0.4)","prop":"shadowColor"},{"default":2,"prop":"shadowOffsetX"},{"default":2,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"type":["number","Function"],"default":800,"prop":"animationDuration"},{"default":"elasticOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"candlestick","children":[{"default":"'candlestick'","prop":"type"},{"type":"string","prop":"id"},{"default":"'cartesian2d'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"type":"string","prop":"name"},{"default":true,"prop":"legendHoverLink"},{"default":true,"prop":"hoverAnimation"},{"type":"string","prop":"layout"},{"type":"number","prop":"barWidth"},{"type":["number","string"],"prop":"barMinWidth"},{"type":["number","string"],"prop":"barMaxWidth"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"#c23531","prop":"color"},{"type":"Color","default":"#314656","prop":"color0"},{"type":"Color","default":"#c23531","prop":"borderColor"},{"type":"Color","default":"#314656","prop":"borderColor0"},{"default":1,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"#c23531","prop":"color"},{"type":"Color","default":"#314656","prop":"color0"},{"type":"Color","default":"#c23531","prop":"borderColor"},{"type":"Color","default":"#314656","prop":"borderColor0"},{"default":2,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"default":true,"prop":"large"},{"default":600,"prop":"largeThreshold"},{"default":3000,"prop":"progressive"},{"default":10000,"prop":"progressiveThreshold"},{"default":"mod","prop":"progressiveChunkMode"},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"Array","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"#c23531","prop":"color"},{"type":"Color","default":"#314656","prop":"color0"},{"type":"Color","default":"#c23531","prop":"borderColor"},{"type":"Color","default":"#314656","prop":"borderColor0"},{"default":1,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"#c23531","prop":"color"},{"type":"Color","default":"#314656","prop":"color0"},{"type":"Color","default":"#c23531","prop":"borderColor"},{"type":"Color","default":"#314656","prop":"borderColor0"},{"default":2,"prop":"borderWidth"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":true,"prop":"clip"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"type":["number","Function"],"default":300,"prop":"animationDuration"},{"default":"linear","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"heatmap","children":[{"default":"'heatmap'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":"'cartesian2d'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"default":0,"prop":"geoIndex"},{"default":0,"prop":"calendarIndex"},{"default":20,"prop":"pointSize"},{"default":20,"prop":"blurSize"},{"default":0,"prop":"minOpacity"},{"default":1,"prop":"maxOpacity"},{"default":400,"prop":"progressive"},{"default":3000,"prop":"progressiveThreshold"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"inside","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"inside","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"Array","prop":"value"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"inside","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"inside","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"map","children":[{"default":"'map'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":"''","prop":"map"},{"type":["boolean","string"],"default":false,"prop":"roam"},{"type":"Array","prop":"center"},{"default":0.75,"prop":"aspectScale"},{"type":"Array","prop":"boundingCoords"},{"default":1,"prop":"zoom"},{"type":"Object","isObject":true,"prop":"scaleLimit","children":[{"type":"number","prop":"min"},{"type":"number","prop":"max"}]},{"type":"Object","prop":"nameMap"},{"default":"'name'","prop":"nameProperty"},{"type":["boolean","string"],"default":false,"prop":"selectedMode"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"'#eee'","prop":"areaColor"},{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"'#eee'","prop":"areaColor"},{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'auto'","prop":"left"},{"type":["string","number"],"default":"'auto'","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"},{"type":"Array","prop":"layoutCenter"},{"type":["number","string"],"prop":"layoutSize"},{"type":"number","prop":"geoIndex"},{"default":"'sum'","prop":"mapValueCalculation"},{"type":"boolean","prop":"showLegendSymbol"},{"default":"'column'","prop":"seriesLayoutBy"},{"default":0,"prop":"datasetIndex"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"default":false,"prop":"selected"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","isObject":true,"prop":"areaColor","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'bottom'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"areaColor"},{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":false,"prop":"silent"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"parallel","children":[{"default":"'parallel'","prop":"type"},{"type":"string","prop":"id"},{"default":"'parallel'","prop":"coordinateSystem"},{"default":0,"prop":"parallelIndex"},{"type":"string","prop":"name"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":2,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0.45,"prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":2,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0.45,"prop":"opacity"}]}]},{"default":0.05,"prop":"inactiveOpacity"},{"default":1,"prop":"activeOpacity"},{"default":true,"prop":"realtime"},{"type":["boolean","number"],"default":false,"prop":"smooth"},{"default":500,"prop":"progressive"},{"default":3000,"prop":"progressiveThreshold"},{"default":"sequential","prop":"progressiveChunkMode"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"Array","prop":"value"},{"type":"Object","prop":"lineStyle"},{"type":"Color","default":"\"#000\"","prop":"color"},{"default":2,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0.45,"prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":2,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0.45,"prop":"opacity"}]}]}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"linear","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"lines","children":[{"default":"'lines'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":"'geo'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"default":0,"prop":"geoIndex"},{"default":false,"prop":"polyline"},{"type":"Object","isObject":true,"prop":"effect","children":[{"default":false,"prop":"show"},{"default":4,"prop":"period"},{"type":["number","Function"],"prop":"delay"},{"default":0,"prop":"constantSpeed"},{"default":"'circle'","prop":"symbol"},{"type":["Array","number"],"default":3,"prop":"symbolSize"},{"type":"Color","prop":"color"},{"default":0.2,"prop":"trailLength"},{"default":true,"prop":"loop"}]},{"default":true,"prop":"large"},{"default":2000,"prop":"largeThreshold"},{"type":["string","Array"],"default":"'none'","prop":"symbol"},{"type":["number","Array"],"default":10,"prop":"symbolSize"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'self-adaptive'","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0.5,"prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"default":400,"prop":"progressive"},{"default":3000,"prop":"progressiveThreshold"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"Array","prop":"coords"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":true,"prop":"clip"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"arrayItemType":"graph","children":[{"default":"'graph'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":true,"prop":"legendHoverLink"},{"type":"string","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"default":0,"prop":"polarIndex"},{"default":0,"prop":"geoIndex"},{"default":0,"prop":"calendarIndex"},{"type":"boolean","prop":"hoverAnimation"},{"type":"Array","prop":"center"},{"default":1,"prop":"zoom"},{"default":"'none'","prop":"layout"},{"type":"Object","isObject":true,"prop":"circular","children":[{"default":false,"prop":"rotateLabel"}]},{"type":"Object","isObject":true,"prop":"force","children":[{"type":"string","prop":"initLayout"},{"type":["Array","number"],"default":50,"prop":"repulsion"},{"default":0.1,"prop":"gravity"},{"type":["Array","number"],"default":30,"prop":"edgeLength"},{"default":true,"prop":"layoutAnimation"},{"default":0.6,"prop":"friction"}]},{"type":["boolean","string"],"default":false,"prop":"roam"},{"default":0.6,"prop":"nodeScaleRatio"},{"default":false,"prop":"draggable"},{"type":["string","Function"],"default":"'circle'","prop":"symbol"},{"type":["number","Array","Function"],"default":10,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"focusNodeAdjacency"},{"type":["Array","string"],"default":"['none', 'none']","prop":"edgeSymbol"},{"type":["Array","number"],"default":10,"prop":"edgeSymbolSize"},{"default":"'pointer'","prop":"cursor"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":["Color","Function"],"prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"'#aaa'","prop":"color"},{"default":1,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"default":0.5,"prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"edgeLabel","children":[{"default":false,"prop":"show"},{"default":"'middle'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"edgeLabel","children":[{"default":false,"prop":"show"},{"default":"'middle'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Array","isArray":true,"prop":"categories","children":[{"type":"string","prop":"name"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"inside","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"boolean","prop":"fixed"},{"type":["number","Array"],"prop":"value"},{"type":"number","prop":"category"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Array","prop":"nodes"},{"type":"Array","isArray":true,"prop":"links","children":[{"type":["string","number"],"prop":"source"},{"type":["string","number"],"prop":"target"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'middle'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'middle'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":["Array","string"],"prop":"symbol"},{"type":["Array","string"],"prop":"symbolSize"},{"default":false,"prop":"ignoreForceLayout"}]},{"type":"Array","prop":"edges"},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"'center'","prop":"left"},{"type":["string","number"],"default":"'middle'","prop":"top"},{"type":["string","number"],"default":"'auto'","prop":"right"},{"type":["string","number"],"default":"'auto'","prop":"bottom"},{"type":["string","number"],"default":"auto","prop":"width"},{"type":["string","number"],"default":"auto","prop":"height"},{"default":false,"prop":"silent"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"sankey","children":[{"default":"'sankey'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"5%","prop":"left"},{"type":["string","number"],"default":"5%","prop":"top"},{"type":["string","number"],"default":"20%","prop":"right"},{"type":["string","number"],"default":"5%","prop":"bottom"},{"type":["string","number"],"prop":"width"},{"type":["string","number"],"prop":"height"},{"default":20,"prop":"nodeWidth"},{"default":8,"prop":"nodeGap"},{"default":"'justify'","prop":"nodeAlign"},{"default":32,"prop":"layoutIterations"},{"default":"'horizontal'","prop":"orient"},{"default":true,"prop":"draggable"},{"type":["boolean","string"],"default":false,"prop":"focusNodeAdjacency"},{"type":"Array","isArray":true,"prop":"levels","children":[{"type":"number","prop":"depth"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"'#314656'\"","prop":"color"},{"default":0.2,"prop":"opacity"},{"default":0.5,"prop":"curveness"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'right'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"'#aaa'","prop":"borderColor"},{"default":1,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"'#314656'\"","prop":"color"},{"default":0.2,"prop":"opacity"},{"default":0.5,"prop":"curveness"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"'#314656'\"","prop":"color"},{"default":0.2,"prop":"opacity"},{"default":0.5,"prop":"curveness"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"type":"number","prop":"depth"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Array","prop":"nodes"},{"type":"Array","isArray":true,"prop":"links","children":[{"type":"string","prop":"source"},{"type":"string","prop":"target"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"'#314656'\"","prop":"color"},{"default":0.2,"prop":"opacity"},{"default":0.5,"prop":"curveness"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"'#314656'\"","prop":"color"},{"default":0.2,"prop":"opacity"},{"default":0.5,"prop":"curveness"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"}]}]}]},{"type":"Array","prop":"edges"},{"default":false,"prop":"silent"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"'linear'","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"funnel","children":[{"default":"'funnel'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":0,"prop":"min"},{"default":100,"prop":"max"},{"type":["number","string"],"default":"'0%'","prop":"minSize"},{"type":["number","string"],"default":"'100%'","prop":"maxSize"},{"type":["string","Function"],"default":"'descending'","prop":"sort"},{"default":0,"prop":"gap"},{"default":true,"prop":"legendHoverLink"},{"default":"'center'","prop":"funnelAlign"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'outside'","prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"labelLine","children":[{"type":"boolean","prop":"show"},{"type":"number","prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":["Color","Function"],"prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"labelLine","children":[{"type":"boolean","prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":80,"prop":"left"},{"type":["string","number"],"default":60,"prop":"top"},{"type":["string","number"],"default":80,"prop":"right"},{"type":["string","number"],"default":60,"prop":"bottom"},{"type":["string","number"],"default":"'auto'","prop":"width"},{"type":["string","number"],"default":"'auto'","prop":"height"},{"default":"'column'","prop":"seriesLayoutBy"},{"default":0,"prop":"datasetIndex"},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"default":"'outside'","prop":"position"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"labelLine","children":[{"type":"boolean","prop":"show"},{"type":"number","prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"labelLine","children":[{"type":"boolean","prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"gauge","children":[{"default":"'gauge'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"type":["number","string"],"default":"'75%'","prop":"radius"},{"default":true,"prop":"legendHoverLink"},{"default":225,"prop":"startAngle"},{"default":-45,"prop":"endAngle"},{"default":true,"prop":"clockwise"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"}]},{"default":0,"prop":"min"},{"default":100,"prop":"max"},{"default":10,"prop":"splitNumber"},{"type":"Object","isObject":true,"prop":"axisLine","children":[{"default":true,"prop":"show"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Array","prop":"color"},{"default":30,"prop":"width"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"splitLine","children":[{"default":true,"prop":"show"},{"type":["number","string"],"default":30,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#eee","prop":"color"},{"default":2,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisTick","children":[{"default":true,"prop":"show"},{"default":5,"prop":"splitNumber"},{"type":["number","string"],"default":8,"prop":"length"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"#eee","prop":"color"},{"default":1,"prop":"width"},{"default":"'solid'","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"axisLabel","children":[{"default":true,"prop":"show"},{"default":5,"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"pointer","children":[{"default":true,"prop":"show"},{"type":["string","number"],"default":"'80%'","prop":"length"},{"default":8,"prop":"width"}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","default":"'auto'","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"*","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"title","children":[{"default":true,"prop":"show"},{"type":"Array","default":"[0, '-40%']","prop":"offsetCenter"},{"type":"Color","default":"'#333'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":15,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"detail","children":[{"default":true,"prop":"show"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"default":0,"prop":"borderWidth"},{"type":["Function","string"],"prop":"formatter"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"type":"Array","default":"[0, '40%']","prop":"offsetCenter"},{"type":"Color","default":"'auto'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":15,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"Color","default":"'auto'","prop":"color"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"pictorialBar","children":[{"default":"'pictorialBar'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":true,"prop":"legendHoverLink"},{"default":"'cartesian2d'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"default":"'pointer'","prop":"cursor"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":["number","string"],"prop":"barWidth"},{"type":["number","string"],"prop":"barMaxWidth"},{"type":["number","string"],"prop":"barMinWidth"},{"default":0,"prop":"barMinHeight"},{"default":"-100%","prop":"barGap"},{"default":"'20%'","prop":"barCategoryGap"},{"default":"'circle'","prop":"symbol"},{"type":["number","Array"],"default":"['100%', '100%']","prop":"symbolSize"},{"default":"'start'","prop":"symbolPosition"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"number","prop":"symbolRotate"},{"type":["boolean","number","string"],"prop":"symbolRepeat"},{"default":"'start'","prop":"symbolRepeatDirection"},{"type":["number","string"],"prop":"symbolMargin"},{"default":false,"prop":"symbolClip"},{"type":"number","prop":"symbolBoundingData"},{"default":400,"prop":"symbolPatternSize"},{"default":false,"isObject":true,"prop":"hoverAnimation","children":[{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"default":"'circle'","prop":"symbol"},{"type":["number","Array"],"default":"['100%', '100%']","prop":"symbolSize"},{"default":"'start'","prop":"symbolPosition"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"number","prop":"symbolRotate"},{"type":["boolean","number","string"],"prop":"symbolRepeat"},{"default":"'start'","prop":"symbolRepeatDirection"},{"type":["number","string"],"prop":"symbolMargin"},{"default":false,"prop":"symbolClip"},{"type":"number","prop":"symbolBoundingData"},{"default":400,"prop":"symbolPatternSize"},{"type":"number","prop":"z"},{"default":false,"prop":"hoverAnimation"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"inside","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"prop":"markPoint","children":[{"type":["string","Function"],"default":"'pin'","prop":"symbol"},{"type":["number","Array","Function"],"default":50,"prop":"symbolSize"},{"type":["number","Function"],"prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'inside'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"default":"''","prop":"name"},{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markLine","children":[{"default":false,"prop":"silent"},{"type":["string","Array"],"prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"default":2,"prop":"precision"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'starting point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'ending point'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"string","prop":"symbol"},{"type":["number","Array"],"prop":"symbolSize"},{"type":"number","prop":"symbolRotate"},{"default":false,"prop":"symbolKeepAspect"},{"type":"Array","default":"[0, 0]","prop":"symbolOffset"},{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"lineStyle","children":[{"type":"Color","default":"\"#000\"","prop":"color"},{"default":0,"prop":"width"},{"default":"solid","prop":"type"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"default":0,"prop":"curveness"}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"default":"'end'","prop":"position"},{"type":["number","Array"],"prop":"distance"},{"type":["string","Function"],"prop":"formatter"}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"Object","isObject":true,"prop":"markArea","children":[{"default":false,"prop":"silent"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"data","children":[{"type":"Object","isObject":true,"prop":"0","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'start'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]},{"type":"Object","isObject":true,"prop":"1","children":[{"type":"string","prop":"type"},{"type":"number","prop":"valueIndex"},{"type":"string","prop":"valueDim"},{"type":"Array","prop":"coord"},{"default":"'end'","prop":"name"},{"type":"number","prop":"x"},{"type":"number","prop":"y"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]}]}]}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","isObject":true,"prop":"animationEasingUpdate","children":[{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"themeRiver","children":[{"default":"'themeRiver'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"type":["string","number"],"default":"5%","prop":"left"},{"type":["string","number"],"default":"5%","prop":"top"},{"type":["string","number"],"default":"5%","prop":"right"},{"type":["string","number"],"default":"5%","prop":"bottom"},{"type":["string","number"],"prop":"width"},{"type":["string","number"],"prop":"height"},{"default":"\"single\"","prop":"coordinateSystem"},{"type":"Array","default":"[\"10%\", \"10%\"]","prop":"boundaryGap"},{"default":0,"prop":"singleAxisIndex"},{"type":"Object","isObject":true,"prop":"label","children":[{"default":true,"prop":"show"},{"type":["string","Array"],"default":"'left'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"'#000'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":11,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"label","children":[{"default":false,"prop":"show"},{"type":["string","Array"],"default":"'left'","prop":"position"},{"default":5,"prop":"distance"},{"type":"number","prop":"rotate"},{"type":"Array","prop":"offset"},{"type":"Color","default":"'#000'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":11,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"},{"type":"Object","isObject":true,"prop":"rich","children":[{"type":"Object","isObject":true,"prop":"<style_name>","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"string","prop":"align"},{"type":"string","prop":"verticalAlign"},{"type":"number","prop":"lineHeight"},{"type":["string","Object"],"default":"'transparent'","prop":"backgroundColor"},{"type":"Color","default":"'transparent'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":0,"prop":"borderRadius"},{"type":["number","Array"],"default":0,"prop":"padding"},{"type":"Color","default":"'transparent'","prop":"shadowColor"},{"default":0,"prop":"shadowBlur"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"default":20,"prop":"shadowBlur"},{"type":"Color","default":"'rgba(0,0,0,0.8)'","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"date"},{"type":"number","prop":"value"},{"type":"string","prop":"name"}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"type":"Object","isObject":true,"arrayItemType":"custom","children":[{"default":"'custom'","prop":"type"},{"type":"string","prop":"id"},{"type":"string","prop":"name"},{"default":true,"prop":"legendHoverLink"},{"default":"'cartesian2d'","prop":"coordinateSystem"},{"default":0,"prop":"xAxisIndex"},{"default":0,"prop":"yAxisIndex"},{"default":0,"prop":"polarIndex"},{"default":0,"prop":"geoIndex"},{"default":0,"prop":"calendarIndex"},{"type":"Function","isObject":true,"prop":"renderItem","children":[{"type":"*","isObject":true,"prop":"arguments","children":[{"type":"Object","prop":"params"},{"type":"Object","isObject":true,"prop":"api","children":[{"type":"Function","prop":"value"},{"type":"Function","prop":"coord"},{"type":"Function","prop":"size"},{"type":"Function","prop":"style"},{"type":"Function","prop":"styleEmphasis"},{"type":"Function","prop":"visual"},{"type":"Function","prop":"barLayout"},{"type":"Function","prop":"currentSeriesIndices"},{"type":"Function","prop":"font"},{"type":"Function","prop":"getWidth"},{"type":"Function","prop":"getHeight"},{"type":"Function","prop":"getZr"},{"type":"Function","prop":"getDevicePixelRatio"}]}]},{"type":"Object","prop":"return"},{"type":"Object","isObject":true,"prop":"return_group","children":[{"default":"group","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"default":0,"prop":"width"},{"default":0,"prop":"height"},{"default":false,"prop":"diffChildrenByName"},{"type":"Array","prop":"children"},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_path","children":[{"default":"path","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"type":"string","prop":"pathData"},{"type":"string","prop":"d"},{"default":"'center'","prop":"layout"},{"default":0,"prop":"x"},{"type":"numbr","default":0,"prop":"y"},{"default":0,"prop":"width"},{"type":"numbr","default":0,"prop":"height"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_image","children":[{"default":"image","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"style","children":[{"type":"string","prop":"image"},{"default":0,"prop":"x"},{"type":"numbr","default":0,"prop":"y"},{"default":0,"prop":"width"},{"type":"numbr","default":0,"prop":"height"},{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_text","children":[{"default":"text","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"''","prop":"text"},{"default":0,"prop":"x"},{"type":"numbr","default":0,"prop":"y"},{"type":"string","prop":"font"},{"default":"'left'","prop":"textAlign"},{"type":"string","prop":"textVerticalAlign"},{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_rect","children":[{"default":"rect","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"x"},{"type":"numbr","default":0,"prop":"y"},{"default":0,"prop":"width"},{"type":"numbr","default":0,"prop":"height"},{"type":"Array","prop":"r"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_circle","children":[{"default":"circle","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"cx"},{"type":"numbr","default":0,"prop":"cy"},{"default":0,"prop":"r"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_ring","children":[{"default":"ring","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"cx"},{"type":"numbr","default":0,"prop":"cy"},{"default":0,"prop":"r"},{"default":0,"prop":"r0"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_sector","children":[{"default":"sector","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"cx"},{"type":"numbr","default":0,"prop":"cy"},{"default":0,"prop":"r"},{"default":0,"prop":"r0"},{"default":0,"prop":"startAngle"},{"type":"number","default":"Math.PI * 2","prop":"endAngle"},{"default":true,"prop":"clockwise"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_arc","children":[{"default":"arc","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"cx"},{"type":"numbr","default":0,"prop":"cy"},{"default":0,"prop":"r"},{"default":0,"prop":"r0"},{"default":0,"prop":"startAngle"},{"type":"number","default":"Math.PI * 2","prop":"endAngle"},{"default":true,"prop":"clockwise"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"type":"string","prop":"fill"},{"default":"\"#000\"","prop":"stroke"},{"default":1,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_polygon","children":[{"default":"polygon","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"type":"Array","prop":"points"},{"type":["number","string"],"default":"undefined","prop":"smooth"},{"default":false,"prop":"smoothConstraint"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_polyline","children":[{"default":"polyline","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"type":"Array","prop":"points"},{"type":["number","string"],"default":"undefined","prop":"smooth"},{"default":false,"prop":"smoothConstraint"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"type":"string","prop":"fill"},{"default":"\"#000\"","prop":"stroke"},{"default":5,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_line","children":[{"default":"line","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"x1"},{"default":0,"prop":"y1"},{"default":0,"prop":"x2"},{"default":0,"prop":"y2"},{"default":1,"prop":"percent"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"type":"string","prop":"fill"},{"default":"\"#000\"","prop":"stroke"},{"default":5,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]},{"type":"Object","isObject":true,"prop":"return_bezierCurve","children":[{"default":"bezierCurve","prop":"type"},{"default":"undefined","prop":"id"},{"type":"Array","default":"[0, 0]","prop":"position"},{"default":0,"prop":"rotation"},{"type":"Array","default":"[1, 1]","prop":"scale"},{"type":"number","default":"[0, 0]","prop":"origin"},{"type":"number","default":"undefined","prop":"z2"},{"default":"undefined","prop":"name"},{"type":"*","prop":"info"},{"default":false,"prop":"silent"},{"default":false,"prop":"invisible"},{"default":false,"prop":"ignore"},{"type":"Object","isObject":true,"prop":"shape","children":[{"default":0,"prop":"x1"},{"default":0,"prop":"y1"},{"default":0,"prop":"x2"},{"default":0,"prop":"y2"},{"default":0,"prop":"cpx1"},{"default":0,"prop":"cpy1"},{"type":"number","prop":"cpx2"},{"type":"number","prop":"cpy2"},{"default":1,"prop":"percent"}]},{"type":"Object","isObject":true,"prop":"style","children":[{"default":"'#000'","prop":"fill"},{"type":"string","prop":"stroke"},{"default":0,"prop":"lineWidth"},{"type":"number","default":"undefined","prop":"shadowBlur"},{"type":"number","default":"undefined","prop":"shadowOffsetX"},{"type":"number","default":"undefined","prop":"shadowOffsetY"},{"type":"number","default":"undefined","prop":"shadowColor"}]},{"type":"Object","prop":"styleEmphasis"}]}]},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"Array","prop":"dimensions"},{"type":"Object","prop":"encode"},{"default":"'column'","prop":"seriesLayoutBy"},{"default":0,"prop":"datasetIndex"},{"type":"Array","isArray":true,"prop":"data","children":[{"type":"string","prop":"name"},{"type":"number","prop":"value"},{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]},{"type":"Object","isObject":true,"prop":"emphasis","children":[{"type":"Object","isObject":true,"prop":"itemStyle","children":[{"type":"Color","prop":"color"},{"type":"Color","default":"\"#000\"","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":"'solid'","prop":"borderType"},{"type":"number","prop":"shadowBlur"},{"type":"Color","prop":"shadowColor"},{"default":0,"prop":"shadowOffsetX"},{"default":0,"prop":"shadowOffsetY"},{"type":"number","prop":"opacity"}]}]},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]},{"default":false,"prop":"clip"},{"default":0,"prop":"zlevel"},{"default":2,"prop":"z"},{"default":false,"prop":"silent"},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"type":"*","isObject":true,"prop":"tooltip","children":[{"type":["string","Array"],"prop":"position"},{"type":["string","Function"],"prop":"formatter"},{"type":"Color","default":"'rgba(50,50,50,0.7)'","prop":"backgroundColor"},{"type":"Color","default":"'#333'","prop":"borderColor"},{"default":0,"prop":"borderWidth"},{"default":5,"prop":"padding"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"'#fff'","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":14,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"type":"string","prop":"extraCssText"}]}]}]},{"type":"Array","prop":"color"},{"type":"Color","prop":"backgroundColor"},{"type":"Object","isObject":true,"prop":"textStyle","children":[{"type":"Color","default":"\"#fff\"","prop":"color"},{"default":"'normal'","prop":"fontStyle"},{"type":["string","number"],"default":"normal","prop":"fontWeight"},{"default":"'sans-serif'","prop":"fontFamily"},{"default":12,"prop":"fontSize"},{"type":"number","prop":"lineHeight"},{"type":["number","string"],"prop":"width"},{"type":["number","string"],"prop":"height"},{"type":"Color","default":"'transparent'","prop":"textBorderColor"},{"default":0,"prop":"textBorderWidth"},{"type":"Color","default":"'transparent'","prop":"textShadowColor"},{"default":0,"prop":"textShadowBlur"},{"default":0,"prop":"textShadowOffsetX"},{"default":0,"prop":"textShadowOffsetY"}]},{"default":true,"prop":"animation"},{"default":2000,"prop":"animationThreshold"},{"type":["number","Function"],"default":1000,"prop":"animationDuration"},{"default":"cubicOut","prop":"animationEasing"},{"type":["number","Function"],"default":0,"prop":"animationDelay"},{"type":["number","Function"],"default":300,"prop":"animationDurationUpdate"},{"default":"cubicOut","prop":"animationEasingUpdate"},{"type":["number","Function"],"default":0,"prop":"animationDelayUpdate"},{"default":"'source-over'","prop":"blendMode"},{"default":3000,"prop":"hoverLayerThreshold"},{"default":false,"prop":"useUTC"}]}
\ No newline at end of file
diff --git a/en/documents/option-parts/option.js b/en/documents/option-parts/option.js
index dd22f4e..f346398 100644
--- a/en/documents/option-parts/option.js
+++ b/en/documents/option-parts/option.js
@@ -580,6 +580,9 @@
   "blendMode": {
     "desc": "<p>Sets the type of compositing operation to apply when drawing a new shape. See the different type: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation\" target=\"_blank\">https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation</a>.</p>\n<p>The default is <code class=\"codespan\">&#39;source-over&#39;</code>. Support settings for each series.</p>\n<p><code class=\"codespan\">&#39;lighter&#39;</code> is also a common type of compositing operation. In this mode, the area where the number of graphics is concentrated is superimposed into a high-brightness color (white). It often used to highlight the effect of the area. See example <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=lines-airline\" target=\"_blank\">Global airline</a></p>\n"
   },
+  "hoverLayerThreshold": {
+    "desc": "<p>When the number of element of the whole chart is larger than <code class=\"codespan\">hoverLayerThreshold</code>, a seperate hover layer is used to render hovered elements.</p>\n<p>The seperate hover layer is used to avoid re-painting the whole canvas when hovering on elements. Instead, the hovered elements are rendered in a seperate layer so that other elements don&#39;t have to be rendered again.</p>\n<p>ECharts 2 use seperate layer for all cases. But it brings some problems like the hovered elements may not covering everything else correctly, or translucent elements may not overlay correctly to each other. And it brings extra member cost due to the extra canvas and may bring burden on mobile devices. So since ECharts 3, the hover layer is not used by default. Only when the element amount is large enough will the hover layer used.</p>\n"
+  },
   "useUTC": {
     "desc": "<p>Whether to use UTC in display.</p>\n<ul>\n<li><code class=\"codespan\">true</code>: When <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;time&#39;</code>, ticks is determined according to UTC, and <code class=\"codespan\">axisLabel</code> and <code class=\"codespan\">tooltip</code> use UTC by default.</li>\n<li><code class=\"codespan\">false</code>: When <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;time&#39;</code>, ticks is determined according to local time, and <code class=\"codespan\">axisLabel</code> and <code class=\"codespan\">tooltip</code> use local time by default.</li>\n</ul>\n<p>The default value of <code class=\"codespan\">useUTC</code> is false, for sake of considering:</p>\n<ul>\n<li>In many cases, labels should be displayed in local time (whether the time is stored in server in local time or UTC).</li>\n<li>If user uses time string (like &#39;2012-01-02&#39;) in data, it usually means local time if time zone is not specified. Time should be displayed in its original time zone by default.</li>\n</ul>\n<p>Notice: the setting only affects &quot;display time&quot;, not &quot;parse time&quot;.\nFor how time value (like <code class=\"codespan\">1491339540396</code>, <code class=\"codespan\">&#39;2013-01-04&#39;</code>, ...) is parsed in echarts, see <a href=\"#series-line.data\">the time part in date</a>.</p>\n"
   }
diff --git a/en/documents/option-parts/option.json b/en/documents/option-parts/option.json
index 9f83f87..a87d19f 100644
--- a/en/documents/option-parts/option.json
+++ b/en/documents/option-parts/option.json
@@ -580,6 +580,9 @@
   "blendMode": {
     "desc": "<p>Sets the type of compositing operation to apply when drawing a new shape. See the different type: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation\" target=\"_blank\">https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation</a>.</p>\n<p>The default is <code class=\"codespan\">&#39;source-over&#39;</code>. Support settings for each series.</p>\n<p><code class=\"codespan\">&#39;lighter&#39;</code> is also a common type of compositing operation. In this mode, the area where the number of graphics is concentrated is superimposed into a high-brightness color (white). It often used to highlight the effect of the area. See example <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=lines-airline\" target=\"_blank\">Global airline</a></p>\n"
   },
+  "hoverLayerThreshold": {
+    "desc": "<p>When the number of element of the whole chart is larger than <code class=\"codespan\">hoverLayerThreshold</code>, a seperate hover layer is used to render hovered elements.</p>\n<p>The seperate hover layer is used to avoid re-painting the whole canvas when hovering on elements. Instead, the hovered elements are rendered in a seperate layer so that other elements don&#39;t have to be rendered again.</p>\n<p>ECharts 2 use seperate layer for all cases. But it brings some problems like the hovered elements may not covering everything else correctly, or translucent elements may not overlay correctly to each other. And it brings extra member cost due to the extra canvas and may bring burden on mobile devices. So since ECharts 3, the hover layer is not used by default. Only when the element amount is large enough will the hover layer used.</p>\n"
+  },
   "useUTC": {
     "desc": "<p>Whether to use UTC in display.</p>\n<ul>\n<li><code class=\"codespan\">true</code>: When <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;time&#39;</code>, ticks is determined according to UTC, and <code class=\"codespan\">axisLabel</code> and <code class=\"codespan\">tooltip</code> use UTC by default.</li>\n<li><code class=\"codespan\">false</code>: When <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;time&#39;</code>, ticks is determined according to local time, and <code class=\"codespan\">axisLabel</code> and <code class=\"codespan\">tooltip</code> use local time by default.</li>\n</ul>\n<p>The default value of <code class=\"codespan\">useUTC</code> is false, for sake of considering:</p>\n<ul>\n<li>In many cases, labels should be displayed in local time (whether the time is stored in server in local time or UTC).</li>\n<li>If user uses time string (like &#39;2012-01-02&#39;) in data, it usually means local time if time zone is not specified. Time should be displayed in its original time zone by default.</li>\n</ul>\n<p>Notice: the setting only affects &quot;display time&quot;, not &quot;parse time&quot;.\nFor how time value (like <code class=\"codespan\">1491339540396</code>, <code class=\"codespan\">&#39;2013-01-04&#39;</code>, ...) is parsed in echarts, see <a href=\"#series-line.data\">the time part in date</a>.</p>\n"
   }
diff --git a/en/documents/option.json b/en/documents/option.json
index 038850f..b8778c5 100644
--- a/en/documents/option.json
+++ b/en/documents/option.json
@@ -1 +1 @@
-{"$schema":"https://echarts.apache.org/doc/json-schem","option":{"type":"Object","properties":{"title":{"type":["Object"],"description":"<p>Title component, including main title and subtitle.</p>\n<p>In ECharts 2.x, a single instance of ECharts could contains one title component at most. However, in ECharts 3, there could be one or more than one title components. It is more useful when multiple diagrams in one instance all need titles.</p>\n<p><strong>Here are some instances of different animation easing functions, among which every instance has a title component: </strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-easing&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n\n\n\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the title from showing</p>\n","default":true},"text":{"type":["string"],"description":"<p>The main title text, supporting for <code class=\"codespan\">\\n</code> for newlines.</p>\n","default":"''"},"link":{"type":["string"],"description":"<p>The hyper link of main title text.</p>\n","default":"''"},"target":{"type":["string"],"description":"<p>Open the hyper link of main title in specified tab.</p>\n<p><strong>options: </strong></p>\n<ul>\n<li><p><code class=\"codespan\">&#39;self&#39;</code> opening it in current tab</p>\n</li>\n<li><p><code class=\"codespan\">&#39;blank&#39;</code> opening it in a new tab</p>\n</li>\n</ul>\n","default":"'blank'"},"textStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>main title text color.</p>\n","default":"'#333'"},"fontStyle":{"type":["string"],"description":"<p>main title font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p>main title font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>main title font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>main title font size.</p>\n","default":18},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"subtext":{"type":["string"],"description":"<p>Subtitle text, supporting for <code class=\"codespan\">\\n</code> for newlines.</p>\n","default":"''"},"sublink":{"type":["string"],"description":"<p>The hyper link of subtitle text.</p>\n","default":"''"},"subtarget":{"type":["string"],"description":"<p> Open the hyper link of subtitle in specified tab, options:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;self&#39;</code> opening it in current tab</p>\n</li>\n<li><p><code class=\"codespan\">&#39;blank&#39;</code> opening it in a new tab</p>\n</li>\n</ul>\n","default":"'blank'"},"subtextStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>subtitle text color.</p>\n","default":"'#aaa'"},"fontStyle":{"type":["string"],"description":"<p>subtitle font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p>subtitle font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>subtitle font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>subtitle font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"textAlign":{"type":["string"],"description":"<p>The horizontal align of the component (including &quot;text&quot; and &quot;subtext&quot;).</p>\n<p>Optional values: <code class=\"codespan\">&#39;auto&#39;</code>, <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;right&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>.</p>\n","default":"'auto'"},"textVerticalAlign":{"type":["string"],"description":"<p>The vertical align of the component (including &quot;text&quot; and &quot;subtext&quot;).</p>\n<p>Optional values: <code class=\"codespan\">&#39;auto&#39;</code>, <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;bottom&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>.</p>\n","default":"'auto'"},"triggerEvent":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to enable triggering events</p>\n","default":false},"padding":{"type":["number","Array"],"description":"<p>title space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"itemGap":{"type":["number"],"description":"<p>The gap between the main title and subtitle.</p>\n","default":10},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between title  component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"top":{"type":["string","number"],"description":"<p>Distance between title  component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"right":{"type":["string","number"],"description":"<p>Distance between title  component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"<p>Distance between title  component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"backgroundColor":{"type":["Color"],"description":"<p>Background color of title, which is transparent by default.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>.</p>\n</blockquote>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of title. Support the same color format as backgroundColor.</p>\n","default":"'#ccc'"},"borderWidth":{"type":["number"],"description":"<p>Border width of title.</p>\n","default":1},"borderRadius":{"type":["number","Array"],"description":"<p>The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.</p>\n<p>For example:</p>\n<pre><code>borderRadius: 5, // consistently set the size of 4 rounded corners\nborderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n</code></pre>","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n<p><strong>Attention</strong>: This property works only if <code class=\"codespan\">show: true</code> is configured and <code class=\"codespan\">backgroundColor</code> is defined other than <code class=\"codespan\">transparent</code>.</p>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n<p><strong>Attention</strong>: This property works only if <code class=\"codespan\">show: true</code> configured.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n<p><strong>Attention</strong>: This property works only if <code class=\"codespan\">show: true</code> configured.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n<p><strong>Attention</strong>: This property works only if <code class=\"codespan\">show: true</code> configured.</p>\n","default":0}}},"legend":{"type":["Object"],"description":"<p>Legend component.</p>\n<p>Legend component shows symbol, color and name of different series. You can click legends to toggle displaying series in the chart.</p>\n<p>In ECharts 3, a single echarts instance may contain multiple legend components, which makes it easier for the layout of multiple legend components.</p>\n<p>If there have to be too many legend items, <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">horizontally scrollable legend</a> are options to paginate them. Check <a href=\"#legend.type\">legend.type</a> please.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Type of legend. Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;plain&#39;</code>: Simple legend. (default)</li>\n<li><code class=\"codespan\">&#39;scroll&#39;</code>: Scrollable legend. It helps when too many legend items needed to be shown.</li>\n</ul>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n<p>When <code class=\"codespan\">&#39;scroll&#39;</code> used, these options below can be used for detailed configuration:</p>\n<ul>\n<li><a href=\"#legend.scrollDataIndex\">legend.scrollDataIndex</a></li>\n<li><a href=\"#legend.pageButtonItemGap\">legend.pageButtonItemGap</a></li>\n<li><a href=\"#legend.pageButtonGap\">legend.pageButtonGap</a></li>\n<li><a href=\"#legend.pageButtonPosition\">legend.pageButtonPosition</a></li>\n<li><a href=\"#legend.pageFormatter\">legend.pageFormatter</a></li>\n<li><a href=\"#legend.pageIcons\">legend.pageIcons</a></li>\n<li><a href=\"#legend.pageIconColor\">legend.pageIconColor</a></li>\n<li><a href=\"#legend.pageIconInactiveColor\">legend.pageIconInactiveColor</a></li>\n<li><a href=\"#legend.pageIconSize\">legend.pageIconSize</a></li>\n<li><a href=\"#legend.pageTextStyle\">legend.pageTextStyle</a></li>\n<li><a href=\"#legend.animation\">legend.animation</a></li>\n<li><a href=\"#legend.animationDurationUpdate\">legend.animationDurationUpdate</a></li>\n</ul>\n"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"show":{"type":["boolean"],"description":"","default":true},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between legend component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"top":{"type":["string","number"],"description":"<p>Distance between legend component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"right":{"type":["string","number"],"description":"<p>Distance between legend component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"<p>Distance between legend component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"width":{"type":["string","number"],"description":"<p>Width of legend component. Adaptive by default.</p>\n","default":"'auto'"},"height":{"type":["string","number"],"description":"<p>Height of legend component. Adaptive by default.</p>\n","default":"'auto'"},"orient":{"type":["string"],"description":"<p>The layout orientation of legend.</p>\n<p>Options:</p>\n<ul>\n<li>&#39;horizontal&#39;</li>\n<li>&#39;vertical&#39;</li>\n</ul>\n","default":"'horizontal'"},"align":{"type":["string"],"description":"<p>Legend marker and text aligning. By default, it automatically calculates from component location and orientation. When <a href=\"#legend.left\">left</a> value of this component is &#39;right&#39;, and the vertical layout (<a href=\"#legend.orient\">orient</a> is &#39;vertical&#39;), it would be aligned to &#39;right&#39;.</p>\n<p>Option:</p>\n<ul>\n<li>&#39;auto&#39;</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n</ul>\n","default":"'auto'"},"padding":{"type":["number","Array"],"description":"<p>legend space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"itemGap":{"type":["number"],"description":"<p>The distance between each legend, horizontal distance in horizontal layout, and vertical distance in vertical layout.</p>\n","default":10},"itemWidth":{"type":["number"],"description":"<p>Image width of legend symbol.</p>\n","default":25},"itemHeight":{"type":["number"],"description":"<p>Image height of legend symbol.</p>\n","default":14},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for icons (from <code class=\"codespan\">series.symbol</code> or user-defined <code class=\"codespan\">legend.data.icon</code>) in the form of <code class=\"codespan\">path://</code>.</p>\n","default":true},"formatter":{"type":["string","Function"],"description":"<p>Formatter is used to format label of legend, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// using string template, the template variable is legend name {name}\nformatter: &#39;Legend {name}&#39;\n// using callback function\nformatter: function (name) {\n    return &#39;Legend &#39; + name;\n}\n</code></pre>\n","default":null},"selectedMode":{"type":["string","boolean"],"description":"<p>Selected mode of legend, which controls whether series can be toggled displaying by clicking legends. It is enabled by default, and you may set it to be <code class=\"codespan\">false</code> to disable it.</p>\n<p>Besides, it can be set to <code class=\"codespan\">&#39;single&#39;</code> or <code class=\"codespan\">&#39;multiple&#39;</code>, for single selection and multiple selection.</p>\n","default":true},"inactiveColor":{"type":["Color"],"description":"<p>Legend color when not selected.</p>\n","default":"'#ccc'"},"selected":{"type":["Object"],"description":"<p>State table of selected legend.</p>\n<p>example:</p>\n<pre><code>selected: {\n    // selected&#39;series 1&#39;\n    &#39;series 1&#39;: true,\n    // unselected&#39;series 2&#39;\n    &#39;series 2&#39;: false\n}\n</code></pre>"},"textStyle":{"type":["Object"],"description":"<p>Legend text style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"tooltip":{"type":["Object"],"description":"<p>Tooltip configuration for legend tooltip, which is similar to <a href=\"#tooltip\">tooltip</a>.</p>\n"},"icon":{"type":["string"],"description":"<p>Icon of the legend items.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"data":{"type":["Array"],"description":"<p>Data array of legend. An array item is usually a <code class=\"codespan\">name</code> representing string. (If it is a <a href=\"#series-pie\">pie chart</a>, it could also be the <code class=\"codespan\">name</code> of a single data in the pie chart) of a series. Legend component would automatically calculate the color and icon according to series. Special string <code class=\"codespan\">&#39;&#39;</code> (null string) or <code class=\"codespan\">&#39;\\n&#39;</code> (new line string) can be used for a new line.</p>\n<p>If <code class=\"codespan\">data</code> is not specified, it will be auto collected from series. For most of series, it will be collected from <a href=\"#series.name\">series.name</a> or the dimension name specified by <code class=\"codespan\">seriesName</code> of <a href=\"#series.encode\">series.encode</a>. For some types of series like <a href=\"#series-pie\">pie</a> and <a href=\"#series-funnel\">funnel</a>, it will be collected from the name field of <code class=\"codespan\">series.data</code>.</p>\n<p>If you need to set the style for a single item, you may also set the configuration of it. In this case, <code class=\"codespan\">name</code> attribute is used to represent name of <code class=\"codespan\">series</code>.</p>\n<p>Example:</p>\n<pre><code>data: [{\n    name: &#39;series 1&#39;,\n    // compulsorily set icon as a circle\n    icon: &#39;circle&#39;,\n    // set up the text in red\n    textStyle: {\n        color: &#39;red&#39;\n    }\n}]\n</code></pre>","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Name of legend, which should be the <code class=\"codespan\">name</code> value of a certain series. If it is a pie chart, legend name can also be the name of a single data item.</p>\n"},"icon":{"type":["string"],"description":"<p>Icon of the legend.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"textStyle":{"type":["Object"],"description":"<p>Text style of legend.</p>\n"}}}},"backgroundColor":{"type":["Color"],"description":"<p>Background color of legend, which is transparent by default.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>.</p>\n</blockquote>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of legend. Support the same color format as backgroundColor.</p>\n","default":"'#ccc'"},"borderWidth":{"type":["number"],"description":"<p>Border width of legend.</p>\n","default":1},"borderRadius":{"type":["number","Array"],"description":"<p>The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.</p>\n<p>For example:</p>\n<pre><code>borderRadius: 5, // consistently set the size of 4 rounded corners\nborderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n</code></pre>","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n<p><strong>Attention</strong>: This property works only if <code class=\"codespan\">show: true</code> is configured and <code class=\"codespan\">backgroundColor</code> is defined other than <code class=\"codespan\">transparent</code>.</p>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n<p><strong>Attention</strong>: This property works only if <code class=\"codespan\">show: true</code> configured.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n<p><strong>Attention</strong>: This property works only if <code class=\"codespan\">show: true</code> configured.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n<p><strong>Attention</strong>: This property works only if <code class=\"codespan\">show: true</code> configured.</p>\n","default":0},"scrollDataIndex":{"type":["number"],"description":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">&#39;scroll&#39;</code>.</p>\n<p><code class=\"codespan\">dataIndex</code> of the left top most displayed item.</p>\n<p>Although the scrolling of legend items can be controlled by calling <code class=\"codespan\">setOption</code> and specifying this property, we suggest that do not control legend in this way unless necessary (<code class=\"codespan\">setOption</code> might be time-consuming), but just use action <a href=\"api.html#action.legend.legendScroll\" target=\"_blank\">legendScroll</a> to do that.</p>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n","default":0},"pageButtonItemGap":{"type":["number"],"description":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">&#39;scroll&#39;</code>.</p>\n<p>The gap between page buttons and page info text.</p>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n","default":5},"pageButtonGap":{"type":["number"],"description":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">&#39;scroll&#39;</code>.</p>\n<p>The gap between page buttons and legend items.</p>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n","default":null},"pageButtonPosition":{"type":["string"],"description":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">&#39;scroll&#39;</code>.</p>\n<p>The position of page buttons and page info. Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code>: on the left or top.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code>: on the right or bottom.</li>\n</ul>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n","default":"'end'"},"pageFormatter":{"type":["string","Function"],"description":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">&#39;scroll&#39;</code>.</p>\n<p>Page info formatter. It is <code class=\"codespan\">&#39;{current}/{total}&#39;</code> by default, where <code class=\"codespan\">{current}</code> is current page number (start from 1), and <code class=\"codespan\">{total}</code> is the total page number.</p>\n<p>If <code class=\"codespan\">pageFormatter</code> is a function, it should return a string. The parameters is:</p>\n<pre><code class=\"lang-js\">{\n    current: number\n    total: number\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n","default":"'{current}/{total}'"},"pageIcons":{"type":["Object"],"description":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">&#39;scroll&#39;</code>.</p>\n<p>The icons of page buttons.</p>\n","properties":{"horizontal":{"type":["Array"],"description":"<p>The icons of page buttons when <a href=\"#legend.orient\">legend.orient</a> is <code class=\"codespan\">&#39;horizontal&#39;</code>.</p>\n<p>It should be an array, <code class=\"codespan\">[previous page button, next page button]</code>, <code class=\"codespan\">[&#39;M0,0L12,-10L12,10z&#39;, &#39;M0,0L-12,-10L-12,10z&#39;]</code> by default.</p>\n<p>For the each item of the array,</p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n"},"vertical":{"type":["Array"],"description":"<p>The icons of page buttons when <a href=\"#legend.orient\">legend.orient</a> is <code class=\"codespan\">&#39;vertical&#39;</code>.</p>\n<p>It should be an array, <code class=\"codespan\">[previous page button, next page button]</code>, <code class=\"codespan\">[&#39;M0,0L20,0L10,-20z&#39;, &#39;M0,0L20,0L10,20z&#39;]</code> by default.</p>\n<p>For the each item of the array,</p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n"}}},"pageIconColor":{"type":["string"],"description":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">&#39;scroll&#39;</code>.</p>\n<p>The color of page buttons.</p>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n","default":"'#2f4554'"},"pageIconInactiveColor":{"type":["string"],"description":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">&#39;scroll&#39;</code>.</p>\n<p>The color of page buttons when they are inactive.</p>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n","default":"'#aaa'"},"pageIconSize":{"type":["number","Array"],"description":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">&#39;scroll&#39;</code>.</p>\n<p>The size of page buttons. It can be a number, or an array, like <code class=\"codespan\">[10, 3]</code>, represents <code class=\"codespan\">[width, height]</code>.</p>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n","default":15},"pageTextStyle":{"type":["Object"],"description":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">&#39;scroll&#39;</code>.</p>\n<p>The text style of page info.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"#333"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"animation":{"type":["boolean"],"description":"<p>Whether to use animation when page scrolls.</p>\n"},"animationDurationUpdate":{"type":["number"],"description":"<p>Duration of the page scroll animation.</p>\n","default":800},"emphasis":{"type":["Object"],"description":"","properties":{"selectorLabel":{"type":["Object"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.4.0</code></p>\n</blockquote>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"selector":{"type":["boolean","Array"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.4.0</code></p>\n</blockquote>\n<p>The selector button in the legend component. Currently includes both a full selection and an inverse selection. The selector button doesn&#39;t display by default, the user can manually configure it.</p>\n<p>Usage:</p>\n<pre><code class=\"lang-js\">selector: [\n    {\n        type: &#39;all or inverse&#39;,\n        // can be any title you like\n        title: &#39;All&#39;\n    },\n    {\n        type: &#39;inverse&#39;,\n        title: &#39;Inv&#39;\n    }\n]\n\n// or\nselector: true\n\n// or\nselector: [&#39;all&#39;, &#39;inverse&#39;]\n</code></pre>\n","default":false},"selectorLabel":{"type":["Object"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.4.0</code></p>\n</blockquote>\n<p>The text label style of the selector button, which is displayed by default.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"selectorPosition":{"type":["string"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.4.0</code></p>\n</blockquote>\n<p>The position of the selector button, which can be placed at the end or start of the legend component, the corresponding values are <code class=\"codespan\">&#39;end&#39;</code> and <code class=\"codespan\">&#39;start&#39;</code>. By default, when the legend is laid out horizontally, the selector is placed at the end of it, and when the legend is laid out vertically, the selector is placed at the start of it.</p>\n","default":"'auto'"},"selectorItemGap":{"type":["number"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.4.0</code></p>\n</blockquote>\n<p>The gap between the selector button.</p>\n","default":7},"selectorButtonGap":{"type":["number"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.4.0</code></p>\n</blockquote>\n<p>The gap between selector button and legend component.</p>\n","default":10}}},"grid":{"type":["Object"],"description":"<p>Drawing grid in rectangular coordinate. In a single grid, at most two X and Y axes each is allowed. <a href=\"#series-line\">Line chart</a>, <a href=\"#series-bar\">bar chart</a>, and <a href=\"#series-scatter\">scatter chart (bubble chart)</a> can be drawn in grid.</p>\n<p>In ECharts 2.x, there could only be one single grid component at most in a single echarts instance. But in ECharts 3, there is no limitation.</p>\n<p><strong>Following is an example of Anscombe Quartet:</strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=scatter-anscombe-quartet&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"show":{"type":["boolean"],"description":"<p>Whether to show the grid in rectangular coordinate.</p>\n","default":false},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between grid  component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'10%'"},"top":{"type":["string","number"],"description":"<p>Distance between grid  component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":60},"right":{"type":["string","number"],"description":"<p>Distance between grid  component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n","default":"'10%'"},"bottom":{"type":["string","number"],"description":"<p>Distance between grid  component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n","default":60},"width":{"type":["string","number"],"description":"<p>Width of grid  component. Adaptive by default.</p>\n","default":"'auto'"},"height":{"type":["string","number"],"description":"<p>Height of grid  component. Adaptive by default.</p>\n","default":"'auto'"},"containLabel":{"type":["boolean"],"description":"<p>Whether the grid region contains <a href=\"#yAxis.axisLabel\">axis tick label</a> of axis.</p>\n<ul>\n<li>When containLabel is <code class=\"codespan\">false</code>:<ul>\n<li><code class=\"codespan\">grid.left</code> <code class=\"codespan\">grid.right</code> <code class=\"codespan\">grid.top</code> <code class=\"codespan\">grid.bottom</code> <code class=\"codespan\">grid.width</code> <code class=\"codespan\">grid.height</code> decide the location and size of the rectangle that is made of by xAxis and yAxis.</li>\n<li>Setting to <code class=\"codespan\">false</code> will help when multiple grids need to be aligned at their axes.</li>\n</ul>\n</li>\n<li>When containLabel is <code class=\"codespan\">true</code>:<ul>\n<li><code class=\"codespan\">grid.left</code> <code class=\"codespan\">grid.right</code> <code class=\"codespan\">grid.top</code> <code class=\"codespan\">grid.bottom</code> <code class=\"codespan\">grid.width</code> <code class=\"codespan\">grid.height</code> decide the location and size of the rectangle that contains the axes and the labels of the axes.</li>\n<li>Setting to <code class=\"codespan\">true</code> will help when the length of axis labels is dynamic and is hard to approximate. This will avoid labels from overflowing the container or overlapping other components.</li>\n</ul>\n</li>\n</ul>\n","default":false},"backgroundColor":{"type":["Color"],"description":"<p>Background color of grid, which is transparent by default.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>.</p>\n</blockquote>\n<p><strong>Attention</strong>: Works only if <code class=\"codespan\">show: true</code> is set.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of grid. Support the same color format as backgroundColor.</p>\n<p><strong>Attention</strong>: Works only if <code class=\"codespan\">show: true</code> is set.</p>\n","default":"'#ccc'"},"borderWidth":{"type":["number"],"description":"<p>Border width of grid.</p>\n<p><strong>Attention</strong>: Works only if <code class=\"codespan\">show: true</code> is set.</p>\n","default":1},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n<p><strong>Attention</strong>: This property works only if <code class=\"codespan\">show: true</code> is configured and <code class=\"codespan\">backgroundColor</code> is defined other than <code class=\"codespan\">transparent</code>.</p>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n<p><strong>Attention</strong>: This property works only if <code class=\"codespan\">show: true</code> configured.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n<p><strong>Attention</strong>: This property works only if <code class=\"codespan\">show: true</code> configured.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n<p><strong>Attention</strong>: This property works only if <code class=\"codespan\">show: true</code> configured.</p>\n","default":0},"tooltip":{"type":["Object"],"description":"<p>tooltip settings in the coordinate system component.</p>\n<hr>\n<p><strong>General Introduction:</strong></p>\n<p>tooltip can be configured on different places:</p>\n<ul>\n<li><p>Configured on global: <a href=\"#tooltip\">tooltip</a></p>\n</li>\n<li><p>Configured in a coordinate system: <a href=\"#grid.tooltip\">grid.tooltip</a>, <a href=\"#polar.tooltip\">polar.tooltip</a>, <a href=\"#single.tooltip\">single.tooltip</a></p>\n</li>\n<li><p>Configured in a series: <a href=\"#series.tooltip\">series.tooltip</a></p>\n</li>\n<li><p>Configured in each item of <code class=\"codespan\">series.data</code>: <a href=\"#series.data.tooltip\">series.data.tooltip</a></p>\n</li>\n</ul>\n<hr>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the tooltip component, including tooltip floating layer and <a href=\"#tooltip.axisPointer\">axisPointer</a>.</p>\n","default":true},"trigger":{"type":["string"],"description":"<p>Type of triggering.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;item&#39;</code></p>\n<p>  Triggered by data item, which is mainly used for charts that don&#39;t have a category axis like scatter charts or pie charts.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;axis&#39;</code></p>\n<p>  Triggered by axes, which is mainly used for charts that have category axes, like bar charts or line charts.</p>\n<p> ECharts 2.x only supports axis trigger for category axis. In ECharts 3, it is supported for all types of axes in <a href=\"#grid\">grid</a> or <a href=\"#polar\">polar</a>. Also, you may assign axis with <a href=\"#tooltip.axisPointer.axis\">axisPointer.axis</a>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;none&#39;</code></p>\n<p>  Trigger nothing.</p>\n</li>\n</ul>\n","default":"'item'"},"axisPointer":{"type":["Object"],"description":"<p>Configuration item for axisPointer.</p>\n<p><code class=\"codespan\">tooltip.axisPointer</code> is like syntactic sugar of axisPointer settings on axes (for example, <a href=\"#xAxis.axisPointer\">xAxis.axisPointer</a> or <a href=\"#angleAxis.axisPointer\">angleAxis.axisPointer</a>). More detailed features can be configured on <code class=\"codespan\">someAxis.axisPointer</code>. But in common cases, using <code class=\"codespan\">tooltip.axisPointer</code> is more convenient.</p>\n<blockquote>\n<p><strong>Notice:</strong> configurations of <code class=\"codespan\">tooltip.axisPointer</code> has lower priority than that of <code class=\"codespan\">someAxis.axisPointer</code>.</p>\n</blockquote>\n<hr>\n<p><code class=\"codespan\">axisPointer</code> is a tool for displaying reference line and axis value under mouse pointer.</p>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/candlestick-axisPointer&edit=1&reset=1\" width=\"600\" height=\"450\"><iframe />\n\n\n<p>In the demo above, <a href=\"#axisPointer.link\">axisPointer.link</a> is used to link axisPointer from different coordinate systems.</p>\n<p><code class=\"codespan\">axisPointer</code> can also be used on touch device, where user can drag the button to move the reference line and label.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-tooltip-touch&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n<p>In the cases that more than one axis exist, axisPointer helps to look inside the data.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=multiple-y-axis&edit=1&reset=1\" width=\"600\" height=\"300\"><iframe />\n\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=multiple-x-axis&edit=1&reset=1\" width=\"600\" height=\"300\"><iframe />\n\n\n\n<hr>\n<blockquote>\n<p><strong>Notice:</strong>\nGenerally, axisPointers is configured in each axes who need them (for example <a href=\"#xAxis.axisPointer\">xAxis.axisPointer</a>), or configured in <code class=\"codespan\">tooltip</code> (for example <a href=\"#tooltip.axisPointer\">tooltip.axisPointer</a>).</p>\n</blockquote>\n<blockquote>\n<p>But these configurations can only be configured in global axisPointer:\n<a href=\"#axisPointer.triggerOn\">axisPointer.triggerOn</a>, <a href=\"#axisPointer.link\">axisPointer.link</a>.</p>\n</blockquote>\n<hr>\n<hr>\n<p><strong>How to display axisPointer:</strong></p>\n<p>In <a href=\"#grid\">cartesian (grid)</a> and <a href=\"#single\">polar](~polar) and (single axis</a>, each axis has its own axisPointer.</p>\n<p>Those axisPointer will not be displayed by default, utill configured as follows:</p>\n<ul>\n<li><p>Set <code class=\"codespan\">someAxis.axisPointer.show</code> (like <a href=\"#xAxis.axisPointer.show\">xAxis.axisPointer.show</a>) as <code class=\"codespan\">true</code>. Then axisPointer of this axis will be displayed.</p>\n</li>\n<li><p>Set <a href=\"#tooltip.trigger\">tooltip.trigger</a> as <code class=\"codespan\">&#39;axis&#39;</code>, or set <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> as <code class=\"codespan\">&#39;cross&#39;</code>. Then coordinate system will automatically chose the axes who will display their axisPointers. (<a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> can be used to change the choice.) Notice, <code class=\"codespan\">axis.axisPointer</code> will override <code class=\"codespan\">tooltip.axisPointer</code> settings.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to display the label of axisPointer:</strong></p>\n<p>The label of axisPointer will not be displayed by default(namely, only reference line will be displayed by default), utill configured as follows:</p>\n<ul>\n<li><p>Set <code class=\"codespan\">someAxis.axisPointer.label.show</code> (for example <a href=\"#xAxis.axisPointer.show\">xAxis.axisPointer.label.show</a>) as <code class=\"codespan\">true</code>. Then the label of the axisPointer will be displayed.</p>\n</li>\n<li><p>Set <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> as  <code class=\"codespan\">&#39;cross&#39;</code>. Then the label of the crossed axisPointers will be displayed.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to configure axisPointer on touch device:</strong></p>\n<p>Set <code class=\"codespan\">someAxis.axisPointer.handle.show</code> (for example <a href=\"#xAxis.axisPointer.handle.show\">xAxis.axisPointer.handle.show</a> as <code class=\"codespan\">true</code>. Then the button for dragging will be displayed. (This feature is not supported on polar).</p>\n<p><strong>Notice:</strong>\nIf tooltip does not work well in this case, try to set<a href=\"#tooltip.triggerOn\">tooltip.triggerOn</a> as <code class=\"codespan\">&#39;none&#39;</code> (for the effect: show tooltip when finger holding on the button, and hide tooltip after finger left the button), or set <a href=\"#tooltip.alwaysShowContent\">tooltip.alwaysShowContent</a> as <code class=\"codespan\">true</code> (then tooltip will always be displayed).</p>\n<p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>.</p>\n<hr>\n<p><strong>Snap to point</strong></p>\n<p>In value axis and time axis, if <a href=\"#xAxis.axisPointer.snap\">snap</a> is set as true, axisPointer will snap to point automatically.</p>\n<hr>\n","properties":{"type":{"type":["string"],"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;line&#39;</code> line indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;shadow&#39;</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;none&#39;</code> no indicator displayed.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;cross&#39;</code> crosshair indicator, which is actually the shortcut of enable two axisPointers of two orthometric axes.</p>\n</li>\n</ul>\n","default":"'line'"},"axis":{"type":["string"],"description":"<p>The coordinate axis, which could be <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, <code class=\"codespan\">&#39;radius&#39;</code>, or <code class=\"codespan\">&#39;angle&#39;</code>. By default, each coordinate system will automatically chose the axes whose will display its axisPointer (category axis or time axis is used by default).</p>\n","default":"'auto'"},"snap":{"type":["boolean"],"description":"<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n"},"z":{"type":["number"],"description":"<p>z value, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n"},"label":{"type":["Object"],"description":"<p>label of axisPointer</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label. Label will not show by default. But if <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as  <code class=\"codespan\">&#39;cross&#39;</code>, label will be displayed automatically.</p>\n","default":false},"precision":{"type":["number","string"],"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code class=\"codespan\">&#39;2&#39;</code>, which indicates that two decimal fractions are reserved.</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"<p>The formatter of label.</p>\n<p>If set as <code class=\"codespan\">string</code>, for example it can be: <code class=\"codespan\">formatter: &#39;some text {value} some text</code>, where <code class=\"codespan\">{value}</code> will be replaced by axis value automatically.</p>\n<p>If set as <code class=\"codespan\">function</code>:</p>\n<p><strong>Parameters:</strong></p>\n<p><code class=\"codespan\">{Object}</code> params: Including fields as follows:</p>\n<p><code class=\"codespan\">{Object}</code> params.value: current value of this axis. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;category&#39;</code>, it is one of the value in <code class=\"codespan\">axis.data</code>. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;time&#39;</code>, it is a timestamp.</p>\n<p><code class=\"codespan\">{Array.&lt;Object&gt;}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<p><code class=\"codespan\">{string}</code> params.axisDimension: The dimension name of the axis. For example, in catesian it will be <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, and in polar it will be <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code>.</p>\n<p><code class=\"codespan\">{number}</code> params.axisIndex: The index of the axis, for example, <code class=\"codespan\">0</code>,<code class=\"codespan\">1</code>, <code class=\"codespan\">2</code>, ...</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n    axisDim: &#39;x&#39;, // &#39;x&#39;, &#39;y&#39;, &#39;angle&#39;, &#39;radius&#39;, &#39;single&#39;\n    axisId: &#39;xxx&#39;,\n    axisName: &#39;xxx&#39;,\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: &#39;text of value&#39;\n}\n</code></pre>\n<p><strong>Return:</strong></p>\n<p>The string to be displayed.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n    // If axis.type is &#39;time&#39;\n    return &#39;some text&#39; + echarts.format.formatTime(params.value);\n}\n</code></pre>\n","default":null},"margin":{"type":["boolean"],"description":"<p>Distance between label and axis.</p>\n","default":3},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"padding":{"type":["string","Array"],"description":"<p>axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"<p>Border color of label.</p>\n","default":null},"borderWidth":{"type":["string"],"description":"<p>Border width of label.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"lineStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;line&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"shadowStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;shadow&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"crossStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;cross&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"dashed"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":200},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"exponentialOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"position":{"type":["string","Array"],"description":"<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},"xAxis":{"type":["Object"],"description":"<p>The x axis in cartesian(rectangular) coordinate. Usually a single grid component can place at most 2 x axis, one on the bottom and another on the top. <a href=\"#xAxis.offset\">offset</a> can be used to avoid overlap when you need to put more than two x axis.</p>\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis from showing.</p>\n","default":true},"gridIndex":{"type":["number"],"description":"<p>The index of grid which the x axis belongs to. Defaults to be in the first grid.</p>\n","default":0},"position":{"type":["string"],"description":"<p>The position of x axis.</p>\n<p>options:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>The first x axis in grid defaults to be on the bottom of the grid, and the second x axis is on the other side against the first x axis.</p>\n"},"offset":{"type":["number"],"description":"<p>Offset of x axis relative to default position. Useful when multiple x axis has same <a href=\"#xAxis.position\">position</a> value.</p>\n","default":0},"type":{"type":["string"],"description":"<p>Type of axis.</p>\n<p>Option:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;value&#39;</code>\n  Numerical axis, suitable for continuous data.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;category&#39;</code>\n  Category axis, suitable for discrete category data. Category data can be auto retrieved from <a href=\"#series.data\">series.data</a> or <a href=\"#dataset.source\">dataset.source</a>, or can be specified via <a href=\"#xAxis.data\">xAxis.data</a>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;time&#39;</code>\n  Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;log&#39;</code>\n  Log axis, suitable for log data.</p>\n</li>\n</ul>\n","default":"'category'"},"name":{"type":["string"],"description":"<p>Name of axis.</p>\n"},"nameLocation":{"type":["string"],"description":"<p>Location of axis name.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> or <code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;end&#39;</code></li>\n</ul>\n","default":"'end'"},"nameTextStyle":{"type":["Object"],"description":"<p>Text style of axis name.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Color of axis name uses <a href=\"#xAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"fontStyle":{"type":["string"],"description":"<p>axis name font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p>axis name font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>axis name font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>axis name font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n\n","default":0}}}}}}},"nameGap":{"type":["number"],"description":"<p>Gap between axis name and axis line.</p>\n","default":15},"nameRotate":{"type":["number"],"description":"<p>Rotation of axis name.</p>\n","default":null},"inverse":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to invert the axis.\nThis is a new option available from Echarts 3 and newer.</p>\n","default":false},"boundaryGap":{"type":["boolean","Array"],"description":"<p>The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different.</p>\n<p>The <code class=\"codespan\">boundaryGap</code> of category axis can be set to either <code class=\"codespan\">true</code> or <code class=\"codespan\">false</code>. Default value is set to be <code class=\"codespan\">true</code>, in which case <a href=\"#xAxis.axisTick\">axisTick</a> is served only as a separation line, and labels and data appear only in the center part of two <a href=\"#xAxis.axisTick\">axis ticks</a>, which is called <em>band</em>.</p>\n<p>For non-category axis, including time, numerical value, and log axes, <code class=\"codespan\">boundaryGap</code> is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting <a href=\"#xAxis.min\">min</a> and <a href=\"#xAxis.max\">max</a>.\n<strong>Example: </strong></p>\n<pre><code class=\"lang-js\">boundaryGap: [&#39;20%&#39;, &#39;20%&#39;]\n</code></pre>\n"},"min":{"type":["number","string","Function"],"description":"<p>The minimun value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">&#39;dataMin&#39;</code> so that the minimum value on this axis is set to be the minimum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class=\"codespan\">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class=\"codespan\">2</code> represents <code class=\"codespan\">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class=\"codespan\">-3</code>.</p>\n<p>If <code class=\"codespan\">min</code> is specified as a function, it should return a min value, like:</p>\n<pre><code class=\"lang-js\">min: function (value) {\n    return value.min - 20;\n}\n</code></pre>\n<p><code class=\"codespan\">value</code> is an object, containing the <code class=\"codespan\">min</code> value and <code class=\"codespan\">max</code> value of the data. This function should return the min value of axis, or return <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> to make echarts use the auto calculated min value (<code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> return is only supported since <code class=\"codespan\">v4.8.0</code>).</p>\n","default":null},"max":{"type":["number","string","Function"],"description":"<p>The maximum value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">&#39;dataMax&#39;</code> so that the minimum value on this axis is set to be the maximum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class=\"codespan\">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class=\"codespan\">2</code> represents <code class=\"codespan\">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class=\"codespan\">-3</code>.</p>\n<p>If <code class=\"codespan\">max</code> is specified as a function, it should return a max value, like:</p>\n<pre><code class=\"lang-js\">max: function (value) {\n    return value.max - 20;\n}\n</code></pre>\n<p><code class=\"codespan\">value</code> is an object, containing the <code class=\"codespan\">min</code> value and <code class=\"codespan\">max</code> value of the data. This function should return the max value of axis, or return <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> to make echarts use the auto calculated max value (<code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> return is only supported since <code class=\"codespan\">v4.8.0</code>).</p>\n","default":null},"scale":{"type":["boolean"],"description":"<p>It is available only in numerical axis, i.e., <a href=\"#xAxis.type\">type</a>: &#39;value&#39;.</p>\n<p>It specifies whether not to contain zero position of axis compulsively. When it is set to be <code class=\"codespan\">true</code>, the axis may not contain zero position, which is useful in the scatter chart for both value axes.</p>\n<p>This configuration item is unavailable when the <a href=\"#xAxis.min\">min</a> and <a href=\"#xAxis.max\">max</a> are set.</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.</p>\n<p>This is unavailable for category axis.</p>\n","default":5},"minInterval":{"type":["number"],"description":"<p>Minimum gap between split lines.</p>\n<p>For example, it can be set to be <code class=\"codespan\">1</code> to make sure axis label is show as integer.</p>\n<pre><code class=\"lang-js\">{\n    minInterval: 1\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#xAxis.type\">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n","default":0},"maxInterval":{"type":["number"],"description":"<p>Maximum gap between split lines.</p>\n<p>For example, in time axis (<a href=\"#xAxis.type\">type</a> is &#39;time&#39;), it can be set to be <code class=\"codespan\">3600 * 24 * 1000</code> to make sure that the gap between axis labels is less than or equal to one day.</p>\n<pre><code class=\"lang-js\">{\n    maxInterval: 3600 * 1000 * 24\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#xAxis.type\">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n"},"interval":{"type":["number"],"description":"<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href=\"#xAxis.splitNumber\">splitNumber</a> is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with <a href=\"#xAxis.min\">min</a> and <a href=\"#xAxis.max\">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situations.</p>\n<p>This is unavailable for category axis. Timestamp should be passed for <a href=\"#xAxis.type\">type</a>: &#39;time&#39; axis. Logged value should be passed for <a href=\"#xAxis.type\">type</a>: &#39;log&#39; axis.</p>\n"},"logBase":{"type":["number"],"description":"<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#xAxis.type\">type</a>: &#39;log&#39;.</p>\n","default":10},"silent":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code>, to prevent interaction with the axis.</p>\n","default":false},"triggerEvent":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to enable triggering events.</p>\n<p>Parameters of the event include:</p>\n<pre><code class=\"lang-js\">{\n    // Component type: xAxis, yAxis, radiusAxis, angleAxis\n    // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n    componentType: string,\n    // Value on axis before being formatted.\n    // Click on value label to trigger event.\n    value: &#39;&#39;,\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: &#39;&#39;\n}\n</code></pre>\n","default":false},"axisLine":{"type":["Object"],"description":"<p>Settings related to axis line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n","default":true},"onZero":{"type":["boolean"],"description":"<p>Specifies whether X or Y axis lies on the other&#39;s origin position, where value is 0 on axis. Valid only if the other axis is of value type, and contains 0 value.</p>\n","default":true},"onZeroAxisIndex":{"type":["number"],"description":"<p>When mutiple axes exists, this option can be used to specify which axis can be &quot;onZero&quot; to.</p>\n"},"symbol":{"type":["string","Array"],"description":"<p>Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It&#39;s set to be <code class=\"codespan\">&#39;none&#39;</code> by default, meaning no arrow for either end. If it is set to be <code class=\"codespan\">&#39;arrow&#39;</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code class=\"codespan\">[&#39;none&#39;, &#39;arrow&#39;]</code>.</p>\n","default":"'none'"},"symbolSize":{"type":["Array"],"description":"<p>Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.</p>\n","default":"[10, 15]"},"symbolOffset":{"type":["Array","number"],"description":"<p>Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>line styleLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#333'"},"width":{"type":["number"],"description":"<p>line style line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>line style line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"axisTick":{"type":["Object"],"description":"<p>Settings related to axis tick.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis tick from showing.</p>\n","default":true},"alignWithLabel":{"type":["boolean"],"description":"<p>Align axis tick with label, which is available only when <code class=\"codespan\">boundaryGap</code> is set to be <code class=\"codespan\">true</code> in category axis. See the following picture:</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/axis-align-with-label.png\"></p>\n","default":false},"interval":{"type":["number","Function"],"description":"<p>Interval of axisTick, which is available in category axis.  is set to be the same as <a href=\"#xAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> so the axis labels face the <code class=\"codespan\">inside</code> direction.</p>\n","default":false},"length":{"type":["number"],"description":"<p>The length of the axis tick.</p>\n","default":5},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Color of axis label is set to be <a href=\"#xAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"width":{"type":["number"],"description":"<p>axisTick line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>axisTick line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"minorTick":{"type":["Object"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.6.0</code></p>\n</blockquote>\n<p>Settings related minor ticks.</p>\n<p>Note: <code class=\"codespan\">minorTick</code> is not available in the <code class=\"codespan\">category</code> type axis.</p>\n<p>Examples:</p>\n<p>1) Using minor ticks in function plotting.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-function&edit=1&reset=1\" width=\"600\" height=\"350\"><iframe />\n\n\n<p>2) Using minor ticks in log axis.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-log&edit=1&reset=1\" width=\"600\" height=\"350\"><iframe />\n\n\n","properties":{"show":{"type":["boolean"],"description":"<p>If show minor ticks.</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>Number of interval splited by minor ticks.</p>\n","default":5},"length":{"type":["number"],"description":"<p>Length of minor ticks lines。</p>\n","default":3},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Style configuration of minor ticks lines <a href=\"#xAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。</p>\n"},"width":{"type":["number"],"description":"<p>minorTick line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>minorTick line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"axisLabel":{"type":["Object"],"description":"<p>Settings related to axis label.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis label from appearing.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>Interval of Axis label, which is available in category axis. </p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> so the axis labels face the <code class=\"codespan\">inside</code> direction.</p>\n","default":false},"rotate":{"type":["number"],"description":"<p>Rotation degree of axis label, which is especially useful when there is no enough space for category axis.</p>\n<p>Rotation degree is from -90 to 90.</p>\n","default":0},"margin":{"type":["number"],"description":"<p>The margin between the axis label and the axis line.</p>\n","default":8},"formatter":{"type":["string","Function"],"description":"<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Use string template; template variable is the default label of axis {value}\nformatter: &#39;{value} kg&#39;\n\n// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (idx === 0) {\n        texts.unshift(date.getYear());\n    }\n    return texts.join(&#39;/&#39;);\n}\n</code></pre>\n","default":null},"showMinLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the min tick. Optional values: <code class=\"codespan\">true</code>, <code class=\"codespan\">false</code>, <code class=\"codespan\">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.</p>\n","default":null},"showMaxLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the max tick. Optional values: <code class=\"codespan\">true</code>, <code class=\"codespan\">false</code>, <code class=\"codespan\">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.</p>\n","default":null},"color":{"type":["Color","Function"],"description":"<p>Color of axis label is set to be <a href=\"#xAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class=\"lang-js\">(val: string) =&gt; Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class=\"lang-js\">textStyle: {\n    color: function (value, index) {\n        return value &gt;= 0 ? &#39;green&#39; : &#39;red&#39;;\n    }\n}\n</code></pre>\n"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n\n","default":0}}}}}}},"splitLine":{"type":["Object"],"description":"<p>Split line of axis in <a href=\"#grid\">grid</a> area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the splitLine from showing.\n<code class=\"codespan\">value</code> type axes are shown by default, while <code class=\"codespan\">category</code> type axes are hidden.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>Interval of Axis splitLine, which is available in category axis.  is set to be the same as <a href=\"#xAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Array","string"],"description":"<p>The color of the splitLine, which could be set separately.</p>\n<p>SplitLine color could also be set in color array, which the split lines would take as their colors in turns.</p>\n<p>Example:</p>\n<pre><code>splitLine: {\n    lineStyle: {\n        // Dark and light colors will be used in turns\n        color: [&#39;#aaa&#39;, &#39;#ddd&#39;]\n    }\n}\n</code></pre>","default":"['#ccc']"},"width":{"type":["number"],"description":"<p>splitLine line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>splitLine line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"minorSplitLine":{"type":["Object"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.6.0</code></p>\n</blockquote>\n<p>Minor split lines of axis in the <a href=\"#grid\">grid</a> area。It will align to the <a href=\"#xAxis.minorTick\">minorTick</a></p>\n","properties":{"show":{"type":["boolean"],"description":"<p>If show minor split lines.</p>\n","default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>minorSplitLineLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#eee'"},"width":{"type":["number"],"description":"<p>minorSplitLine line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>minorSplitLine line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"splitArea":{"type":["Object"],"description":"<p>Split area of axis in <a href=\"#grid\">grid</a> area, not shown by default.</p>\n","properties":{"interval":{"type":["number","Function"],"description":"<p>Interval of Axis splitArea, which is available in category axis.  is set to be the same as <a href=\"#xAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to show the splitArea.</p>\n","default":false},"areaStyle":{"type":["Object"],"description":"<p>Split area style.</p>\n","properties":{"color":{"type":["Array"],"description":"<p>Color of split area.\nSplitArea color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.</p>\n","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Category data, available in <a href=\"#xAxis.type\">type</a>: &#39;category&#39; axis.</p>\n<p>If <a href=\"#xAxis.type\">type</a> is not specified, but <code class=\"codespan\">axis.data</code> is specified, the <a href=\"#xAxis.type\">type</a> is auto set as <code class=\"codespan\">&#39;category&#39;</code>.</p>\n<p>If <a href=\"#xAxis.type\">type</a> is specified as <code class=\"codespan\">&#39;category&#39;</code>, but <code class=\"codespan\">axis.data</code> is not specified, <code class=\"codespan\">axis.data</code> will be auto collected from <a href=\"#series.data\">series.data</a>. It brings convenience, but we should notice that <code class=\"codespan\">axis.data</code> provides then value range of the <code class=\"codespan\">&#39;category&#39;</code> axis. If  it is auto collected from <a href=\"#series.data\">series.data</a>, Only the values appearing in <a href=\"#series.data\">series.data</a> can be collected. For example, if <a href=\"#series.data\">series.data</a> is empty, nothing will be collected.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Name list of all categories\ndata: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n// Each item could also be a specific configuration item.\n// In this case, `value` is used as the category name.\ndata: [{\n    value: &#39;Monday&#39;,\n    // Highlight Monday\n    textStyle: {\n        fontSize: 20,\n        color: &#39;red&#39;\n    }\n}, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n</code></pre>\n","items":{"type":"Object","properties":{"value":{"type":["string"],"description":"<p>Name of a category.</p>\n"},"textStyle":{"type":["Object"],"description":"<p>Text style of the category.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}},"axisPointer":{"type":["Object"],"description":"<p>axisPointer settings on the axis.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>axisPointer will not be displayed by default. But if <a href=\"#tooltip.trigger\">tooltip.trigger</a> is set as <code class=\"codespan\">&#39;axis&#39;</code> or <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as  <code class=\"codespan\">&#39;cross&#39;</code>, axisPointer will be displayed automatically. Each coordinate system will automatically chose the axes whose will display its axisPointer. <a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> can be used to change the choice.</p>\n","default":false},"type":{"type":["string"],"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;line&#39;</code> line indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;shadow&#39;</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;none&#39;</code> no indicator displayed.</p>\n</li>\n</ul>\n","default":"'line'"},"snap":{"type":["boolean"],"description":"<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n"},"z":{"type":["number"],"description":"<p>z value, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n"},"label":{"type":["Object"],"description":"<p>label of axisPointer</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label. Label will not show by default. But if <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as  <code class=\"codespan\">&#39;cross&#39;</code>, label will be displayed automatically.</p>\n","default":false},"precision":{"type":["number","string"],"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code class=\"codespan\">&#39;2&#39;</code>, which indicates that two decimal fractions are reserved.</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"<p>The formatter of label.</p>\n<p>If set as <code class=\"codespan\">string</code>, for example it can be: <code class=\"codespan\">formatter: &#39;some text {value} some text</code>, where <code class=\"codespan\">{value}</code> will be replaced by axis value automatically.</p>\n<p>If set as <code class=\"codespan\">function</code>:</p>\n<p><strong>Parameters:</strong></p>\n<p><code class=\"codespan\">{Object}</code> params: Including fields as follows:</p>\n<p><code class=\"codespan\">{Object}</code> params.value: current value of this axis. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;category&#39;</code>, it is one of the value in <code class=\"codespan\">axis.data</code>. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;time&#39;</code>, it is a timestamp.</p>\n<p><code class=\"codespan\">{Array.&lt;Object&gt;}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<p><code class=\"codespan\">{string}</code> params.axisDimension: The dimension name of the axis. For example, in catesian it will be <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, and in polar it will be <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code>.</p>\n<p><code class=\"codespan\">{number}</code> params.axisIndex: The index of the axis, for example, <code class=\"codespan\">0</code>,<code class=\"codespan\">1</code>, <code class=\"codespan\">2</code>, ...</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n    axisDim: &#39;x&#39;, // &#39;x&#39;, &#39;y&#39;, &#39;angle&#39;, &#39;radius&#39;, &#39;single&#39;\n    axisId: &#39;xxx&#39;,\n    axisName: &#39;xxx&#39;,\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: &#39;text of value&#39;\n}\n</code></pre>\n<p><strong>Return:</strong></p>\n<p>The string to be displayed.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n    // If axis.type is &#39;time&#39;\n    return &#39;some text&#39; + echarts.format.formatTime(params.value);\n}\n</code></pre>\n","default":null},"margin":{"type":["boolean"],"description":"<p>Distance between label and axis.</p>\n","default":3},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"padding":{"type":["string","Array"],"description":"<p>axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"<p>Border color of label.</p>\n","default":null},"borderWidth":{"type":["string"],"description":"<p>Border width of label.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"lineStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;line&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"shadowStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;shadow&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"triggerTooltip":{"type":["boolean"],"description":"<p>Whether to trigger tooltip.</p>\n","default":true},"value":{"type":["number"],"description":"<p>current value. When using <a href=\"xAxisPointer.handle\" target=\"_blank\">axisPointer.handle</a>, <code class=\"codespan\">value</code> can be set to define the initail position of axisPointer.</p>\n","default":null},"status":{"type":["boolean"],"description":"<p>Current status, can be <code class=\"codespan\">&#39;show&#39;</code> 和 <code class=\"codespan\">&#39;hide&#39;</code>.</p>\n"},"handle":{"type":["Object"],"description":"<p>A button used to drag axisPointer. This feature is applicable in touch device. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set to <code class=\"codespan\">true</code> to use handle.</p>\n","default":false},"icon":{"type":["*"],"description":"<p>The icon of the handle.</p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/axisPointer-handle-image&amp;edit=1&amp;reset=1\" target=\"_blank\">example of using image</a></p>\n"},"size":{"type":["number","Array"],"description":"<p>The size of the handle, which can be set as a single value or an array (<code class=\"codespan\">[width, height]</code>).</p>\n","default":45},"margin":{"type":["number"],"description":"<p>Distance from handle center to axis.</p>\n","default":50},"color":{"type":["string"],"description":"<p>The color of the handle.</p>\n","default":"'#333'"},"throttle":{"type":["number"],"description":"<p>Throttle rate of trigger view update when dragging handle, in ms. Increase the value to improve performance, but decrease the experience.</p>\n","default":40},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":2},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}}}},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in x axis.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in x axis, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":0}}},"yAxis":{"type":["Object"],"description":"<p>The y axis in cartesian(rectangular) coordinate. Usually a single grid component can place at most 2 y axis, one on the left and another on the right. <a href=\"#yAxis.offset\">offset</a> can be used to avoid overlap when you need to put more than two y axis.</p>\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis from showing.</p>\n","default":true},"gridIndex":{"type":["number"],"description":"<p>The index of grid which the y axis belongs to. Defaults to be in the first grid.</p>\n","default":0},"position":{"type":["string"],"description":"<p>the position of y axis.</p>\n<p>options:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>The first y axis in grid defaults to be the left (<code class=\"codespan\">&#39;left&#39;</code>)  of the grid, and the second y axis is on the other side against the first y axis.</p>\n"},"offset":{"type":["number"],"description":"<p>Offset of y axis relative to default position. Useful when multiple y axis has same <a href=\"#yAxis.position\">position</a> value.</p>\n","default":0},"type":{"type":["string"],"description":"<p>Type of axis.</p>\n<p>Option:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;value&#39;</code>\n  Numerical axis, suitable for continuous data.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;category&#39;</code>\n  Category axis, suitable for discrete category data. Category data can be auto retrieved from <a href=\"#series.data\">series.data</a> or <a href=\"#dataset.source\">dataset.source</a>, or can be specified via <a href=\"#yAxis.data\">yAxis.data</a>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;time&#39;</code>\n  Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;log&#39;</code>\n  Log axis, suitable for log data.</p>\n</li>\n</ul>\n","default":"'value'"},"name":{"type":["string"],"description":"<p>Name of axis.</p>\n"},"nameLocation":{"type":["string"],"description":"<p>Location of axis name.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> or <code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;end&#39;</code></li>\n</ul>\n","default":"'end'"},"nameTextStyle":{"type":["Object"],"description":"<p>Text style of axis name.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Color of axis name uses <a href=\"#yAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"fontStyle":{"type":["string"],"description":"<p>axis name font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p>axis name font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>axis name font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>axis name font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n\n","default":0}}}}}}},"nameGap":{"type":["number"],"description":"<p>Gap between axis name and axis line.</p>\n","default":15},"nameRotate":{"type":["number"],"description":"<p>Rotation of axis name.</p>\n","default":null},"inverse":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to invert the axis.\nThis is a new option available from Echarts 3 and newer.</p>\n","default":false},"boundaryGap":{"type":["boolean","Array"],"description":"<p>The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different.</p>\n<p>The <code class=\"codespan\">boundaryGap</code> of category axis can be set to either <code class=\"codespan\">true</code> or <code class=\"codespan\">false</code>. Default value is set to be <code class=\"codespan\">true</code>, in which case <a href=\"#yAxis.axisTick\">axisTick</a> is served only as a separation line, and labels and data appear only in the center part of two <a href=\"#yAxis.axisTick\">axis ticks</a>, which is called <em>band</em>.</p>\n<p>For non-category axis, including time, numerical value, and log axes, <code class=\"codespan\">boundaryGap</code> is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting <a href=\"#yAxis.min\">min</a> and <a href=\"#yAxis.max\">max</a>.\n<strong>Example: </strong></p>\n<pre><code class=\"lang-js\">boundaryGap: [&#39;20%&#39;, &#39;20%&#39;]\n</code></pre>\n"},"min":{"type":["number","string","Function"],"description":"<p>The minimun value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">&#39;dataMin&#39;</code> so that the minimum value on this axis is set to be the minimum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class=\"codespan\">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class=\"codespan\">2</code> represents <code class=\"codespan\">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class=\"codespan\">-3</code>.</p>\n<p>If <code class=\"codespan\">min</code> is specified as a function, it should return a min value, like:</p>\n<pre><code class=\"lang-js\">min: function (value) {\n    return value.min - 20;\n}\n</code></pre>\n<p><code class=\"codespan\">value</code> is an object, containing the <code class=\"codespan\">min</code> value and <code class=\"codespan\">max</code> value of the data. This function should return the min value of axis, or return <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> to make echarts use the auto calculated min value (<code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> return is only supported since <code class=\"codespan\">v4.8.0</code>).</p>\n","default":null},"max":{"type":["number","string","Function"],"description":"<p>The maximum value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">&#39;dataMax&#39;</code> so that the minimum value on this axis is set to be the maximum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class=\"codespan\">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class=\"codespan\">2</code> represents <code class=\"codespan\">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class=\"codespan\">-3</code>.</p>\n<p>If <code class=\"codespan\">max</code> is specified as a function, it should return a max value, like:</p>\n<pre><code class=\"lang-js\">max: function (value) {\n    return value.max - 20;\n}\n</code></pre>\n<p><code class=\"codespan\">value</code> is an object, containing the <code class=\"codespan\">min</code> value and <code class=\"codespan\">max</code> value of the data. This function should return the max value of axis, or return <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> to make echarts use the auto calculated max value (<code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> return is only supported since <code class=\"codespan\">v4.8.0</code>).</p>\n","default":null},"scale":{"type":["boolean"],"description":"<p>It is available only in numerical axis, i.e., <a href=\"#yAxis.type\">type</a>: &#39;value&#39;.</p>\n<p>It specifies whether not to contain zero position of axis compulsively. When it is set to be <code class=\"codespan\">true</code>, the axis may not contain zero position, which is useful in the scatter chart for both value axes.</p>\n<p>This configuration item is unavailable when the <a href=\"#yAxis.min\">min</a> and <a href=\"#yAxis.max\">max</a> are set.</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.</p>\n<p>This is unavailable for category axis.</p>\n","default":5},"minInterval":{"type":["number"],"description":"<p>Minimum gap between split lines.</p>\n<p>For example, it can be set to be <code class=\"codespan\">1</code> to make sure axis label is show as integer.</p>\n<pre><code class=\"lang-js\">{\n    minInterval: 1\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#yAxis.type\">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n","default":0},"maxInterval":{"type":["number"],"description":"<p>Maximum gap between split lines.</p>\n<p>For example, in time axis (<a href=\"#yAxis.type\">type</a> is &#39;time&#39;), it can be set to be <code class=\"codespan\">3600 * 24 * 1000</code> to make sure that the gap between axis labels is less than or equal to one day.</p>\n<pre><code class=\"lang-js\">{\n    maxInterval: 3600 * 1000 * 24\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#yAxis.type\">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n"},"interval":{"type":["number"],"description":"<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href=\"#yAxis.splitNumber\">splitNumber</a> is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with <a href=\"#yAxis.min\">min</a> and <a href=\"#yAxis.max\">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situations.</p>\n<p>This is unavailable for category axis. Timestamp should be passed for <a href=\"#yAxis.type\">type</a>: &#39;time&#39; axis. Logged value should be passed for <a href=\"#yAxis.type\">type</a>: &#39;log&#39; axis.</p>\n"},"logBase":{"type":["number"],"description":"<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#yAxis.type\">type</a>: &#39;log&#39;.</p>\n","default":10},"silent":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code>, to prevent interaction with the axis.</p>\n","default":false},"triggerEvent":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to enable triggering events.</p>\n<p>Parameters of the event include:</p>\n<pre><code class=\"lang-js\">{\n    // Component type: xAxis, yAxis, radiusAxis, angleAxis\n    // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n    componentType: string,\n    // Value on axis before being formatted.\n    // Click on value label to trigger event.\n    value: &#39;&#39;,\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: &#39;&#39;\n}\n</code></pre>\n","default":false},"axisLine":{"type":["Object"],"description":"<p>Settings related to axis line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n","default":true},"onZero":{"type":["boolean"],"description":"<p>Specifies whether X or Y axis lies on the other&#39;s origin position, where value is 0 on axis. Valid only if the other axis is of value type, and contains 0 value.</p>\n","default":true},"onZeroAxisIndex":{"type":["number"],"description":"<p>When mutiple axes exists, this option can be used to specify which axis can be &quot;onZero&quot; to.</p>\n"},"symbol":{"type":["string","Array"],"description":"<p>Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It&#39;s set to be <code class=\"codespan\">&#39;none&#39;</code> by default, meaning no arrow for either end. If it is set to be <code class=\"codespan\">&#39;arrow&#39;</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code class=\"codespan\">[&#39;none&#39;, &#39;arrow&#39;]</code>.</p>\n","default":"'none'"},"symbolSize":{"type":["Array"],"description":"<p>Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.</p>\n","default":"[10, 15]"},"symbolOffset":{"type":["Array","number"],"description":"<p>Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>line styleLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#333'"},"width":{"type":["number"],"description":"<p>line style line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>line style line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"axisTick":{"type":["Object"],"description":"<p>Settings related to axis tick.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis tick from showing.</p>\n","default":true},"alignWithLabel":{"type":["boolean"],"description":"<p>Align axis tick with label, which is available only when <code class=\"codespan\">boundaryGap</code> is set to be <code class=\"codespan\">true</code> in category axis. See the following picture:</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/axis-align-with-label.png\"></p>\n","default":false},"interval":{"type":["number","Function"],"description":"<p>Interval of axisTick, which is available in category axis.  is set to be the same as <a href=\"#yAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> so the axis labels face the <code class=\"codespan\">inside</code> direction.</p>\n","default":false},"length":{"type":["number"],"description":"<p>The length of the axis tick.</p>\n","default":5},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Color of axis label is set to be <a href=\"#yAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"width":{"type":["number"],"description":"<p>axisTick line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>axisTick line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"minorTick":{"type":["Object"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.6.0</code></p>\n</blockquote>\n<p>Settings related minor ticks.</p>\n<p>Note: <code class=\"codespan\">minorTick</code> is not available in the <code class=\"codespan\">category</code> type axis.</p>\n<p>Examples:</p>\n<p>1) Using minor ticks in function plotting.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-function&edit=1&reset=1\" width=\"600\" height=\"350\"><iframe />\n\n\n<p>2) Using minor ticks in log axis.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-log&edit=1&reset=1\" width=\"600\" height=\"350\"><iframe />\n\n\n","properties":{"show":{"type":["boolean"],"description":"<p>If show minor ticks.</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>Number of interval splited by minor ticks.</p>\n","default":5},"length":{"type":["number"],"description":"<p>Length of minor ticks lines。</p>\n","default":3},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Style configuration of minor ticks lines <a href=\"#yAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。</p>\n"},"width":{"type":["number"],"description":"<p>minorTick line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>minorTick line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"axisLabel":{"type":["Object"],"description":"<p>Settings related to axis label.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis label from appearing.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>Interval of Axis label, which is available in category axis. </p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> so the axis labels face the <code class=\"codespan\">inside</code> direction.</p>\n","default":false},"rotate":{"type":["number"],"description":"<p>Rotation degree of axis label, which is especially useful when there is no enough space for category axis.</p>\n<p>Rotation degree is from -90 to 90.</p>\n","default":0},"margin":{"type":["number"],"description":"<p>The margin between the axis label and the axis line.</p>\n","default":8},"formatter":{"type":["string","Function"],"description":"<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Use string template; template variable is the default label of axis {value}\nformatter: &#39;{value} kg&#39;\n\n// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (idx === 0) {\n        texts.unshift(date.getYear());\n    }\n    return texts.join(&#39;/&#39;);\n}\n</code></pre>\n","default":null},"showMinLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the min tick. Optional values: <code class=\"codespan\">true</code>, <code class=\"codespan\">false</code>, <code class=\"codespan\">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.</p>\n","default":null},"showMaxLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the max tick. Optional values: <code class=\"codespan\">true</code>, <code class=\"codespan\">false</code>, <code class=\"codespan\">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.</p>\n","default":null},"color":{"type":["Color","Function"],"description":"<p>Color of axis label is set to be <a href=\"#yAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class=\"lang-js\">(val: string) =&gt; Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class=\"lang-js\">textStyle: {\n    color: function (value, index) {\n        return value &gt;= 0 ? &#39;green&#39; : &#39;red&#39;;\n    }\n}\n</code></pre>\n"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n\n","default":0}}}}}}},"splitLine":{"type":["Object"],"description":"<p>Split line of axis in <a href=\"#grid\">grid</a> area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the splitLine from showing.\n<code class=\"codespan\">value</code> type axes are shown by default, while <code class=\"codespan\">category</code> type axes are hidden.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>Interval of Axis splitLine, which is available in category axis.  is set to be the same as <a href=\"#yAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Array","string"],"description":"<p>The color of the splitLine, which could be set separately.</p>\n<p>SplitLine color could also be set in color array, which the split lines would take as their colors in turns.</p>\n<p>Example:</p>\n<pre><code>splitLine: {\n    lineStyle: {\n        // Dark and light colors will be used in turns\n        color: [&#39;#aaa&#39;, &#39;#ddd&#39;]\n    }\n}\n</code></pre>","default":"['#ccc']"},"width":{"type":["number"],"description":"<p>splitLine line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>splitLine line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"minorSplitLine":{"type":["Object"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.6.0</code></p>\n</blockquote>\n<p>Minor split lines of axis in the <a href=\"#grid\">grid</a> area。It will align to the <a href=\"#yAxis.minorTick\">minorTick</a></p>\n","properties":{"show":{"type":["boolean"],"description":"<p>If show minor split lines.</p>\n","default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>minorSplitLineLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#eee'"},"width":{"type":["number"],"description":"<p>minorSplitLine line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>minorSplitLine line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"splitArea":{"type":["Object"],"description":"<p>Split area of axis in <a href=\"#grid\">grid</a> area, not shown by default.</p>\n","properties":{"interval":{"type":["number","Function"],"description":"<p>Interval of Axis splitArea, which is available in category axis.  is set to be the same as <a href=\"#yAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to show the splitArea.</p>\n","default":false},"areaStyle":{"type":["Object"],"description":"<p>Split area style.</p>\n","properties":{"color":{"type":["Array"],"description":"<p>Color of split area.\nSplitArea color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.</p>\n","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Category data, available in <a href=\"#yAxis.type\">type</a>: &#39;category&#39; axis.</p>\n<p>If <a href=\"#yAxis.type\">type</a> is not specified, but <code class=\"codespan\">axis.data</code> is specified, the <a href=\"#yAxis.type\">type</a> is auto set as <code class=\"codespan\">&#39;category&#39;</code>.</p>\n<p>If <a href=\"#yAxis.type\">type</a> is specified as <code class=\"codespan\">&#39;category&#39;</code>, but <code class=\"codespan\">axis.data</code> is not specified, <code class=\"codespan\">axis.data</code> will be auto collected from <a href=\"#series.data\">series.data</a>. It brings convenience, but we should notice that <code class=\"codespan\">axis.data</code> provides then value range of the <code class=\"codespan\">&#39;category&#39;</code> axis. If  it is auto collected from <a href=\"#series.data\">series.data</a>, Only the values appearing in <a href=\"#series.data\">series.data</a> can be collected. For example, if <a href=\"#series.data\">series.data</a> is empty, nothing will be collected.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Name list of all categories\ndata: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n// Each item could also be a specific configuration item.\n// In this case, `value` is used as the category name.\ndata: [{\n    value: &#39;Monday&#39;,\n    // Highlight Monday\n    textStyle: {\n        fontSize: 20,\n        color: &#39;red&#39;\n    }\n}, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n</code></pre>\n","items":{"type":"Object","properties":{"value":{"type":["string"],"description":"<p>Name of a category.</p>\n"},"textStyle":{"type":["Object"],"description":"<p>Text style of the category.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}},"axisPointer":{"type":["Object"],"description":"<p>axisPointer settings on the axis.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>axisPointer will not be displayed by default. But if <a href=\"#tooltip.trigger\">tooltip.trigger</a> is set as <code class=\"codespan\">&#39;axis&#39;</code> or <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as  <code class=\"codespan\">&#39;cross&#39;</code>, axisPointer will be displayed automatically. Each coordinate system will automatically chose the axes whose will display its axisPointer. <a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> can be used to change the choice.</p>\n","default":false},"type":{"type":["string"],"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;line&#39;</code> line indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;shadow&#39;</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;none&#39;</code> no indicator displayed.</p>\n</li>\n</ul>\n","default":"'line'"},"snap":{"type":["boolean"],"description":"<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n"},"z":{"type":["number"],"description":"<p>z value, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n"},"label":{"type":["Object"],"description":"<p>label of axisPointer</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label. Label will not show by default. But if <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as  <code class=\"codespan\">&#39;cross&#39;</code>, label will be displayed automatically.</p>\n","default":false},"precision":{"type":["number","string"],"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code class=\"codespan\">&#39;2&#39;</code>, which indicates that two decimal fractions are reserved.</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"<p>The formatter of label.</p>\n<p>If set as <code class=\"codespan\">string</code>, for example it can be: <code class=\"codespan\">formatter: &#39;some text {value} some text</code>, where <code class=\"codespan\">{value}</code> will be replaced by axis value automatically.</p>\n<p>If set as <code class=\"codespan\">function</code>:</p>\n<p><strong>Parameters:</strong></p>\n<p><code class=\"codespan\">{Object}</code> params: Including fields as follows:</p>\n<p><code class=\"codespan\">{Object}</code> params.value: current value of this axis. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;category&#39;</code>, it is one of the value in <code class=\"codespan\">axis.data</code>. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;time&#39;</code>, it is a timestamp.</p>\n<p><code class=\"codespan\">{Array.&lt;Object&gt;}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<p><code class=\"codespan\">{string}</code> params.axisDimension: The dimension name of the axis. For example, in catesian it will be <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, and in polar it will be <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code>.</p>\n<p><code class=\"codespan\">{number}</code> params.axisIndex: The index of the axis, for example, <code class=\"codespan\">0</code>,<code class=\"codespan\">1</code>, <code class=\"codespan\">2</code>, ...</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n    axisDim: &#39;x&#39;, // &#39;x&#39;, &#39;y&#39;, &#39;angle&#39;, &#39;radius&#39;, &#39;single&#39;\n    axisId: &#39;xxx&#39;,\n    axisName: &#39;xxx&#39;,\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: &#39;text of value&#39;\n}\n</code></pre>\n<p><strong>Return:</strong></p>\n<p>The string to be displayed.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n    // If axis.type is &#39;time&#39;\n    return &#39;some text&#39; + echarts.format.formatTime(params.value);\n}\n</code></pre>\n","default":null},"margin":{"type":["boolean"],"description":"<p>Distance between label and axis.</p>\n","default":3},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"padding":{"type":["string","Array"],"description":"<p>axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"<p>Border color of label.</p>\n","default":null},"borderWidth":{"type":["string"],"description":"<p>Border width of label.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"lineStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;line&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"shadowStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;shadow&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"triggerTooltip":{"type":["boolean"],"description":"<p>Whether to trigger tooltip.</p>\n","default":true},"value":{"type":["number"],"description":"<p>current value. When using <a href=\"xAxisPointer.handle\" target=\"_blank\">axisPointer.handle</a>, <code class=\"codespan\">value</code> can be set to define the initail position of axisPointer.</p>\n","default":null},"status":{"type":["boolean"],"description":"<p>Current status, can be <code class=\"codespan\">&#39;show&#39;</code> 和 <code class=\"codespan\">&#39;hide&#39;</code>.</p>\n"},"handle":{"type":["Object"],"description":"<p>A button used to drag axisPointer. This feature is applicable in touch device. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set to <code class=\"codespan\">true</code> to use handle.</p>\n","default":false},"icon":{"type":["*"],"description":"<p>The icon of the handle.</p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/axisPointer-handle-image&amp;edit=1&amp;reset=1\" target=\"_blank\">example of using image</a></p>\n"},"size":{"type":["number","Array"],"description":"<p>The size of the handle, which can be set as a single value or an array (<code class=\"codespan\">[width, height]</code>).</p>\n","default":45},"margin":{"type":["number"],"description":"<p>Distance from handle center to axis.</p>\n","default":50},"color":{"type":["string"],"description":"<p>The color of the handle.</p>\n","default":"'#333'"},"throttle":{"type":["number"],"description":"<p>Throttle rate of trigger view update when dragging handle, in ms. Increase the value to improve performance, but decrease the experience.</p>\n","default":40},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":2},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}}}},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in y axis.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in y axis, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":0}}},"polar":{"type":["Object"],"description":"<p>Polar coordinate can be used in scatter and line chart. Every polar coordinate has an <a href=\"#angleAxis\">angleAxis</a> and a <a href=\"#radiusAxis\">radiusAxis</a>.</p>\n<p><strong>For example: </strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=scatter-polar-punchCard&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"center":{"type":["Array"],"description":"<p>Center position of Polar coordinate, the first of which is the horizontal position, and the second is the vertical position.</p>\n<p>Percentage is supported. When set in percentage, the item is relative to the container width, and the second item to the height.</p>\n<p><strong>Example: </strong></p>\n<pre><code>// Set to absolute pixel values\ncenter: [400, 300]\n// Set to relative percent\ncenter: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>","default":"['50%', '50%']"},"radius":{"type":["number","string","Array"],"description":"<p>Radius of Polar coordinate. Value can be:</p>\n<ul>\n<li><code class=\"codespan\">number</code>: Specify outside radius directly.</li>\n<li><p><code class=\"codespan\">string</code>: For example, <code class=\"codespan\">&#39;20%&#39;</code>, means that the outside radius is 20% of the viewport size (the little one between width and height of the chart container).</p>\n</li>\n<li><p><code class=\"codespan\">Array.&lt;number|string&gt;</code>: The first item specifies the inside radius, and the second item specifies the outside radius. Each item follows the definitions above.</p>\n</li>\n</ul>\n"},"tooltip":{"type":["Object"],"description":"<p>tooltip settings in the coordinate system component.</p>\n<hr>\n<p><strong>General Introduction:</strong></p>\n<p>tooltip can be configured on different places:</p>\n<ul>\n<li><p>Configured on global: <a href=\"#tooltip\">tooltip</a></p>\n</li>\n<li><p>Configured in a coordinate system: <a href=\"#grid.tooltip\">grid.tooltip</a>, <a href=\"#polar.tooltip\">polar.tooltip</a>, <a href=\"#single.tooltip\">single.tooltip</a></p>\n</li>\n<li><p>Configured in a series: <a href=\"#series.tooltip\">series.tooltip</a></p>\n</li>\n<li><p>Configured in each item of <code class=\"codespan\">series.data</code>: <a href=\"#series.data.tooltip\">series.data.tooltip</a></p>\n</li>\n</ul>\n<hr>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the tooltip component, including tooltip floating layer and <a href=\"#tooltip.axisPointer\">axisPointer</a>.</p>\n","default":true},"trigger":{"type":["string"],"description":"<p>Type of triggering.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;item&#39;</code></p>\n<p>  Triggered by data item, which is mainly used for charts that don&#39;t have a category axis like scatter charts or pie charts.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;axis&#39;</code></p>\n<p>  Triggered by axes, which is mainly used for charts that have category axes, like bar charts or line charts.</p>\n<p> ECharts 2.x only supports axis trigger for category axis. In ECharts 3, it is supported for all types of axes in <a href=\"#grid\">grid</a> or <a href=\"#polar\">polar</a>. Also, you may assign axis with <a href=\"#tooltip.axisPointer.axis\">axisPointer.axis</a>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;none&#39;</code></p>\n<p>  Trigger nothing.</p>\n</li>\n</ul>\n","default":"'item'"},"axisPointer":{"type":["Object"],"description":"<p>Configuration item for axisPointer.</p>\n<p><code class=\"codespan\">tooltip.axisPointer</code> is like syntactic sugar of axisPointer settings on axes (for example, <a href=\"#xAxis.axisPointer\">xAxis.axisPointer</a> or <a href=\"#angleAxis.axisPointer\">angleAxis.axisPointer</a>). More detailed features can be configured on <code class=\"codespan\">someAxis.axisPointer</code>. But in common cases, using <code class=\"codespan\">tooltip.axisPointer</code> is more convenient.</p>\n<blockquote>\n<p><strong>Notice:</strong> configurations of <code class=\"codespan\">tooltip.axisPointer</code> has lower priority than that of <code class=\"codespan\">someAxis.axisPointer</code>.</p>\n</blockquote>\n<hr>\n<p><code class=\"codespan\">axisPointer</code> is a tool for displaying reference line and axis value under mouse pointer.</p>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/candlestick-axisPointer&edit=1&reset=1\" width=\"600\" height=\"450\"><iframe />\n\n\n<p>In the demo above, <a href=\"#axisPointer.link\">axisPointer.link</a> is used to link axisPointer from different coordinate systems.</p>\n<p><code class=\"codespan\">axisPointer</code> can also be used on touch device, where user can drag the button to move the reference line and label.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-tooltip-touch&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n<p>In the cases that more than one axis exist, axisPointer helps to look inside the data.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=multiple-y-axis&edit=1&reset=1\" width=\"600\" height=\"300\"><iframe />\n\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=multiple-x-axis&edit=1&reset=1\" width=\"600\" height=\"300\"><iframe />\n\n\n\n<hr>\n<blockquote>\n<p><strong>Notice:</strong>\nGenerally, axisPointers is configured in each axes who need them (for example <a href=\"#xAxis.axisPointer\">xAxis.axisPointer</a>), or configured in <code class=\"codespan\">tooltip</code> (for example <a href=\"#tooltip.axisPointer\">tooltip.axisPointer</a>).</p>\n</blockquote>\n<blockquote>\n<p>But these configurations can only be configured in global axisPointer:\n<a href=\"#axisPointer.triggerOn\">axisPointer.triggerOn</a>, <a href=\"#axisPointer.link\">axisPointer.link</a>.</p>\n</blockquote>\n<hr>\n<hr>\n<p><strong>How to display axisPointer:</strong></p>\n<p>In <a href=\"#grid\">cartesian (grid)</a> and <a href=\"#single\">polar](~polar) and (single axis</a>, each axis has its own axisPointer.</p>\n<p>Those axisPointer will not be displayed by default, utill configured as follows:</p>\n<ul>\n<li><p>Set <code class=\"codespan\">someAxis.axisPointer.show</code> (like <a href=\"#xAxis.axisPointer.show\">xAxis.axisPointer.show</a>) as <code class=\"codespan\">true</code>. Then axisPointer of this axis will be displayed.</p>\n</li>\n<li><p>Set <a href=\"#tooltip.trigger\">tooltip.trigger</a> as <code class=\"codespan\">&#39;axis&#39;</code>, or set <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> as <code class=\"codespan\">&#39;cross&#39;</code>. Then coordinate system will automatically chose the axes who will display their axisPointers. (<a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> can be used to change the choice.) Notice, <code class=\"codespan\">axis.axisPointer</code> will override <code class=\"codespan\">tooltip.axisPointer</code> settings.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to display the label of axisPointer:</strong></p>\n<p>The label of axisPointer will not be displayed by default(namely, only reference line will be displayed by default), utill configured as follows:</p>\n<ul>\n<li><p>Set <code class=\"codespan\">someAxis.axisPointer.label.show</code> (for example <a href=\"#xAxis.axisPointer.show\">xAxis.axisPointer.label.show</a>) as <code class=\"codespan\">true</code>. Then the label of the axisPointer will be displayed.</p>\n</li>\n<li><p>Set <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> as  <code class=\"codespan\">&#39;cross&#39;</code>. Then the label of the crossed axisPointers will be displayed.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to configure axisPointer on touch device:</strong></p>\n<p>Set <code class=\"codespan\">someAxis.axisPointer.handle.show</code> (for example <a href=\"#xAxis.axisPointer.handle.show\">xAxis.axisPointer.handle.show</a> as <code class=\"codespan\">true</code>. Then the button for dragging will be displayed. (This feature is not supported on polar).</p>\n<p><strong>Notice:</strong>\nIf tooltip does not work well in this case, try to set<a href=\"#tooltip.triggerOn\">tooltip.triggerOn</a> as <code class=\"codespan\">&#39;none&#39;</code> (for the effect: show tooltip when finger holding on the button, and hide tooltip after finger left the button), or set <a href=\"#tooltip.alwaysShowContent\">tooltip.alwaysShowContent</a> as <code class=\"codespan\">true</code> (then tooltip will always be displayed).</p>\n<p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>.</p>\n<hr>\n<p><strong>Snap to point</strong></p>\n<p>In value axis and time axis, if <a href=\"#xAxis.axisPointer.snap\">snap</a> is set as true, axisPointer will snap to point automatically.</p>\n<hr>\n","properties":{"type":{"type":["string"],"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;line&#39;</code> line indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;shadow&#39;</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;none&#39;</code> no indicator displayed.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;cross&#39;</code> crosshair indicator, which is actually the shortcut of enable two axisPointers of two orthometric axes.</p>\n</li>\n</ul>\n","default":"'line'"},"axis":{"type":["string"],"description":"<p>The coordinate axis, which could be <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, <code class=\"codespan\">&#39;radius&#39;</code>, or <code class=\"codespan\">&#39;angle&#39;</code>. By default, each coordinate system will automatically chose the axes whose will display its axisPointer (category axis or time axis is used by default).</p>\n","default":"'auto'"},"snap":{"type":["boolean"],"description":"<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n"},"z":{"type":["number"],"description":"<p>z value, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n"},"label":{"type":["Object"],"description":"<p>label of axisPointer</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label. Label will not show by default. But if <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as  <code class=\"codespan\">&#39;cross&#39;</code>, label will be displayed automatically.</p>\n","default":false},"precision":{"type":["number","string"],"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code class=\"codespan\">&#39;2&#39;</code>, which indicates that two decimal fractions are reserved.</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"<p>The formatter of label.</p>\n<p>If set as <code class=\"codespan\">string</code>, for example it can be: <code class=\"codespan\">formatter: &#39;some text {value} some text</code>, where <code class=\"codespan\">{value}</code> will be replaced by axis value automatically.</p>\n<p>If set as <code class=\"codespan\">function</code>:</p>\n<p><strong>Parameters:</strong></p>\n<p><code class=\"codespan\">{Object}</code> params: Including fields as follows:</p>\n<p><code class=\"codespan\">{Object}</code> params.value: current value of this axis. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;category&#39;</code>, it is one of the value in <code class=\"codespan\">axis.data</code>. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;time&#39;</code>, it is a timestamp.</p>\n<p><code class=\"codespan\">{Array.&lt;Object&gt;}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<p><code class=\"codespan\">{string}</code> params.axisDimension: The dimension name of the axis. For example, in catesian it will be <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, and in polar it will be <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code>.</p>\n<p><code class=\"codespan\">{number}</code> params.axisIndex: The index of the axis, for example, <code class=\"codespan\">0</code>,<code class=\"codespan\">1</code>, <code class=\"codespan\">2</code>, ...</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n    axisDim: &#39;x&#39;, // &#39;x&#39;, &#39;y&#39;, &#39;angle&#39;, &#39;radius&#39;, &#39;single&#39;\n    axisId: &#39;xxx&#39;,\n    axisName: &#39;xxx&#39;,\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: &#39;text of value&#39;\n}\n</code></pre>\n<p><strong>Return:</strong></p>\n<p>The string to be displayed.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n    // If axis.type is &#39;time&#39;\n    return &#39;some text&#39; + echarts.format.formatTime(params.value);\n}\n</code></pre>\n","default":null},"margin":{"type":["boolean"],"description":"<p>Distance between label and axis.</p>\n","default":3},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"padding":{"type":["string","Array"],"description":"<p>axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"<p>Border color of label.</p>\n","default":null},"borderWidth":{"type":["string"],"description":"<p>Border width of label.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"lineStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;line&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"shadowStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;shadow&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"crossStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;cross&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"dashed"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":200},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"exponentialOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"position":{"type":["string","Array"],"description":"<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},"radiusAxis":{"type":["Object"],"description":"<p>Radial axis of polar coordinate.</p>\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"polarIndex":{"type":["number"],"description":"<p>Index of radial axis in polor coordinate. It&#39;s the first axis by default.</p>\n","default":0},"type":{"type":["string"],"description":"<p>Type of axis.</p>\n<p>Option:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;value&#39;</code>\n  Numerical axis, suitable for continuous data.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;category&#39;</code>\n  Category axis, suitable for discrete category data. Category data can be auto retrieved from <a href=\"#series.data\">series.data</a> or <a href=\"#dataset.source\">dataset.source</a>, or can be specified via <a href=\"#radiusAxis.data\">radiusAxis.data</a>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;time&#39;</code>\n  Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;log&#39;</code>\n  Log axis, suitable for log data.</p>\n</li>\n</ul>\n","default":"'value'"},"name":{"type":["string"],"description":"<p>Name of axis.</p>\n"},"nameLocation":{"type":["string"],"description":"<p>Location of axis name.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> or <code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;end&#39;</code></li>\n</ul>\n","default":"'end'"},"nameTextStyle":{"type":["Object"],"description":"<p>Text style of axis name.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Color of axis name uses <a href=\"#radiusAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"fontStyle":{"type":["string"],"description":"<p>axis name font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p>axis name font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>axis name font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>axis name font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n\n","default":0}}}}}}},"nameGap":{"type":["number"],"description":"<p>Gap between axis name and axis line.</p>\n","default":15},"nameRotate":{"type":["number"],"description":"<p>Rotation of axis name.</p>\n","default":null},"inverse":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to invert the axis.\nThis is a new option available from Echarts 3 and newer.</p>\n","default":false},"boundaryGap":{"type":["boolean","Array"],"description":"<p>The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different.</p>\n<p>The <code class=\"codespan\">boundaryGap</code> of category axis can be set to either <code class=\"codespan\">true</code> or <code class=\"codespan\">false</code>. Default value is set to be <code class=\"codespan\">true</code>, in which case <a href=\"#radiusAxis.axisTick\">axisTick</a> is served only as a separation line, and labels and data appear only in the center part of two <a href=\"#radiusAxis.axisTick\">axis ticks</a>, which is called <em>band</em>.</p>\n<p>For non-category axis, including time, numerical value, and log axes, <code class=\"codespan\">boundaryGap</code> is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting <a href=\"#radiusAxis.min\">min</a> and <a href=\"#radiusAxis.max\">max</a>.\n<strong>Example: </strong></p>\n<pre><code class=\"lang-js\">boundaryGap: [&#39;20%&#39;, &#39;20%&#39;]\n</code></pre>\n"},"min":{"type":["number","string","Function"],"description":"<p>The minimun value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">&#39;dataMin&#39;</code> so that the minimum value on this axis is set to be the minimum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class=\"codespan\">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class=\"codespan\">2</code> represents <code class=\"codespan\">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class=\"codespan\">-3</code>.</p>\n<p>If <code class=\"codespan\">min</code> is specified as a function, it should return a min value, like:</p>\n<pre><code class=\"lang-js\">min: function (value) {\n    return value.min - 20;\n}\n</code></pre>\n<p><code class=\"codespan\">value</code> is an object, containing the <code class=\"codespan\">min</code> value and <code class=\"codespan\">max</code> value of the data. This function should return the min value of axis, or return <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> to make echarts use the auto calculated min value (<code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> return is only supported since <code class=\"codespan\">v4.8.0</code>).</p>\n","default":null},"max":{"type":["number","string","Function"],"description":"<p>The maximum value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">&#39;dataMax&#39;</code> so that the minimum value on this axis is set to be the maximum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class=\"codespan\">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class=\"codespan\">2</code> represents <code class=\"codespan\">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class=\"codespan\">-3</code>.</p>\n<p>If <code class=\"codespan\">max</code> is specified as a function, it should return a max value, like:</p>\n<pre><code class=\"lang-js\">max: function (value) {\n    return value.max - 20;\n}\n</code></pre>\n<p><code class=\"codespan\">value</code> is an object, containing the <code class=\"codespan\">min</code> value and <code class=\"codespan\">max</code> value of the data. This function should return the max value of axis, or return <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> to make echarts use the auto calculated max value (<code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> return is only supported since <code class=\"codespan\">v4.8.0</code>).</p>\n","default":null},"scale":{"type":["boolean"],"description":"<p>It is available only in numerical axis, i.e., <a href=\"#radiusAxis.type\">type</a>: &#39;value&#39;.</p>\n<p>It specifies whether not to contain zero position of axis compulsively. When it is set to be <code class=\"codespan\">true</code>, the axis may not contain zero position, which is useful in the scatter chart for both value axes.</p>\n<p>This configuration item is unavailable when the <a href=\"#radiusAxis.min\">min</a> and <a href=\"#radiusAxis.max\">max</a> are set.</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.</p>\n<p>This is unavailable for category axis.</p>\n","default":5},"minInterval":{"type":["number"],"description":"<p>Minimum gap between split lines.</p>\n<p>For example, it can be set to be <code class=\"codespan\">1</code> to make sure axis label is show as integer.</p>\n<pre><code class=\"lang-js\">{\n    minInterval: 1\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#radiusAxis.type\">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n","default":0},"maxInterval":{"type":["number"],"description":"<p>Maximum gap between split lines.</p>\n<p>For example, in time axis (<a href=\"#radiusAxis.type\">type</a> is &#39;time&#39;), it can be set to be <code class=\"codespan\">3600 * 24 * 1000</code> to make sure that the gap between axis labels is less than or equal to one day.</p>\n<pre><code class=\"lang-js\">{\n    maxInterval: 3600 * 1000 * 24\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#radiusAxis.type\">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n"},"interval":{"type":["number"],"description":"<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href=\"#radiusAxis.splitNumber\">splitNumber</a> is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with <a href=\"#radiusAxis.min\">min</a> and <a href=\"#radiusAxis.max\">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situations.</p>\n<p>This is unavailable for category axis. Timestamp should be passed for <a href=\"#radiusAxis.type\">type</a>: &#39;time&#39; axis. Logged value should be passed for <a href=\"#radiusAxis.type\">type</a>: &#39;log&#39; axis.</p>\n"},"logBase":{"type":["number"],"description":"<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#radiusAxis.type\">type</a>: &#39;log&#39;.</p>\n","default":10},"silent":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code>, to prevent interaction with the axis.</p>\n","default":false},"triggerEvent":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to enable triggering events.</p>\n<p>Parameters of the event include:</p>\n<pre><code class=\"lang-js\">{\n    // Component type: xAxis, yAxis, radiusAxis, angleAxis\n    // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n    componentType: string,\n    // Value on axis before being formatted.\n    // Click on value label to trigger event.\n    value: &#39;&#39;,\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: &#39;&#39;\n}\n</code></pre>\n","default":false},"axisLine":{"type":["Object"],"description":"<p>Settings related to axis line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n","default":true},"symbol":{"type":["string","Array"],"description":"<p>Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It&#39;s set to be <code class=\"codespan\">&#39;none&#39;</code> by default, meaning no arrow for either end. If it is set to be <code class=\"codespan\">&#39;arrow&#39;</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code class=\"codespan\">[&#39;none&#39;, &#39;arrow&#39;]</code>.</p>\n","default":"'none'"},"symbolSize":{"type":["Array"],"description":"<p>Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.</p>\n","default":"[10, 15]"},"symbolOffset":{"type":["Array","number"],"description":"<p>Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>line styleLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#333'"},"width":{"type":["number"],"description":"<p>line style line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>line style line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"axisTick":{"type":["Object"],"description":"<p>Settings related to axis tick.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis tick from showing.</p>\n","default":true},"alignWithLabel":{"type":["boolean"],"description":"<p>Align axis tick with label, which is available only when <code class=\"codespan\">boundaryGap</code> is set to be <code class=\"codespan\">true</code> in category axis. See the following picture:</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/axis-align-with-label.png\"></p>\n","default":false},"interval":{"type":["number","Function"],"description":"<p>Interval of axisTick, which is available in category axis.  is set to be the same as <a href=\"#radiusAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> so the axis labels face the <code class=\"codespan\">inside</code> direction.</p>\n","default":false},"length":{"type":["number"],"description":"<p>The length of the axis tick.</p>\n","default":5},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Color of axis label is set to be <a href=\"#radiusAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"width":{"type":["number"],"description":"<p>axisTick line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>axisTick line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"minorTick":{"type":["Object"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.6.0</code></p>\n</blockquote>\n<p>Settings related minor ticks.</p>\n<p>Note: <code class=\"codespan\">minorTick</code> is not available in the <code class=\"codespan\">category</code> type axis.</p>\n<p>Examples:</p>\n<p>1) Using minor ticks in function plotting.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-function&edit=1&reset=1\" width=\"600\" height=\"350\"><iframe />\n\n\n<p>2) Using minor ticks in log axis.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-log&edit=1&reset=1\" width=\"600\" height=\"350\"><iframe />\n\n\n","properties":{"show":{"type":["boolean"],"description":"<p>If show minor ticks.</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>Number of interval splited by minor ticks.</p>\n","default":5},"length":{"type":["number"],"description":"<p>Length of minor ticks lines。</p>\n","default":3},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Style configuration of minor ticks lines <a href=\"#radiusAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。</p>\n"},"width":{"type":["number"],"description":"<p>minorTick line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>minorTick line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"axisLabel":{"type":["Object"],"description":"<p>Settings related to axis label.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis label from appearing.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>Interval of Axis label, which is available in category axis. </p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> so the axis labels face the <code class=\"codespan\">inside</code> direction.</p>\n","default":false},"rotate":{"type":["number"],"description":"<p>Rotation degree of axis label, which is especially useful when there is no enough space for category axis.</p>\n<p>Rotation degree is from -90 to 90.</p>\n","default":0},"margin":{"type":["number"],"description":"<p>The margin between the axis label and the axis line.</p>\n","default":8},"formatter":{"type":["string","Function"],"description":"<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Use string template; template variable is the default label of axis {value}\nformatter: &#39;{value} kg&#39;\n\n// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (idx === 0) {\n        texts.unshift(date.getYear());\n    }\n    return texts.join(&#39;/&#39;);\n}\n</code></pre>\n","default":null},"showMinLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the min tick. Optional values: <code class=\"codespan\">true</code>, <code class=\"codespan\">false</code>, <code class=\"codespan\">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.</p>\n","default":null},"showMaxLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the max tick. Optional values: <code class=\"codespan\">true</code>, <code class=\"codespan\">false</code>, <code class=\"codespan\">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.</p>\n","default":null},"color":{"type":["Color","Function"],"description":"<p>Color of axis label is set to be <a href=\"#radiusAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class=\"lang-js\">(val: string) =&gt; Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class=\"lang-js\">textStyle: {\n    color: function (value, index) {\n        return value &gt;= 0 ? &#39;green&#39; : &#39;red&#39;;\n    }\n}\n</code></pre>\n"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n\n","default":0}}}}}}},"splitLine":{"type":["Object"],"description":"<p>Split line of axis in <a href=\"#grid\">grid</a> area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the splitLine from showing.\n<code class=\"codespan\">value</code> type axes are shown by default, while <code class=\"codespan\">category</code> type axes are hidden.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>Interval of Axis splitLine, which is available in category axis.  is set to be the same as <a href=\"#radiusAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Array","string"],"description":"<p>The color of the splitLine, which could be set separately.</p>\n<p>SplitLine color could also be set in color array, which the split lines would take as their colors in turns.</p>\n<p>Example:</p>\n<pre><code>splitLine: {\n    lineStyle: {\n        // Dark and light colors will be used in turns\n        color: [&#39;#aaa&#39;, &#39;#ddd&#39;]\n    }\n}\n</code></pre>","default":"['#ccc']"},"width":{"type":["number"],"description":"<p>splitLine line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>splitLine line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"minorSplitLine":{"type":["Object"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.6.0</code></p>\n</blockquote>\n<p>Minor split lines of axis in the <a href=\"#grid\">grid</a> area。It will align to the <a href=\"#radiusAxis.minorTick\">minorTick</a></p>\n","properties":{"show":{"type":["boolean"],"description":"<p>If show minor split lines.</p>\n","default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>minorSplitLineLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#eee'"},"width":{"type":["number"],"description":"<p>minorSplitLine line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>minorSplitLine line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"splitArea":{"type":["Object"],"description":"<p>Split area of axis in <a href=\"#grid\">grid</a> area, not shown by default.</p>\n","properties":{"interval":{"type":["number","Function"],"description":"<p>Interval of Axis splitArea, which is available in category axis.  is set to be the same as <a href=\"#radiusAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to show the splitArea.</p>\n","default":false},"areaStyle":{"type":["Object"],"description":"<p>Split area style.</p>\n","properties":{"color":{"type":["Array"],"description":"<p>Color of split area.\nSplitArea color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.</p>\n","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Category data, available in <a href=\"#radiusAxis.type\">type</a>: &#39;category&#39; axis.</p>\n<p>If <a href=\"#radiusAxis.type\">type</a> is not specified, but <code class=\"codespan\">axis.data</code> is specified, the <a href=\"#radiusAxis.type\">type</a> is auto set as <code class=\"codespan\">&#39;category&#39;</code>.</p>\n<p>If <a href=\"#radiusAxis.type\">type</a> is specified as <code class=\"codespan\">&#39;category&#39;</code>, but <code class=\"codespan\">axis.data</code> is not specified, <code class=\"codespan\">axis.data</code> will be auto collected from <a href=\"#series.data\">series.data</a>. It brings convenience, but we should notice that <code class=\"codespan\">axis.data</code> provides then value range of the <code class=\"codespan\">&#39;category&#39;</code> axis. If  it is auto collected from <a href=\"#series.data\">series.data</a>, Only the values appearing in <a href=\"#series.data\">series.data</a> can be collected. For example, if <a href=\"#series.data\">series.data</a> is empty, nothing will be collected.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Name list of all categories\ndata: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n// Each item could also be a specific configuration item.\n// In this case, `value` is used as the category name.\ndata: [{\n    value: &#39;Monday&#39;,\n    // Highlight Monday\n    textStyle: {\n        fontSize: 20,\n        color: &#39;red&#39;\n    }\n}, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n</code></pre>\n","items":{"type":"Object","properties":{"value":{"type":["string"],"description":"<p>Name of a category.</p>\n"},"textStyle":{"type":["Object"],"description":"<p>Text style of the category.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}},"axisPointer":{"type":["Object"],"description":"<p>axisPointer settings on the axis.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>axisPointer will not be displayed by default. But if <a href=\"#tooltip.trigger\">tooltip.trigger</a> is set as <code class=\"codespan\">&#39;axis&#39;</code> or <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as  <code class=\"codespan\">&#39;cross&#39;</code>, axisPointer will be displayed automatically. Each coordinate system will automatically chose the axes whose will display its axisPointer. <a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> can be used to change the choice.</p>\n","default":false},"type":{"type":["string"],"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;line&#39;</code> line indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;shadow&#39;</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;none&#39;</code> no indicator displayed.</p>\n</li>\n</ul>\n","default":"'line'"},"snap":{"type":["boolean"],"description":"<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n"},"z":{"type":["number"],"description":"<p>z value, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n"},"label":{"type":["Object"],"description":"<p>label of axisPointer</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label. Label will not show by default. But if <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as  <code class=\"codespan\">&#39;cross&#39;</code>, label will be displayed automatically.</p>\n","default":false},"precision":{"type":["number","string"],"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code class=\"codespan\">&#39;2&#39;</code>, which indicates that two decimal fractions are reserved.</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"<p>The formatter of label.</p>\n<p>If set as <code class=\"codespan\">string</code>, for example it can be: <code class=\"codespan\">formatter: &#39;some text {value} some text</code>, where <code class=\"codespan\">{value}</code> will be replaced by axis value automatically.</p>\n<p>If set as <code class=\"codespan\">function</code>:</p>\n<p><strong>Parameters:</strong></p>\n<p><code class=\"codespan\">{Object}</code> params: Including fields as follows:</p>\n<p><code class=\"codespan\">{Object}</code> params.value: current value of this axis. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;category&#39;</code>, it is one of the value in <code class=\"codespan\">axis.data</code>. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;time&#39;</code>, it is a timestamp.</p>\n<p><code class=\"codespan\">{Array.&lt;Object&gt;}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<p><code class=\"codespan\">{string}</code> params.axisDimension: The dimension name of the axis. For example, in catesian it will be <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, and in polar it will be <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code>.</p>\n<p><code class=\"codespan\">{number}</code> params.axisIndex: The index of the axis, for example, <code class=\"codespan\">0</code>,<code class=\"codespan\">1</code>, <code class=\"codespan\">2</code>, ...</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n    axisDim: &#39;x&#39;, // &#39;x&#39;, &#39;y&#39;, &#39;angle&#39;, &#39;radius&#39;, &#39;single&#39;\n    axisId: &#39;xxx&#39;,\n    axisName: &#39;xxx&#39;,\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: &#39;text of value&#39;\n}\n</code></pre>\n<p><strong>Return:</strong></p>\n<p>The string to be displayed.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n    // If axis.type is &#39;time&#39;\n    return &#39;some text&#39; + echarts.format.formatTime(params.value);\n}\n</code></pre>\n","default":null},"margin":{"type":["boolean"],"description":"<p>Distance between label and axis.</p>\n","default":3},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"padding":{"type":["string","Array"],"description":"<p>axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"<p>Border color of label.</p>\n","default":null},"borderWidth":{"type":["string"],"description":"<p>Border width of label.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"lineStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;line&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"shadowStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;shadow&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"triggerTooltip":{"type":["boolean"],"description":"<p>Whether to trigger tooltip.</p>\n","default":true},"value":{"type":["number"],"description":"<p>current value. When using <a href=\"xAxisPointer.handle\" target=\"_blank\">axisPointer.handle</a>, <code class=\"codespan\">value</code> can be set to define the initail position of axisPointer.</p>\n","default":null},"status":{"type":["boolean"],"description":"<p>Current status, can be <code class=\"codespan\">&#39;show&#39;</code> 和 <code class=\"codespan\">&#39;hide&#39;</code>.</p>\n"},"handle":{"type":["Object"],"description":"<p>A button used to drag axisPointer. This feature is applicable in touch device. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set to <code class=\"codespan\">true</code> to use handle.</p>\n","default":false},"icon":{"type":["*"],"description":"<p>The icon of the handle.</p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/axisPointer-handle-image&amp;edit=1&amp;reset=1\" target=\"_blank\">example of using image</a></p>\n"},"size":{"type":["number","Array"],"description":"<p>The size of the handle, which can be set as a single value or an array (<code class=\"codespan\">[width, height]</code>).</p>\n","default":45},"margin":{"type":["number"],"description":"<p>Distance from handle center to axis.</p>\n","default":50},"color":{"type":["string"],"description":"<p>The color of the handle.</p>\n","default":"'#333'"},"throttle":{"type":["number"],"description":"<p>Throttle rate of trigger view update when dragging handle, in ms. Increase the value to improve performance, but decrease the experience.</p>\n","default":40},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":2},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}}}},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in Radial axis.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in Radial axis, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":0}}},"angleAxis":{"type":["Object"],"description":"<p>The angle axis in Polar Coordinate.</p>\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"polarIndex":{"type":["number"],"description":"<p>The index of angle axis in Polar Coordinate. The first axis is used by default.</p>\n","default":0},"startAngle":{"type":["number"],"description":"<p>Starting angle of axis. 90 degrees by default, standing for top position of center. 0 degree stands for right position of center.</p>\n<p>The following shows an example with startAngle of 45 deg.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/polar-start-angle&edit=1&reset=1\" width=\"400\" height=\"400\"><iframe />\n\n\n","default":90},"clockwise":{"type":["boolean"],"description":"<p>Whether the positive position of axis is clockwise. True for clockwise by default.</p>\n<p>The following shows an example with clockwise as <code class=\"codespan\">false</code>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/polar-anticlockwise&edit=1&reset=1\" width=\"400\" height=\"400\"><iframe />\n\n\n\n\n","default":true},"type":{"type":["string"],"description":"<p>Type of axis.</p>\n<p>Option:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;value&#39;</code>\n  Numerical axis, suitable for continuous data.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;category&#39;</code>\n  Category axis, suitable for discrete category data. Category data can be auto retrieved from <a href=\"#series.data\">series.data</a> or <a href=\"#dataset.source\">dataset.source</a>, or can be specified via <a href=\"#angleAxis.data\">angleAxis.data</a>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;time&#39;</code>\n  Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;log&#39;</code>\n  Log axis, suitable for log data.</p>\n</li>\n</ul>\n","default":"'category'"},"boundaryGap":{"type":["boolean","Array"],"description":"<p>The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different.</p>\n<p>The <code class=\"codespan\">boundaryGap</code> of category axis can be set to either <code class=\"codespan\">true</code> or <code class=\"codespan\">false</code>. Default value is set to be <code class=\"codespan\">true</code>, in which case <a href=\"#angleAxis.axisTick\">axisTick</a> is served only as a separation line, and labels and data appear only in the center part of two <a href=\"#angleAxis.axisTick\">axis ticks</a>, which is called <em>band</em>.</p>\n<p>For non-category axis, including time, numerical value, and log axes, <code class=\"codespan\">boundaryGap</code> is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting <a href=\"#angleAxis.min\">min</a> and <a href=\"#angleAxis.max\">max</a>.\n<strong>Example: </strong></p>\n<pre><code class=\"lang-js\">boundaryGap: [&#39;20%&#39;, &#39;20%&#39;]\n</code></pre>\n"},"min":{"type":["number","string","Function"],"description":"<p>The minimun value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">&#39;dataMin&#39;</code> so that the minimum value on this axis is set to be the minimum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class=\"codespan\">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class=\"codespan\">2</code> represents <code class=\"codespan\">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class=\"codespan\">-3</code>.</p>\n<p>If <code class=\"codespan\">min</code> is specified as a function, it should return a min value, like:</p>\n<pre><code class=\"lang-js\">min: function (value) {\n    return value.min - 20;\n}\n</code></pre>\n<p><code class=\"codespan\">value</code> is an object, containing the <code class=\"codespan\">min</code> value and <code class=\"codespan\">max</code> value of the data. This function should return the min value of axis, or return <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> to make echarts use the auto calculated min value (<code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> return is only supported since <code class=\"codespan\">v4.8.0</code>).</p>\n","default":null},"max":{"type":["number","string","Function"],"description":"<p>The maximum value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">&#39;dataMax&#39;</code> so that the minimum value on this axis is set to be the maximum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class=\"codespan\">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class=\"codespan\">2</code> represents <code class=\"codespan\">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class=\"codespan\">-3</code>.</p>\n<p>If <code class=\"codespan\">max</code> is specified as a function, it should return a max value, like:</p>\n<pre><code class=\"lang-js\">max: function (value) {\n    return value.max - 20;\n}\n</code></pre>\n<p><code class=\"codespan\">value</code> is an object, containing the <code class=\"codespan\">min</code> value and <code class=\"codespan\">max</code> value of the data. This function should return the max value of axis, or return <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> to make echarts use the auto calculated max value (<code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> return is only supported since <code class=\"codespan\">v4.8.0</code>).</p>\n","default":null},"scale":{"type":["boolean"],"description":"<p>It is available only in numerical axis, i.e., <a href=\"#angleAxis.type\">type</a>: &#39;value&#39;.</p>\n<p>It specifies whether not to contain zero position of axis compulsively. When it is set to be <code class=\"codespan\">true</code>, the axis may not contain zero position, which is useful in the scatter chart for both value axes.</p>\n<p>This configuration item is unavailable when the <a href=\"#angleAxis.min\">min</a> and <a href=\"#angleAxis.max\">max</a> are set.</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.</p>\n<p>This is unavailable for category axis.</p>\n","default":5},"minInterval":{"type":["number"],"description":"<p>Minimum gap between split lines.</p>\n<p>For example, it can be set to be <code class=\"codespan\">1</code> to make sure axis label is show as integer.</p>\n<pre><code class=\"lang-js\">{\n    minInterval: 1\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#angleAxis.type\">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n","default":0},"maxInterval":{"type":["number"],"description":"<p>Maximum gap between split lines.</p>\n<p>For example, in time axis (<a href=\"#angleAxis.type\">type</a> is &#39;time&#39;), it can be set to be <code class=\"codespan\">3600 * 24 * 1000</code> to make sure that the gap between axis labels is less than or equal to one day.</p>\n<pre><code class=\"lang-js\">{\n    maxInterval: 3600 * 1000 * 24\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#angleAxis.type\">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n"},"interval":{"type":["number"],"description":"<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href=\"#angleAxis.splitNumber\">splitNumber</a> is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with <a href=\"#angleAxis.min\">min</a> and <a href=\"#angleAxis.max\">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situations.</p>\n<p>This is unavailable for category axis. Timestamp should be passed for <a href=\"#angleAxis.type\">type</a>: &#39;time&#39; axis. Logged value should be passed for <a href=\"#angleAxis.type\">type</a>: &#39;log&#39; axis.</p>\n"},"logBase":{"type":["number"],"description":"<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#angleAxis.type\">type</a>: &#39;log&#39;.</p>\n","default":10},"silent":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code>, to prevent interaction with the axis.</p>\n","default":false},"triggerEvent":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to enable triggering events.</p>\n<p>Parameters of the event include:</p>\n<pre><code class=\"lang-js\">{\n    // Component type: xAxis, yAxis, radiusAxis, angleAxis\n    // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n    componentType: string,\n    // Value on axis before being formatted.\n    // Click on value label to trigger event.\n    value: &#39;&#39;,\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: &#39;&#39;\n}\n</code></pre>\n","default":false},"axisLine":{"type":["Object"],"description":"<p>Settings related to axis line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n","default":true},"symbol":{"type":["string","Array"],"description":"<p>Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It&#39;s set to be <code class=\"codespan\">&#39;none&#39;</code> by default, meaning no arrow for either end. If it is set to be <code class=\"codespan\">&#39;arrow&#39;</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code class=\"codespan\">[&#39;none&#39;, &#39;arrow&#39;]</code>.</p>\n","default":"'none'"},"symbolSize":{"type":["Array"],"description":"<p>Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.</p>\n","default":"[10, 15]"},"symbolOffset":{"type":["Array","number"],"description":"<p>Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>line styleLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#333'"},"width":{"type":["number"],"description":"<p>line style line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>line style line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"axisTick":{"type":["Object"],"description":"<p>Settings related to axis tick.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis tick from showing.</p>\n","default":true},"alignWithLabel":{"type":["boolean"],"description":"<p>Align axis tick with label, which is available only when <code class=\"codespan\">boundaryGap</code> is set to be <code class=\"codespan\">true</code> in category axis. See the following picture:</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/axis-align-with-label.png\"></p>\n","default":false},"interval":{"type":["number","Function"],"description":"<p>Interval of axisTick, which is available in category axis.  is set to be the same as <a href=\"#angleAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> so the axis labels face the <code class=\"codespan\">inside</code> direction.</p>\n","default":false},"length":{"type":["number"],"description":"<p>The length of the axis tick.</p>\n","default":5},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Color of axis label is set to be <a href=\"#angleAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"width":{"type":["number"],"description":"<p>axisTick line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>axisTick line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"minorTick":{"type":["Object"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.6.0</code></p>\n</blockquote>\n<p>Settings related minor ticks.</p>\n<p>Note: <code class=\"codespan\">minorTick</code> is not available in the <code class=\"codespan\">category</code> type axis.</p>\n<p>Examples:</p>\n<p>1) Using minor ticks in function plotting.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-function&edit=1&reset=1\" width=\"600\" height=\"350\"><iframe />\n\n\n<p>2) Using minor ticks in log axis.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-log&edit=1&reset=1\" width=\"600\" height=\"350\"><iframe />\n\n\n","properties":{"show":{"type":["boolean"],"description":"<p>If show minor ticks.</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>Number of interval splited by minor ticks.</p>\n","default":5},"length":{"type":["number"],"description":"<p>Length of minor ticks lines。</p>\n","default":3},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Style configuration of minor ticks lines <a href=\"#angleAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。</p>\n"},"width":{"type":["number"],"description":"<p>minorTick line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>minorTick line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"axisLabel":{"type":["Object"],"description":"<p>Settings related to axis label.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis label from appearing.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>Interval of Axis label, which is available in category axis. </p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> so the axis labels face the <code class=\"codespan\">inside</code> direction.</p>\n","default":false},"margin":{"type":["number"],"description":"<p>The margin between the axis label and the axis line.</p>\n","default":8},"formatter":{"type":["string","Function"],"description":"<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Use string template; template variable is the default label of axis {value}\nformatter: &#39;{value} kg&#39;\n\n// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (idx === 0) {\n        texts.unshift(date.getYear());\n    }\n    return texts.join(&#39;/&#39;);\n}\n</code></pre>\n","default":null},"showMinLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the min tick. Optional values: <code class=\"codespan\">true</code>, <code class=\"codespan\">false</code>, <code class=\"codespan\">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.</p>\n","default":null},"showMaxLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the max tick. Optional values: <code class=\"codespan\">true</code>, <code class=\"codespan\">false</code>, <code class=\"codespan\">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.</p>\n","default":null},"color":{"type":["Color","Function"],"description":"<p>Color of axis label is set to be <a href=\"#angleAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class=\"lang-js\">(val: string) =&gt; Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class=\"lang-js\">textStyle: {\n    color: function (value, index) {\n        return value &gt;= 0 ? &#39;green&#39; : &#39;red&#39;;\n    }\n}\n</code></pre>\n"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n\n","default":0}}}}}}},"splitLine":{"type":["Object"],"description":"<p>Split line of axis in <a href=\"#grid\">grid</a> area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the splitLine from showing.\n<code class=\"codespan\">value</code> type axes are shown by default, while <code class=\"codespan\">category</code> type axes are hidden.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>Interval of Axis splitLine, which is available in category axis.  is set to be the same as <a href=\"#angleAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Array","string"],"description":"<p>The color of the splitLine, which could be set separately.</p>\n<p>SplitLine color could also be set in color array, which the split lines would take as their colors in turns.</p>\n<p>Example:</p>\n<pre><code>splitLine: {\n    lineStyle: {\n        // Dark and light colors will be used in turns\n        color: [&#39;#aaa&#39;, &#39;#ddd&#39;]\n    }\n}\n</code></pre>","default":"['#ccc']"},"width":{"type":["number"],"description":"<p>splitLine line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>splitLine line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"minorSplitLine":{"type":["Object"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.6.0</code></p>\n</blockquote>\n<p>Minor split lines of axis in the <a href=\"#grid\">grid</a> area。It will align to the <a href=\"#angleAxis.minorTick\">minorTick</a></p>\n","properties":{"show":{"type":["boolean"],"description":"<p>If show minor split lines.</p>\n","default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>minorSplitLineLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#eee'"},"width":{"type":["number"],"description":"<p>minorSplitLine line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>minorSplitLine line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"splitArea":{"type":["Object"],"description":"<p>Split area of axis in <a href=\"#grid\">grid</a> area, not shown by default.</p>\n","properties":{"interval":{"type":["number","Function"],"description":"<p>Interval of Axis splitArea, which is available in category axis.  is set to be the same as <a href=\"#angleAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to show the splitArea.</p>\n","default":false},"areaStyle":{"type":["Object"],"description":"<p>Split area style.</p>\n","properties":{"color":{"type":["Array"],"description":"<p>Color of split area.\nSplitArea color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.</p>\n","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Category data, available in <a href=\"#angleAxis.type\">type</a>: &#39;category&#39; axis.</p>\n<p>If <a href=\"#angleAxis.type\">type</a> is not specified, but <code class=\"codespan\">axis.data</code> is specified, the <a href=\"#angleAxis.type\">type</a> is auto set as <code class=\"codespan\">&#39;category&#39;</code>.</p>\n<p>If <a href=\"#angleAxis.type\">type</a> is specified as <code class=\"codespan\">&#39;category&#39;</code>, but <code class=\"codespan\">axis.data</code> is not specified, <code class=\"codespan\">axis.data</code> will be auto collected from <a href=\"#series.data\">series.data</a>. It brings convenience, but we should notice that <code class=\"codespan\">axis.data</code> provides then value range of the <code class=\"codespan\">&#39;category&#39;</code> axis. If  it is auto collected from <a href=\"#series.data\">series.data</a>, Only the values appearing in <a href=\"#series.data\">series.data</a> can be collected. For example, if <a href=\"#series.data\">series.data</a> is empty, nothing will be collected.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Name list of all categories\ndata: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n// Each item could also be a specific configuration item.\n// In this case, `value` is used as the category name.\ndata: [{\n    value: &#39;Monday&#39;,\n    // Highlight Monday\n    textStyle: {\n        fontSize: 20,\n        color: &#39;red&#39;\n    }\n}, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n</code></pre>\n","items":{"type":"Object","properties":{"value":{"type":["string"],"description":"<p>Name of a category.</p>\n"},"textStyle":{"type":["Object"],"description":"<p>Text style of the category.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}},"axisPointer":{"type":["Object"],"description":"<p>axisPointer settings on the axis.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>axisPointer will not be displayed by default. But if <a href=\"#tooltip.trigger\">tooltip.trigger</a> is set as <code class=\"codespan\">&#39;axis&#39;</code> or <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as  <code class=\"codespan\">&#39;cross&#39;</code>, axisPointer will be displayed automatically. Each coordinate system will automatically chose the axes whose will display its axisPointer. <a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> can be used to change the choice.</p>\n","default":false},"type":{"type":["string"],"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;line&#39;</code> line indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;shadow&#39;</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;none&#39;</code> no indicator displayed.</p>\n</li>\n</ul>\n","default":"'line'"},"snap":{"type":["boolean"],"description":"<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n"},"z":{"type":["number"],"description":"<p>z value, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n"},"label":{"type":["Object"],"description":"<p>label of axisPointer</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label. Label will not show by default. But if <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as  <code class=\"codespan\">&#39;cross&#39;</code>, label will be displayed automatically.</p>\n","default":false},"precision":{"type":["number","string"],"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code class=\"codespan\">&#39;2&#39;</code>, which indicates that two decimal fractions are reserved.</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"<p>The formatter of label.</p>\n<p>If set as <code class=\"codespan\">string</code>, for example it can be: <code class=\"codespan\">formatter: &#39;some text {value} some text</code>, where <code class=\"codespan\">{value}</code> will be replaced by axis value automatically.</p>\n<p>If set as <code class=\"codespan\">function</code>:</p>\n<p><strong>Parameters:</strong></p>\n<p><code class=\"codespan\">{Object}</code> params: Including fields as follows:</p>\n<p><code class=\"codespan\">{Object}</code> params.value: current value of this axis. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;category&#39;</code>, it is one of the value in <code class=\"codespan\">axis.data</code>. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;time&#39;</code>, it is a timestamp.</p>\n<p><code class=\"codespan\">{Array.&lt;Object&gt;}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<p><code class=\"codespan\">{string}</code> params.axisDimension: The dimension name of the axis. For example, in catesian it will be <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, and in polar it will be <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code>.</p>\n<p><code class=\"codespan\">{number}</code> params.axisIndex: The index of the axis, for example, <code class=\"codespan\">0</code>,<code class=\"codespan\">1</code>, <code class=\"codespan\">2</code>, ...</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n    axisDim: &#39;x&#39;, // &#39;x&#39;, &#39;y&#39;, &#39;angle&#39;, &#39;radius&#39;, &#39;single&#39;\n    axisId: &#39;xxx&#39;,\n    axisName: &#39;xxx&#39;,\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: &#39;text of value&#39;\n}\n</code></pre>\n<p><strong>Return:</strong></p>\n<p>The string to be displayed.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n    // If axis.type is &#39;time&#39;\n    return &#39;some text&#39; + echarts.format.formatTime(params.value);\n}\n</code></pre>\n","default":null},"margin":{"type":["boolean"],"description":"<p>Distance between label and axis.</p>\n","default":3},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"padding":{"type":["string","Array"],"description":"<p>axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"<p>Border color of label.</p>\n","default":null},"borderWidth":{"type":["string"],"description":"<p>Border width of label.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"lineStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;line&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"shadowStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;shadow&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"triggerTooltip":{"type":["boolean"],"description":"<p>Whether to trigger tooltip.</p>\n","default":true},"value":{"type":["number"],"description":"<p>current value. When using <a href=\"xAxisPointer.handle\" target=\"_blank\">axisPointer.handle</a>, <code class=\"codespan\">value</code> can be set to define the initail position of axisPointer.</p>\n","default":null},"status":{"type":["boolean"],"description":"<p>Current status, can be <code class=\"codespan\">&#39;show&#39;</code> 和 <code class=\"codespan\">&#39;hide&#39;</code>.</p>\n"},"handle":{"type":["Object"],"description":"<p>A button used to drag axisPointer. This feature is applicable in touch device. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set to <code class=\"codespan\">true</code> to use handle.</p>\n","default":false},"icon":{"type":["*"],"description":"<p>The icon of the handle.</p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/axisPointer-handle-image&amp;edit=1&amp;reset=1\" target=\"_blank\">example of using image</a></p>\n"},"size":{"type":["number","Array"],"description":"<p>The size of the handle, which can be set as a single value or an array (<code class=\"codespan\">[width, height]</code>).</p>\n","default":45},"margin":{"type":["number"],"description":"<p>Distance from handle center to axis.</p>\n","default":50},"color":{"type":["string"],"description":"<p>The color of the handle.</p>\n","default":"'#333'"},"throttle":{"type":["number"],"description":"<p>Throttle rate of trigger view update when dragging handle, in ms. Increase the value to improve performance, but decrease the experience.</p>\n","default":40},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":2},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}}}},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in Angle Axis.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in Angle Axis, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":0}}},"radar":{"type":["Object"],"description":"<p>Coordinate for <a href=\"#series-radar\">radar charts</a>. This component is equal to the polar component in ECharts 2. Because the polar component in the echarts 3 is reconstructed to be the standard polar coordinate component, this component is renamed to be radar to avoid confusion.</p>\n<p>Radar chart coordinate is different from polar coordinate, in that every axis indicator of the radar chart coordinate is an individual dimension. The style of indicator coordinate axis could be configured through the following configuration items, including <a href=\"#radar.name\">name</a>, <a href=\"#radar.axisLine\">axisLine</a>, <a href=\"#radar.axisTick\">axisTick</a>, <a href=\"#radar.axisLabel\">axisLabel</a>, <a href=\"#radar.splitLine\">splitLine</a>, <a href=\"#radar.splitArea\">splitArea</a>.</p>\n<p>Here is a custom example of radar component.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/radar&edit=1&reset=1\" width=\"400\" height=\"400\"><iframe />\n\n\n\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"center":{"type":["Array"],"description":"<p>Center position of , the first of which is the horizontal position, and the second is the vertical position.</p>\n<p>Percentage is supported. When set in percentage, the item is relative to the container width, and the second item to the height.</p>\n<p><strong>Example: </strong></p>\n<pre><code>// Set to absolute pixel values\ncenter: [400, 300]\n// Set to relative percent\ncenter: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>","default":"['50%', '50%']"},"radius":{"type":["number","string","Array"],"description":"<p>Radius of . Value can be:</p>\n<ul>\n<li><code class=\"codespan\">number</code>: Specify outside radius directly.</li>\n<li><p><code class=\"codespan\">string</code>: For example, <code class=\"codespan\">&#39;20%&#39;</code>, means that the outside radius is 20% of the viewport size (the little one between width and height of the chart container).</p>\n</li>\n<li><p><code class=\"codespan\">Array.&lt;number|string&gt;</code>: The first item specifies the inside radius, and the second item specifies the outside radius. Each item follows the definitions above.</p>\n</li>\n</ul>\n","default":"75%"},"startAngle":{"type":["number"],"description":"<p>The start angle of coordinate, which is the angle of the first indicator axis.</p>\n","default":90},"name":{"type":["Object"],"description":"<p>Name of radar chart.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to display the indicator&#39;s name.</p>\n","default":true},"formatter":{"type":["string","Function"],"description":"<p>The formatter of indicator&#39;s name, in which the string and callback function are supported. See the following example:</p>\n<pre><code class=\"lang-js\">// using string template, the template variable should be the indicator&#39;s name {value}\nformatter: &#39;【{value}】&#39;\n// using callback function, the first parameter is the indicator&#39;s name, and the second parameter id the indicator&#39;s cinfiguration item\nformatter: function (value, indicator) {\n    return &#39;【&#39; + value + &#39;】&#39;;\n}\n</code></pre>\n"}}},"textStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#333'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"nameGap":{"type":["number"],"description":"<p>Distance between the indicator&#39;s name and axis.</p>\n","default":15},"splitNumber":{"type":["number"],"description":"<p>Segments of indicator axis.</p>\n","default":5},"shape":{"type":["string"],"description":"<p>Radar render type, in which <code class=\"codespan\">&#39;polygon&#39;</code> and <code class=\"codespan\">&#39;circle&#39;</code> are supported.</p>\n","default":"'polygon'"},"scale":{"type":["boolean"],"description":"<p>Whether to prevent calculating the scaling relative to zero. If it is set to be <code class=\"codespan\">true</code>, the coordinate tick would not compulsorily contain zero value, which is usually useful in scatter diagram of double numerical values axis.</p>\n","default":false},"silent":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code>, to prevent interaction with the axis.</p>\n","default":false},"triggerEvent":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to enable triggering events.</p>\n<p>Parameters of the event include:</p>\n<pre><code class=\"lang-js\">{\n    // Component type: xAxis, yAxis, radiusAxis, angleAxis\n    // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n    componentType: string,\n    // Value on axis before being formatted.\n    // Click on value label to trigger event.\n    value: &#39;&#39;,\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: &#39;&#39;\n}\n</code></pre>\n","default":false},"axisLine":{"type":["Object"],"description":"<p>Settings related to axis line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n","default":true},"symbol":{"type":["string","Array"],"description":"<p>Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It&#39;s set to be <code class=\"codespan\">&#39;none&#39;</code> by default, meaning no arrow for either end. If it is set to be <code class=\"codespan\">&#39;arrow&#39;</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code class=\"codespan\">[&#39;none&#39;, &#39;arrow&#39;]</code>.</p>\n","default":"'none'"},"symbolSize":{"type":["Array"],"description":"<p>Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.</p>\n","default":"[10, 15]"},"symbolOffset":{"type":["Array","number"],"description":"<p>Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>line styleLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#333'"},"width":{"type":["number"],"description":"<p>line style line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>line style line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"axisTick":{"type":["Object"],"description":"<p>Settings related to axis tick.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis tick from showing.</p>\n","default":true},"length":{"type":["number"],"description":"<p>The length of the axis tick.</p>\n","default":5},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Color of axis label is set to be <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"width":{"type":["number"],"description":"<p>axisTick line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>axisTick line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"axisLabel":{"type":["Object"],"description":"<p>Settings related to axis label.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis label from appearing.</p>\n","default":true},"rotate":{"type":["number"],"description":"<p>Rotation degree of axis label, which is especially useful when there is no enough space for category axis.</p>\n<p>Rotation degree is from -90 to 90.</p>\n","default":0},"margin":{"type":["number"],"description":"<p>The margin between the axis label and the axis line.</p>\n","default":8},"formatter":{"type":["string","Function"],"description":"<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Use string template; template variable is the default label of axis {value}\nformatter: &#39;{value} kg&#39;\n\n// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (idx === 0) {\n        texts.unshift(date.getYear());\n    }\n    return texts.join(&#39;/&#39;);\n}\n</code></pre>\n","default":null},"showMinLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the min tick. Optional values: <code class=\"codespan\">true</code>, <code class=\"codespan\">false</code>, <code class=\"codespan\">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.</p>\n","default":null},"showMaxLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the max tick. Optional values: <code class=\"codespan\">true</code>, <code class=\"codespan\">false</code>, <code class=\"codespan\">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.</p>\n","default":null},"color":{"type":["Color","Function"],"description":"<p>Color of axis label is set to be <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class=\"lang-js\">(val: string) =&gt; Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class=\"lang-js\">textStyle: {\n    color: function (value, index) {\n        return value &gt;= 0 ? &#39;green&#39; : &#39;red&#39;;\n    }\n}\n</code></pre>\n"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n\n","default":0}}}}}}},"splitLine":{"type":["Object"],"description":"<p>Split line of axis in <a href=\"#grid\">grid</a> area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the splitLine from showing.\n<code class=\"codespan\">value</code> type axes are shown by default, while <code class=\"codespan\">category</code> type axes are hidden.</p>\n","default":true},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Array","string"],"description":"<p>The color of the splitLine, which could be set separately.</p>\n<p>SplitLine color could also be set in color array, which the split lines would take as their colors in turns.</p>\n<p>Example:</p>\n<pre><code>splitLine: {\n    lineStyle: {\n        // Dark and light colors will be used in turns\n        color: [&#39;#aaa&#39;, &#39;#ddd&#39;]\n    }\n}\n</code></pre>","default":"['#ccc']"},"width":{"type":["number"],"description":"<p>splitLine line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>splitLine line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"splitArea":{"type":["Object"],"description":"<p>Split area of axis in <a href=\"#grid\">grid</a> area, not shown by default.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to show the splitArea.</p>\n","default":true},"areaStyle":{"type":["Object"],"description":"<p>Split area style.</p>\n","properties":{"color":{"type":["Array"],"description":"<p>Color of split area.\nSplitArea color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.</p>\n","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"indicator":{"type":["Array"],"description":"<p>Indicator of radar chart, which is used to assign multiple variables(dimensions) in radar chart. Here is the example.</p>\n<pre><code class=\"lang-js\">indicator: [\n   { name: &#39;Sales (sales) &#39;, max: 6500},\n   { name: &#39;Administration (Administration) &#39;, max: 16000, color: &#39;red&#39;}, // Set the indicator as &#39;red&#39;\n   { name: &#39;Information Technology (Information Technology) &#39;, max: 30000},\n   { name: &#39;Customer Support (Customer Support) &#39;, max: 38000},\n   { name: &#39;Development (Development) &#39;, max: 52000},\n   { name: &#39;Marketing (Marketing) &#39;, max: 25000}\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Indicator&#39;s name.</p>\n"},"max":{"type":["number"],"description":"<p>The maximum value of indicator. It is an optional configuration, but we recommend to set it manually.</p>\n"},"min":{"type":["number"],"description":"<p>The minimum value of indicator. It it an optional configuration, with default value of 0.</p>\n"}}}},"color":{"type":["string"],"description":"<p>Specfy a color the the indicator.</p>\n"}}},"dataZoom":{"type":"Array","items":{"anyOf":[{"type":["Object"],"description":"<p><strong>dataZoomInside</strong></p>\n<p>Data zoom component of <em>inside</em> type.</p>\n<p>Refer to <a href=\"#dataZoom\">dataZoom</a> for more information.</p>\n<p>The <em>inside</em> means it&#39;s inside the coordinates.</p>\n<ul>\n<li>Translation: data area can be translated when moving in coordinates.</li>\n<li>Scaling:<ul>\n<li>PC: when mouse rolls (similar with touch pad) in coordinates.</li>\n<li>Mobile: when touches and moved with two fingers in coordinates on touch screens.</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<br></p>\n","properties":{"type":{"type":["string"],"description":"","default":"'inside'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"disabled":{"type":["boolean"],"description":"<p>Whether disable inside zoom.</p>\n","default":false},"xAxisIndex":{"type":["number","Array"],"description":"<p>Specify which <a href=\"#xAxis\">xAxis</a> is/are controlled by the <code class=\"codespan\">dataZoom-inside</code> when <a href=\"#grid\">catesian coordinate system</a> is used.</p>\n<p>By default the first <code class=\"codespan\">xAxis</code> that parallel to <code class=\"codespan\">dataZoom</code> are controlled when <a href=\"#dataZoom-inside.orient\">dataZoom-inside.orient</a> is set as <code class=\"codespan\">&#39;horizontal&#39;</code>. But it is recommended to specify it explicitly but not use default value.</p>\n<p>If it is set as a single <code class=\"codespan\">number</code>, one axis is controlled, while if it is set as an <code class=\"codespan\">Array</code> , multiple axes are controlled.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">option: {\n    xAxis: [\n        {...}, // The first xAxis\n        {...}, // The second xAxis\n        {...}, // The third xAxis\n        {...}  // The fourth xAxis\n    ],\n    dataZoom: [\n        { // The first dataZoom component\n            xAxisIndex: [0, 2] // Indicates that this dataZoom component\n                                     // controls the first and the third xAxis\n        },\n        { // The second dataZoom component\n            xAxisIndex: 3      // indicates that this dataZoom component\n                                     // controls the fourth xAxis\n        }\n    ]\n}\n</code></pre>\n","default":null},"yAxisIndex":{"type":["number","Array"],"description":"<p>Specify which <a href=\"#yAxis\">yAxis</a> is/are controlled by the <code class=\"codespan\">dataZoom-inside</code> when <a href=\"#grid\">catesian coordinate system</a> is used.</p>\n<p>By default the first <code class=\"codespan\">yAxis</code> that parallel to <code class=\"codespan\">dataZoom</code> are controlled when <a href=\"#dataZoom-inside.orient\">dataZoom-inside.orient</a> is set as <code class=\"codespan\">&#39;vertical&#39;</code>. But it is recommended to specify it explicitly but not use default value.</p>\n<p>If it is set as a single <code class=\"codespan\">number</code>, one axis is controlled, while if it is set as an <code class=\"codespan\">Array</code> , multiple axes are controlled.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">option: {\n    yAxis: [\n        {...}, // The first yAxis\n        {...}, // The second yAxis\n        {...}, // The third yAxis\n        {...}  // The fourth yAxis\n    ],\n    dataZoom: [\n        { // The first dataZoom component\n            yAxisIndex: [0, 2] // Indicates that this dataZoom component\n                                     // controls the first and the third yAxis\n        },\n        { // The second dataZoom component\n            yAxisIndex: 3      // indicates that this dataZoom component\n                                     // controls the fourth yAxis\n        }\n    ]\n}\n</code></pre>\n","default":null},"radiusAxisIndex":{"type":["number","Array"],"description":"<p>Specify which <a href=\"#radiusAxis\">radiusAxis</a> is/are controlled by the <code class=\"codespan\">dataZoom-inside</code> when <a href=\"#polar\">polar coordinate system</a> is used.</p>\n<p>If it is set as a single <code class=\"codespan\">number</code>, one axis is controlled, while if it is set as an <code class=\"codespan\">Array</code> , multiple axes are controlled.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">option: {\n    radiusAxis: [\n        {...}, // The first radiusAxis\n        {...}, // The second radiusAxis\n        {...}, // The third radiusAxis\n        {...}  // The fourth radiusAxis\n    ],\n    dataZoom: [\n        { // The first dataZoom component\n            radiusAxisIndex: [0, 2] // Indicates that this dataZoom component\n                                     // controls the first and the third radiusAxis\n        },\n        { // The second dataZoom component\n            radiusAxisIndex: 3      // indicates that this dataZoom component\n                                     // controls the fourth radiusAxis\n        }\n    ]\n}\n</code></pre>\n","default":null},"angleAxisIndex":{"type":["number","Array"],"description":"<p>Specify which <a href=\"#angleAxis\">angleAxis</a> is/are controlled by the <code class=\"codespan\">dataZoom-inside</code> when <a href=\"#polar\">polar coordinate system</a> is used.</p>\n<p>If it is set as a single <code class=\"codespan\">number</code>, one axis is controlled, while if it is set as an <code class=\"codespan\">Array</code> , multiple axes are controlled.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">option: {\n    angleAxis: [\n        {...}, // The first angleAxis\n        {...}, // The second angleAxis\n        {...}, // The third angleAxis\n        {...}  // The fourth angleAxis\n    ],\n    dataZoom: [\n        { // The first dataZoom component\n            angleAxisIndex: [0, 2] // Indicates that this dataZoom component\n                                     // controls the first and the third angleAxis\n        },\n        { // The second dataZoom component\n            angleAxisIndex: 3      // indicates that this dataZoom component\n                                     // controls the fourth angleAxis\n        }\n    ]\n}\n</code></pre>\n","default":null},"filterMode":{"type":["string"],"description":"<p>Generally <code class=\"codespan\">dataZoom</code> component zoom or roam coordinate system through data filtering and set the windows of axes internally.</p>\n<p>Its behaviours vary according to filtering mode settings (<a href=\"#dataZoom.filterMode\">dataZoom.filterMode</a>).</p>\n<p>Possible values:</p>\n<ul>\n<li><p>&#39;filter&#39;: data that outside the window will be <strong>filtered</strong>, which may lead to some changes of windows of other axes. For each data item, it will be filtered if one of the relevant dimensions is out of the window.</p>\n</li>\n<li><p>&#39;weakFilter&#39;: data that outside the window will be <strong>filtered</strong>, which may lead to some changes of windows of other axes. For each data item, it will be filtered only if all of the relevant dimensions are out of the same side of the window.</p>\n</li>\n<li><p>&#39;empty&#39;: data that outside the window will be <strong>set to NaN</strong>, which will not lead to changes of windows of other axes.</p>\n</li>\n<li><p>&#39;none&#39;: Do not filter data.</p>\n</li>\n</ul>\n<p>How to set <code class=\"codespan\">filterMode</code> is up to users, depending on the requirments and scenarios. Expirically:</p>\n<ul>\n<li><p>If only <code class=\"codespan\">xAxis</code> or only <code class=\"codespan\">yAxis</code> is controlled by <code class=\"codespan\">dataZoom</code>, <code class=\"codespan\">filterMode: &#39;filter&#39;</code> is typically used, which enable the other axis auto adapte its window to the extent of the filtered data.</p>\n</li>\n<li><p>If both <code class=\"codespan\">xAxis</code> and <code class=\"codespan\">yAxis</code> are operated by <code class=\"codespan\">dataZoom</code>:</p>\n<ul>\n<li><p>If <code class=\"codespan\">xAxis</code> and <code class=\"codespan\">yAxis</code> should not effect mutually (e.g. a scatter chart with both axes on the type of <code class=\"codespan\">&#39;value&#39;</code>), they should be set to be <code class=\"codespan\">filterMode: &#39;empty&#39;</code>.</p>\n</li>\n<li><p>If <code class=\"codespan\">xAxis</code> is the main axis and <code class=\"codespan\">yAxis</code> is the auxiliary axis (or vise versa) (e.g., in a bar chart, when dragging <code class=\"codespan\">dataZoomX</code> to change the window of xAxis, we need the yAxis to adapt to the clipped data, but when dragging <code class=\"codespan\">dataZoomY</code> to change the window of yAxis, we need the xAxis not to be changed), in this case, <code class=\"codespan\">xAxis</code> should be set to be <code class=\"codespan\">fiterMode: &#39;filter&#39;</code>, while <code class=\"codespan\">yAxis</code> should be set to be <code class=\"codespan\">fiterMode: &#39;empty&#39;</code>.</p>\n</li>\n</ul>\n</li>\n</ul>\n<p>It can be demonstrated by the sample:</p>\n<pre><code class=\"lang-javascript\">option = {\n    dataZoom: [\n        {\n            id: &#39;dataZoomX&#39;,\n            type: &#39;slider&#39;,\n            xAxisIndex: [0],\n            filterMode: &#39;filter&#39;\n        },\n        {\n            id: &#39;dataZoomY&#39;,\n            type: &#39;slider&#39;,\n            yAxisIndex: [0],\n            filterMode: &#39;empty&#39;\n        }\n    ],\n    xAxis: {type: &#39;value&#39;},\n    yAxis: {type: &#39;value&#39;},\n    series{\n        type: &#39;bar&#39;,\n        data: [\n            // The first column corresponds to xAxis,\n            // and the second coloum corresponds to yAxis.\n            [12, 24, 36],\n            [90, 80, 70],\n            [3, 9, 27],\n            [1, 11, 111]\n        ]\n    }\n}\n</code></pre>\n<p>In the sample above, <code class=\"codespan\">dataZoomX</code> is set as <code class=\"codespan\">filterMode: &#39;filter&#39;</code>. When use drags <code class=\"codespan\">dataZoomX</code> (do not touch <code class=\"codespan\">dataZoomY</code>) and the valueWindow of <code class=\"codespan\">xAxis</code> is changed to <code class=\"codespan\">[2, 50]</code> consequently, <code class=\"codespan\">dataZoomX</code> travel the first column of series.data and filter items that out of the window. The series.data turns out to be:</p>\n<pre><code class=\"lang-javascript\">[\n    [12, 24, 36],\n    // [90, 80, 70] This item is filtered, as 90 is out of the window.\n    [3, 9, 27]\n    // [1, 11, 111] This item is filtered, as 1 is out of the window.\n]\n</code></pre>\n<p>Before filtering, the second column, which corresponds to yAxis, has values <code class=\"codespan\">24</code>, <code class=\"codespan\">80</code>, <code class=\"codespan\">9</code>, <code class=\"codespan\">11</code>. After filtering, only <code class=\"codespan\">24</code> and <code class=\"codespan\">9</code> are left. Then the extent of <code class=\"codespan\">yAxis</code> is adjusted to adapt the two values (if <code class=\"codespan\">yAxis.min</code> and <code class=\"codespan\">yAxis.man</code> are not set).</p>\n<p>So <code class=\"codespan\">filterMode: &#39;filter&#39;</code> can be used to enable the other axis to auto adapt the filtered data.</p>\n<p>Then let&#39;s review the sample from the beginning, <code class=\"codespan\">dataZoomY</code> is set as <code class=\"codespan\">filterMode: &#39;empty&#39;</code>. So if user drags <code class=\"codespan\">dataZoomY</code> (do not touch <code class=\"codespan\">dataZoomX</code>) and its window is changed to <code class=\"codespan\">[10, 60]</code> consequently, <code class=\"codespan\">dataZoomY</code> travels the second column of series.data and set NaN to all of the values that outside the window (NaN cause the graphical elements, i.e., bar elements, do not show, but still hold the place). The series.data turns out to be:</p>\n<pre><code class=\"lang-javascript\">[\n    [12, 24, 36],\n    [90, NaN, 70], // Set to NaN\n    [3, NaN, 27],  // Set to NaN\n    [1, 11, 111]\n]\n</code></pre>\n<p>In this case, the first column (i.e., <code class=\"codespan\">12</code>, <code class=\"codespan\">90</code>, <code class=\"codespan\">3</code>, <code class=\"codespan\">1</code>, which corresponds to <code class=\"codespan\">xAxis</code>), will not be changed at all. So dragging <code class=\"codespan\">yAxis</code> will not change extent of <code class=\"codespan\">xAxis</code>, which is good for requirements like outlier filtering.</p>\n<p>See this example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/bar-dataZoom-filterMode&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n\n\n\n\n","default":"'filter'"},"start":{"type":["number"],"description":"<p>The start percentage of the window out of the data extent, in the range of 0 ~ 100.</p>\n<p><a href=\"#dataZoom-inside.start\">dataZoom-inside.start</a> and <a href=\"#dataZoom-inside.end\">dataZoom-inside.end</a> define the window of the data in <strong>percent</strong> form.</p>\n<p>More info about the relationship between <code class=\"codespan\">dataZoom-inside.start</code> and axis extent can be checked in <a href=\"#dataZoom-inside.rangeMode\">dataZoom-inside.rangeMode</a>.</p>\n","default":0},"end":{"type":["number"],"description":"<p>The end percentage of the window out of the data extent, in the range of 0 ~ 100.</p>\n<p><a href=\"#dataZoom-inside.start\">dataZoom-inside.start</a> and <a href=\"#dataZoom-inside.end\">dataZoom-inside.end</a> define the window of the data in <strong>percent</strong> form.</p>\n<p>More info about the relationship between <code class=\"codespan\">dataZoom-inside.end</code> and axis extent can be checked in <a href=\"#dataZoom-inside.rangeMode\">dataZoom-inside.rangeMode</a>.</p>\n","default":100},"startValue":{"type":["number","string","Date"],"description":"<p>The start absolute value of the window, not works when <a href=\"#dataZoom-inside.start\">dataZoom-inside.start</a> is set.</p>\n<p><a href=\"#dataZoom-inside.startValue\">dataZoom-inside.startValue</a> and <a href=\"#dataZoom-inside.endValue\">dataZoom-inside.endValue</a> define the window of the data window in <strong>absolute value</strong> form.</p>\n<p>Notice, if an axis is set to be <code class=\"codespan\">category</code>, <code class=\"codespan\">startValue</code> could be set as <code class=\"codespan\">index</code> of the array of <code class=\"codespan\">axis.data</code> or as the array value itself. In the latter case, it will internally and automatically translate to the index of array.</p>\n<p>More info about the relationship between <code class=\"codespan\">dataZoom-inside.startValue</code> and axis extent can be checked in <a href=\"#dataZoom-inside.rangeMode\">dataZoom-inside.rangeMode</a>.</p>\n","default":null},"endValue":{"type":["number","string","Date"],"description":"<p>The end absolute value of the window, doesn&#39;t work when <a href=\"#dataZoom-inside.end\">dataZoom-inside.end</a> is set.</p>\n<p><a href=\"#dataZoom-inside.startValue\">dataZoom-inside.startValue</a> and <a href=\"#dataZoom-inside.endValue\">dataZoom-inside.endValue</a> define the window of the data window in <strong>absolute value</strong> form.</p>\n<p>Notice, if an axis is set to be <code class=\"codespan\">category</code>, <code class=\"codespan\">startValue</code> could be set as <code class=\"codespan\">index</code> of the array of <code class=\"codespan\">axis.data</code> or as the array value itself. In the latter case, it will internally and automatically translate to the index of array.</p>\n<p>More info about the relationship between <code class=\"codespan\">dataZoom-inside.endValue</code> and axis extent can be checked in <a href=\"#dataZoom-inside.rangeMode\">dataZoom-inside.rangeMode</a>.</p>\n","default":null},"minSpan":{"type":["number"],"description":"<p>Used to restrict minimal window size, in percent, which value is in the range of [0, 100].</p>\n<p>If <a href=\"#dataZoom-inside.minValueSpan\">dataZoom-inside.minValueSpan</a> is set, <code class=\"codespan\">minSpan</code> does not work any more.</p>\n","default":null},"maxSpan":{"type":["number"],"description":"<p>Used to restrict maximal window size, in percent, which value is in the range of [0, 100].</p>\n<p>If <a href=\"#dataZoom-inside.maxValueSpan\">dataZoom-inside.maxValueSpan</a> is set, <code class=\"codespan\">maxSpan</code> does not work any more.</p>\n","default":null},"minValueSpan":{"type":["number","string","Date"],"description":"<p>Used to restrict minimal window size.</p>\n<p>For example:\nIn time axis it can be set as <code class=\"codespan\">3600 * 24 * 1000 * 5</code> to represent &quot;5 day&quot;.\nIn category axis it can be set as <code class=\"codespan\">5</code> to represent 5 categories.</p>\n","default":null},"maxValueSpan":{"type":["number","string","Date"],"description":"<p>Used to restrict maximal window size.</p>\n<p>For example:\nIn time axis it can be set as <code class=\"codespan\">3600 * 24 * 1000 * 5</code> to represent &quot;5 day&quot;.\nIn category axis it can be set as <code class=\"codespan\">5</code> to represent 5 categories.</p>\n","default":null},"orient":{"type":["string"],"description":"<p>Specify whether the layout of <code class=\"codespan\">dataZoom</code> component is horizontal or vertical. What&#39;s more, it indicates whether the horizontal axis or vertical axis is controlled by default in catesian coordinate system.</p>\n<p>Valid values:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;horizontal&#39;</code>: horizontal.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;vertical&#39;</code>: vertical.</p>\n</li>\n</ul>\n","default":null},"zoomLock":{"type":["boolean"],"description":"<p>Specify whether to lock the size of window (selected area).</p>\n<p>When set as <code class=\"codespan\">true</code>, the size of window is locked, that is, only the translation (by mouse drag or touch drag) is avialable but zoom is not.</p>\n","default":false},"throttle":{"type":["number"],"description":"<p>Specify the frame rate of views refreshing, with unit millisecond (ms).</p>\n<p>If <a href=\"#animation\">animation</a> set as <code class=\"codespan\">true</code> and <a href=\"#animationDurationUpdate\">animationDurationUpdate</a> set as bigger than <code class=\"codespan\">0</code>, you can keep <code class=\"codespan\">throttle</code> as the default value <code class=\"codespan\">100</code> (or set it as a value bigger than <code class=\"codespan\">0</code>), otherwise it might be not smooth when dragging.</p>\n<p>If <a href=\"#animation\">animation</a> set as <code class=\"codespan\">false</code> or <a href=\"#animationDurationUpdate\">animationDurationUpdate</a> set as <code class=\"codespan\">0</code>, and data size is not very large, and it seems to be not smooth when dragging, you can set <code class=\"codespan\">throttle</code> as <code class=\"codespan\">0</code> to improve that.</p>\n","default":100},"rangeMode":{"type":["Array"],"description":"<p>The format is <code class=\"codespan\">[rangeModeForStart, rangeModeForEnd]</code>.</p>\n<p>For example <code class=\"codespan\">rangeMode: [&#39;value&#39;, &#39;percent&#39;]</code> means that use absolute value in <code class=\"codespan\">start</code> and percent value in <code class=\"codespan\">end</code>.</p>\n<p>Optional value for each item: <code class=\"codespan\">&#39;value&#39;</code>, <code class=\"codespan\">&#39;percent&#39;</code>.</p>\n<ul>\n<li><code class=\"codespan\">&#39;value&#39;</code> mode: the axis extent will always only be determined by <code class=\"codespan\">dataZoom.startValue</code> and <code class=\"codespan\">dataZoom.endValue</code>, despite how data like and how <code class=\"codespan\">axis.min</code> and <code class=\"codespan\">axis.max</code> are.</li>\n<li><code class=\"codespan\">&#39;percent&#39;</code> mode: <code class=\"codespan\">100</code> represents 100% of the <code class=\"codespan\">[dMin, dMax]</code>, where <code class=\"codespan\">dMin</code> is <code class=\"codespan\">axis.min</code> if <code class=\"codespan\">axis.min</code> specified, otherwise <code class=\"codespan\">data.extent[0]</code>, and <code class=\"codespan\">dMax</code> is <code class=\"codespan\">axis.max</code> if <code class=\"codespan\">axis.max</code> specified, otherwise <code class=\"codespan\">data.extent[1]</code>. Axis extent will only be determined by the result of the percent of <code class=\"codespan\">[dMin, dMax]</code>.</li>\n</ul>\n<p><code class=\"codespan\">rangeMode</code> are auto determined by whether <code class=\"codespan\">option.start</code>/<code class=\"codespan\">option.end</code> are specified (represents <code class=\"codespan\">&#39;percent&#39;</code> mode) or <code class=\"codespan\">option.startValue</code>/<code class=\"codespan\">option.endValue</code> specified (represents <code class=\"codespan\">&#39;value&#39;</code> mode). And when user behavior trigger the changing of the view, the <code class=\"codespan\">rangeMode</code> would be modified automatically. For example, if triggered by <code class=\"codespan\">toolbox.dataZoom</code>, it will be modefied to <code class=\"codespan\">&#39;value&#39;</code>, and if triggered by <code class=\"codespan\">dataZoom-inside</code> or <code class=\"codespan\">dataZoom-slider</code>, it will be modified to <code class=\"codespan\">&#39;percent&#39;</code>.</p>\n<p>If we specify <code class=\"codespan\">rangeMode</code> manually in <code class=\"codespan\">option</code>, it only works when both <code class=\"codespan\">start</code> and <code class=\"codespan\">startValue</code> specified or both <code class=\"codespan\">end</code> and <code class=\"codespan\">endValue</code> specified. So usually we do not need to specify <code class=\"codespan\">dataZoom.rangeMode</code> manually.</p>\n<p>Take a scenario as an example. When we are using dynamic data (update data periodically via <code class=\"codespan\">setOption</code>), if in <code class=\"codespan\">&#39;value</code>&#39; mode, the window will be kept in a fixed value range despite how data are appended, while if in <code class=\"codespan\">&#39;percent&#39;</code> mode, whe window range will be changed alone with the appended data (suppose <code class=\"codespan\">axis.min</code> and <code class=\"codespan\">axis.max</code> are not specified).</p>\n"},"zoomOnMouseWheel":{"type":["boolean","string"],"description":"<p>How to trigger zoom. Optional values:</p>\n<ul>\n<li><code class=\"codespan\">true</code>:Mouse wheel triggers zoom.</li>\n<li><code class=\"codespan\">false</code>:Mouse wheel can not triggers zoom.</li>\n<li><code class=\"codespan\">&#39;shift&#39;</code>:Holding <code class=\"codespan\">shift</code> and mouse wheel triggers zoom.</li>\n<li><code class=\"codespan\">&#39;ctrl&#39;</code>:Holding <code class=\"codespan\">ctrl</code> and mouse wheel triggers zoom.</li>\n<li><code class=\"codespan\">&#39;alt&#39;</code>:Holding <code class=\"codespan\">alt</code> and mouse wheel triggers zoom.</li>\n</ul>\n","default":true},"moveOnMouseMove":{"type":["boolean","string"],"description":"<p>How to trigger data window move. Optional values:</p>\n<ul>\n<li><code class=\"codespan\">true</code>:Mouse move triggers data window move.</li>\n<li><code class=\"codespan\">false</code>:Mouse move can not triggers data window move.</li>\n<li><code class=\"codespan\">&#39;shift&#39;</code>:Holding <code class=\"codespan\">shift</code> and mouse move triggers data window move.</li>\n<li><code class=\"codespan\">&#39;ctrl&#39;</code>:Holding <code class=\"codespan\">ctrl</code> and mouse move triggers data window move.</li>\n<li><code class=\"codespan\">&#39;alt&#39;</code>:Holding <code class=\"codespan\">alt</code> and mouse move triggers data window move.</li>\n</ul>\n","default":true},"moveOnMouseWheel":{"type":["boolean","string"],"description":"<p>How to trigger data window move. Optional values:</p>\n<ul>\n<li><code class=\"codespan\">true</code>:Mouse wheel triggers data window move.</li>\n<li><code class=\"codespan\">false</code>:Mouse wheel can not triggers data window move.</li>\n<li><code class=\"codespan\">&#39;shift&#39;</code>:Holding <code class=\"codespan\">shift</code> and mouse wheel triggers data window move.</li>\n<li><code class=\"codespan\">&#39;ctrl&#39;</code>:Holding <code class=\"codespan\">ctrl</code> and mouse wheel triggers data window move.</li>\n<li><code class=\"codespan\">&#39;alt&#39;</code>:Holding <code class=\"codespan\">alt</code> and mouse wheel triggers data window move.</li>\n</ul>\n","default":false},"preventDefaultMouseMove":{"type":["boolean"],"description":"<p>Whether to prevent default behavior of mouse move event.</p>\n","default":true}}},{"type":["Object"],"description":"<p><strong>dataZoomSlider</strong></p>\n<p>(Please refer to the <a href=\"#dataZoom\">introduction of dataZoom</a>.)</p>\n<p><br>\n<br></p>\n","properties":{"type":{"type":["string"],"description":"","default":"'slider'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"show":{"type":["boolean"],"description":"<p>Whether to show the  component. If is set to be <code class=\"codespan\">false</code>, it will not show, but its data filtering function still works.</p>\n","default":true},"backgroundColor":{"type":["Color"],"description":"<p>The background color of the component.</p>\n","default":"'rgba(47,69,84,0)'"},"dataBackground":{"type":["Object"],"description":"<p>The style of data shadow.</p>\n","properties":{"lineStyle":{"type":["Object"],"description":"<p>Line style of shadow</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#2f4554"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0.5},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":0.3}}},"areaStyle":{"type":["Object"],"description":"<p>Area style of shadow</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"rgba(47,69,84,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":0.3}}}}},"fillerColor":{"type":["Color"],"description":"<p>The color to fill selected area.</p>\n","default":"'rgba(47,69,84,0.25)'"},"borderColor":{"type":["Color"],"description":"<p>The color of border.</p>\n","default":"'#ddd'"},"handleIcon":{"type":["string"],"description":"<p>Icon shape of handle, which supports path string. Its default value is:</p>\n<pre><code class=\"lang-js\">&#39;M8.2,13.6V3.9H6.3v9.7H3.1v14.9h3.3v9.7h1.8v-9.7h3.3V13.6H8.2z M9.7,24.4H4.8v-1.4h4.9V24.4z M9.7,19.1H4.8v-1.4h4.9V19.1z&#39;\n</code></pre>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>Refer to <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=area-simple\" target=\"_blank\">area-simple example</a> for customized icon.</p>\n"},"handleSize":{"type":["number","string"],"description":"<p>The size of control handle. It can be in pixels, or in percentage relative to the width of dataZoom component. By default, it&#39;s the same as the width of dataZoom component.</p>\n","default":"'100%'"},"handleStyle":{"type":["Object"],"description":"<p>Style of handle. Please refer to <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=area-simple\" target=\"_blank\">area-simple example</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#a7b7cc"},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"labelPrecision":{"type":["number","string"],"description":"<p>Precision of label if in number form. By default, it is decided based on the number of data.</p>\n","default":"'auto'"},"labelFormatter":{"type":["string","Function"],"description":"<p>The formatter tool for the label.</p>\n<ul>\n<li><p>It is a template if in <code class=\"codespan\">string</code>. For instance, <code class=\"codespan\">aaaa{value}bbbb</code>, where <code class=\"codespan\">{value}</code> will be replaced by the value of actual data value.</p>\n</li>\n<li><p>It is a callback function if in <code class=\"codespan\">Function</code>. For example:</p>\n</li>\n</ul>\n<pre><code class=\"lang-javascript\">/**\n * @param {*} value If axis.type is &#39;category&#39;, `value` is the index of axis.data.\n *                  else `value` is current value.\n * @param {strign} valueStr Inner formatted string.\n * @return {string} Returns the label formatted.\n */\nlabelFormatter: function (value, valueStr) {\n    return &#39;aaa&#39; + value + &#39;bbb&#39;;\n}\n</code></pre>\n","default":null},"showDetail":{"type":["boolean"],"description":"<p>Whether to show detail, that is, show the detailed data information when dragging.</p>\n","default":true},"showDataShadow":{"type":["string"],"description":"<p>Whether to show data shadow in <code class=\"codespan\">dataZoom-silder</code> component, to indicate the data tendency in brief.</p>\n","default":"'auto'"},"realtime":{"type":["boolean"],"description":"<p>Whether to update view while dragging. If it is set as <code class=\"codespan\">false</code>, the view will be updated only at the end of dragging.</p>\n","default":true},"textStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>dataZoom  text color.</p>\n","default":"#333"},"fontStyle":{"type":["string"],"description":"<p>dataZoom  font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p>dataZoom  font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>dataZoom  font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>dataZoom  font size.</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"xAxisIndex":{"type":["number","Array"],"description":"<p>Specify which <a href=\"#xAxis\">xAxis</a> is/are controlled by the <code class=\"codespan\">dataZoom-slider</code> when <a href=\"#grid\">catesian coordinate system</a> is used.</p>\n<p>By default the first <code class=\"codespan\">xAxis</code> that parallel to <code class=\"codespan\">dataZoom</code> are controlled when <a href=\"#dataZoom-slider.orient\">dataZoom-slider.orient</a> is set as <code class=\"codespan\">&#39;horizontal&#39;</code>. But it is recommended to specify it explicitly but not use default value.</p>\n<p>If it is set as a single <code class=\"codespan\">number</code>, one axis is controlled, while if it is set as an <code class=\"codespan\">Array</code> , multiple axes are controlled.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">option: {\n    xAxis: [\n        {...}, // The first xAxis\n        {...}, // The second xAxis\n        {...}, // The third xAxis\n        {...}  // The fourth xAxis\n    ],\n    dataZoom: [\n        { // The first dataZoom component\n            xAxisIndex: [0, 2] // Indicates that this dataZoom component\n                                     // controls the first and the third xAxis\n        },\n        { // The second dataZoom component\n            xAxisIndex: 3      // indicates that this dataZoom component\n                                     // controls the fourth xAxis\n        }\n    ]\n}\n</code></pre>\n","default":null},"yAxisIndex":{"type":["number","Array"],"description":"<p>Specify which <a href=\"#yAxis\">yAxis</a> is/are controlled by the <code class=\"codespan\">dataZoom-slider</code> when <a href=\"#grid\">catesian coordinate system</a> is used.</p>\n<p>By default the first <code class=\"codespan\">yAxis</code> that parallel to <code class=\"codespan\">dataZoom</code> are controlled when <a href=\"#dataZoom-slider.orient\">dataZoom-slider.orient</a> is set as <code class=\"codespan\">&#39;vertical&#39;</code>. But it is recommended to specify it explicitly but not use default value.</p>\n<p>If it is set as a single <code class=\"codespan\">number</code>, one axis is controlled, while if it is set as an <code class=\"codespan\">Array</code> , multiple axes are controlled.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">option: {\n    yAxis: [\n        {...}, // The first yAxis\n        {...}, // The second yAxis\n        {...}, // The third yAxis\n        {...}  // The fourth yAxis\n    ],\n    dataZoom: [\n        { // The first dataZoom component\n            yAxisIndex: [0, 2] // Indicates that this dataZoom component\n                                     // controls the first and the third yAxis\n        },\n        { // The second dataZoom component\n            yAxisIndex: 3      // indicates that this dataZoom component\n                                     // controls the fourth yAxis\n        }\n    ]\n}\n</code></pre>\n","default":null},"radiusAxisIndex":{"type":["number","Array"],"description":"<p>Specify which <a href=\"#radiusAxis\">radiusAxis</a> is/are controlled by the <code class=\"codespan\">dataZoom-slider</code> when <a href=\"#polar\">polar coordinate system</a> is used.</p>\n<p>If it is set as a single <code class=\"codespan\">number</code>, one axis is controlled, while if it is set as an <code class=\"codespan\">Array</code> , multiple axes are controlled.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">option: {\n    radiusAxis: [\n        {...}, // The first radiusAxis\n        {...}, // The second radiusAxis\n        {...}, // The third radiusAxis\n        {...}  // The fourth radiusAxis\n    ],\n    dataZoom: [\n        { // The first dataZoom component\n            radiusAxisIndex: [0, 2] // Indicates that this dataZoom component\n                                     // controls the first and the third radiusAxis\n        },\n        { // The second dataZoom component\n            radiusAxisIndex: 3      // indicates that this dataZoom component\n                                     // controls the fourth radiusAxis\n        }\n    ]\n}\n</code></pre>\n","default":null},"angleAxisIndex":{"type":["number","Array"],"description":"<p>Specify which <a href=\"#angleAxis\">angleAxis</a> is/are controlled by the <code class=\"codespan\">dataZoom-slider</code> when <a href=\"#polar\">polar coordinate system</a> is used.</p>\n<p>If it is set as a single <code class=\"codespan\">number</code>, one axis is controlled, while if it is set as an <code class=\"codespan\">Array</code> , multiple axes are controlled.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">option: {\n    angleAxis: [\n        {...}, // The first angleAxis\n        {...}, // The second angleAxis\n        {...}, // The third angleAxis\n        {...}  // The fourth angleAxis\n    ],\n    dataZoom: [\n        { // The first dataZoom component\n            angleAxisIndex: [0, 2] // Indicates that this dataZoom component\n                                     // controls the first and the third angleAxis\n        },\n        { // The second dataZoom component\n            angleAxisIndex: 3      // indicates that this dataZoom component\n                                     // controls the fourth angleAxis\n        }\n    ]\n}\n</code></pre>\n","default":null},"filterMode":{"type":["string"],"description":"<p>Generally <code class=\"codespan\">dataZoom</code> component zoom or roam coordinate system through data filtering and set the windows of axes internally.</p>\n<p>Its behaviours vary according to filtering mode settings (<a href=\"#dataZoom.filterMode\">dataZoom.filterMode</a>).</p>\n<p>Possible values:</p>\n<ul>\n<li><p>&#39;filter&#39;: data that outside the window will be <strong>filtered</strong>, which may lead to some changes of windows of other axes. For each data item, it will be filtered if one of the relevant dimensions is out of the window.</p>\n</li>\n<li><p>&#39;weakFilter&#39;: data that outside the window will be <strong>filtered</strong>, which may lead to some changes of windows of other axes. For each data item, it will be filtered only if all of the relevant dimensions are out of the same side of the window.</p>\n</li>\n<li><p>&#39;empty&#39;: data that outside the window will be <strong>set to NaN</strong>, which will not lead to changes of windows of other axes.</p>\n</li>\n<li><p>&#39;none&#39;: Do not filter data.</p>\n</li>\n</ul>\n<p>How to set <code class=\"codespan\">filterMode</code> is up to users, depending on the requirments and scenarios. Expirically:</p>\n<ul>\n<li><p>If only <code class=\"codespan\">xAxis</code> or only <code class=\"codespan\">yAxis</code> is controlled by <code class=\"codespan\">dataZoom</code>, <code class=\"codespan\">filterMode: &#39;filter&#39;</code> is typically used, which enable the other axis auto adapte its window to the extent of the filtered data.</p>\n</li>\n<li><p>If both <code class=\"codespan\">xAxis</code> and <code class=\"codespan\">yAxis</code> are operated by <code class=\"codespan\">dataZoom</code>:</p>\n<ul>\n<li><p>If <code class=\"codespan\">xAxis</code> and <code class=\"codespan\">yAxis</code> should not effect mutually (e.g. a scatter chart with both axes on the type of <code class=\"codespan\">&#39;value&#39;</code>), they should be set to be <code class=\"codespan\">filterMode: &#39;empty&#39;</code>.</p>\n</li>\n<li><p>If <code class=\"codespan\">xAxis</code> is the main axis and <code class=\"codespan\">yAxis</code> is the auxiliary axis (or vise versa) (e.g., in a bar chart, when dragging <code class=\"codespan\">dataZoomX</code> to change the window of xAxis, we need the yAxis to adapt to the clipped data, but when dragging <code class=\"codespan\">dataZoomY</code> to change the window of yAxis, we need the xAxis not to be changed), in this case, <code class=\"codespan\">xAxis</code> should be set to be <code class=\"codespan\">fiterMode: &#39;filter&#39;</code>, while <code class=\"codespan\">yAxis</code> should be set to be <code class=\"codespan\">fiterMode: &#39;empty&#39;</code>.</p>\n</li>\n</ul>\n</li>\n</ul>\n<p>It can be demonstrated by the sample:</p>\n<pre><code class=\"lang-javascript\">option = {\n    dataZoom: [\n        {\n            id: &#39;dataZoomX&#39;,\n            type: &#39;slider&#39;,\n            xAxisIndex: [0],\n            filterMode: &#39;filter&#39;\n        },\n        {\n            id: &#39;dataZoomY&#39;,\n            type: &#39;slider&#39;,\n            yAxisIndex: [0],\n            filterMode: &#39;empty&#39;\n        }\n    ],\n    xAxis: {type: &#39;value&#39;},\n    yAxis: {type: &#39;value&#39;},\n    series{\n        type: &#39;bar&#39;,\n        data: [\n            // The first column corresponds to xAxis,\n            // and the second coloum corresponds to yAxis.\n            [12, 24, 36],\n            [90, 80, 70],\n            [3, 9, 27],\n            [1, 11, 111]\n        ]\n    }\n}\n</code></pre>\n<p>In the sample above, <code class=\"codespan\">dataZoomX</code> is set as <code class=\"codespan\">filterMode: &#39;filter&#39;</code>. When use drags <code class=\"codespan\">dataZoomX</code> (do not touch <code class=\"codespan\">dataZoomY</code>) and the valueWindow of <code class=\"codespan\">xAxis</code> is changed to <code class=\"codespan\">[2, 50]</code> consequently, <code class=\"codespan\">dataZoomX</code> travel the first column of series.data and filter items that out of the window. The series.data turns out to be:</p>\n<pre><code class=\"lang-javascript\">[\n    [12, 24, 36],\n    // [90, 80, 70] This item is filtered, as 90 is out of the window.\n    [3, 9, 27]\n    // [1, 11, 111] This item is filtered, as 1 is out of the window.\n]\n</code></pre>\n<p>Before filtering, the second column, which corresponds to yAxis, has values <code class=\"codespan\">24</code>, <code class=\"codespan\">80</code>, <code class=\"codespan\">9</code>, <code class=\"codespan\">11</code>. After filtering, only <code class=\"codespan\">24</code> and <code class=\"codespan\">9</code> are left. Then the extent of <code class=\"codespan\">yAxis</code> is adjusted to adapt the two values (if <code class=\"codespan\">yAxis.min</code> and <code class=\"codespan\">yAxis.man</code> are not set).</p>\n<p>So <code class=\"codespan\">filterMode: &#39;filter&#39;</code> can be used to enable the other axis to auto adapt the filtered data.</p>\n<p>Then let&#39;s review the sample from the beginning, <code class=\"codespan\">dataZoomY</code> is set as <code class=\"codespan\">filterMode: &#39;empty&#39;</code>. So if user drags <code class=\"codespan\">dataZoomY</code> (do not touch <code class=\"codespan\">dataZoomX</code>) and its window is changed to <code class=\"codespan\">[10, 60]</code> consequently, <code class=\"codespan\">dataZoomY</code> travels the second column of series.data and set NaN to all of the values that outside the window (NaN cause the graphical elements, i.e., bar elements, do not show, but still hold the place). The series.data turns out to be:</p>\n<pre><code class=\"lang-javascript\">[\n    [12, 24, 36],\n    [90, NaN, 70], // Set to NaN\n    [3, NaN, 27],  // Set to NaN\n    [1, 11, 111]\n]\n</code></pre>\n<p>In this case, the first column (i.e., <code class=\"codespan\">12</code>, <code class=\"codespan\">90</code>, <code class=\"codespan\">3</code>, <code class=\"codespan\">1</code>, which corresponds to <code class=\"codespan\">xAxis</code>), will not be changed at all. So dragging <code class=\"codespan\">yAxis</code> will not change extent of <code class=\"codespan\">xAxis</code>, which is good for requirements like outlier filtering.</p>\n<p>See this example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/bar-dataZoom-filterMode&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n\n\n\n\n","default":"'filter'"},"start":{"type":["number"],"description":"<p>The start percentage of the window out of the data extent, in the range of 0 ~ 100.</p>\n<p><a href=\"#dataZoom-slider.start\">dataZoom-slider.start</a> and <a href=\"#dataZoom-slider.end\">dataZoom-slider.end</a> define the window of the data in <strong>percent</strong> form.</p>\n<p>More info about the relationship between <code class=\"codespan\">dataZoom-slider.start</code> and axis extent can be checked in <a href=\"#dataZoom-slider.rangeMode\">dataZoom-slider.rangeMode</a>.</p>\n","default":0},"end":{"type":["number"],"description":"<p>The end percentage of the window out of the data extent, in the range of 0 ~ 100.</p>\n<p><a href=\"#dataZoom-slider.start\">dataZoom-slider.start</a> and <a href=\"#dataZoom-slider.end\">dataZoom-slider.end</a> define the window of the data in <strong>percent</strong> form.</p>\n<p>More info about the relationship between <code class=\"codespan\">dataZoom-slider.end</code> and axis extent can be checked in <a href=\"#dataZoom-slider.rangeMode\">dataZoom-slider.rangeMode</a>.</p>\n","default":100},"startValue":{"type":["number","string","Date"],"description":"<p>The start absolute value of the window, not works when <a href=\"#dataZoom-slider.start\">dataZoom-slider.start</a> is set.</p>\n<p><a href=\"#dataZoom-slider.startValue\">dataZoom-slider.startValue</a> and <a href=\"#dataZoom-slider.endValue\">dataZoom-slider.endValue</a> define the window of the data window in <strong>absolute value</strong> form.</p>\n<p>Notice, if an axis is set to be <code class=\"codespan\">category</code>, <code class=\"codespan\">startValue</code> could be set as <code class=\"codespan\">index</code> of the array of <code class=\"codespan\">axis.data</code> or as the array value itself. In the latter case, it will internally and automatically translate to the index of array.</p>\n<p>More info about the relationship between <code class=\"codespan\">dataZoom-slider.startValue</code> and axis extent can be checked in <a href=\"#dataZoom-slider.rangeMode\">dataZoom-slider.rangeMode</a>.</p>\n","default":null},"endValue":{"type":["number","string","Date"],"description":"<p>The end absolute value of the window, doesn&#39;t work when <a href=\"#dataZoom-slider.end\">dataZoom-slider.end</a> is set.</p>\n<p><a href=\"#dataZoom-slider.startValue\">dataZoom-slider.startValue</a> and <a href=\"#dataZoom-slider.endValue\">dataZoom-slider.endValue</a> define the window of the data window in <strong>absolute value</strong> form.</p>\n<p>Notice, if an axis is set to be <code class=\"codespan\">category</code>, <code class=\"codespan\">startValue</code> could be set as <code class=\"codespan\">index</code> of the array of <code class=\"codespan\">axis.data</code> or as the array value itself. In the latter case, it will internally and automatically translate to the index of array.</p>\n<p>More info about the relationship between <code class=\"codespan\">dataZoom-slider.endValue</code> and axis extent can be checked in <a href=\"#dataZoom-slider.rangeMode\">dataZoom-slider.rangeMode</a>.</p>\n","default":null},"minSpan":{"type":["number"],"description":"<p>Used to restrict minimal window size, in percent, which value is in the range of [0, 100].</p>\n<p>If <a href=\"#dataZoom-slider.minValueSpan\">dataZoom-slider.minValueSpan</a> is set, <code class=\"codespan\">minSpan</code> does not work any more.</p>\n","default":null},"maxSpan":{"type":["number"],"description":"<p>Used to restrict maximal window size, in percent, which value is in the range of [0, 100].</p>\n<p>If <a href=\"#dataZoom-slider.maxValueSpan\">dataZoom-slider.maxValueSpan</a> is set, <code class=\"codespan\">maxSpan</code> does not work any more.</p>\n","default":null},"minValueSpan":{"type":["number","string","Date"],"description":"<p>Used to restrict minimal window size.</p>\n<p>For example:\nIn time axis it can be set as <code class=\"codespan\">3600 * 24 * 1000 * 5</code> to represent &quot;5 day&quot;.\nIn category axis it can be set as <code class=\"codespan\">5</code> to represent 5 categories.</p>\n","default":null},"maxValueSpan":{"type":["number","string","Date"],"description":"<p>Used to restrict maximal window size.</p>\n<p>For example:\nIn time axis it can be set as <code class=\"codespan\">3600 * 24 * 1000 * 5</code> to represent &quot;5 day&quot;.\nIn category axis it can be set as <code class=\"codespan\">5</code> to represent 5 categories.</p>\n","default":null},"orient":{"type":["string"],"description":"<p>Specify whether the layout of <code class=\"codespan\">dataZoom</code> component is horizontal or vertical. What&#39;s more, it indicates whether the horizontal axis or vertical axis is controlled by default in catesian coordinate system.</p>\n<p>Valid values:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;horizontal&#39;</code>: horizontal.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;vertical&#39;</code>: vertical.</p>\n</li>\n</ul>\n","default":null},"zoomLock":{"type":["boolean"],"description":"<p>Specify whether to lock the size of window (selected area).</p>\n<p>When set as <code class=\"codespan\">true</code>, the size of window is locked, that is, only the translation (by mouse drag or touch drag) is avialable but zoom is not.</p>\n","default":false},"throttle":{"type":["number"],"description":"<p>Specify the frame rate of views refreshing, with unit millisecond (ms).</p>\n<p>If <a href=\"#animation\">animation</a> set as <code class=\"codespan\">true</code> and <a href=\"#animationDurationUpdate\">animationDurationUpdate</a> set as bigger than <code class=\"codespan\">0</code>, you can keep <code class=\"codespan\">throttle</code> as the default value <code class=\"codespan\">100</code> (or set it as a value bigger than <code class=\"codespan\">0</code>), otherwise it might be not smooth when dragging.</p>\n<p>If <a href=\"#animation\">animation</a> set as <code class=\"codespan\">false</code> or <a href=\"#animationDurationUpdate\">animationDurationUpdate</a> set as <code class=\"codespan\">0</code>, and data size is not very large, and it seems to be not smooth when dragging, you can set <code class=\"codespan\">throttle</code> as <code class=\"codespan\">0</code> to improve that.</p>\n","default":100},"rangeMode":{"type":["Array"],"description":"<p>The format is <code class=\"codespan\">[rangeModeForStart, rangeModeForEnd]</code>.</p>\n<p>For example <code class=\"codespan\">rangeMode: [&#39;value&#39;, &#39;percent&#39;]</code> means that use absolute value in <code class=\"codespan\">start</code> and percent value in <code class=\"codespan\">end</code>.</p>\n<p>Optional value for each item: <code class=\"codespan\">&#39;value&#39;</code>, <code class=\"codespan\">&#39;percent&#39;</code>.</p>\n<ul>\n<li><code class=\"codespan\">&#39;value&#39;</code> mode: the axis extent will always only be determined by <code class=\"codespan\">dataZoom.startValue</code> and <code class=\"codespan\">dataZoom.endValue</code>, despite how data like and how <code class=\"codespan\">axis.min</code> and <code class=\"codespan\">axis.max</code> are.</li>\n<li><code class=\"codespan\">&#39;percent&#39;</code> mode: <code class=\"codespan\">100</code> represents 100% of the <code class=\"codespan\">[dMin, dMax]</code>, where <code class=\"codespan\">dMin</code> is <code class=\"codespan\">axis.min</code> if <code class=\"codespan\">axis.min</code> specified, otherwise <code class=\"codespan\">data.extent[0]</code>, and <code class=\"codespan\">dMax</code> is <code class=\"codespan\">axis.max</code> if <code class=\"codespan\">axis.max</code> specified, otherwise <code class=\"codespan\">data.extent[1]</code>. Axis extent will only be determined by the result of the percent of <code class=\"codespan\">[dMin, dMax]</code>.</li>\n</ul>\n<p><code class=\"codespan\">rangeMode</code> are auto determined by whether <code class=\"codespan\">option.start</code>/<code class=\"codespan\">option.end</code> are specified (represents <code class=\"codespan\">&#39;percent&#39;</code> mode) or <code class=\"codespan\">option.startValue</code>/<code class=\"codespan\">option.endValue</code> specified (represents <code class=\"codespan\">&#39;value&#39;</code> mode). And when user behavior trigger the changing of the view, the <code class=\"codespan\">rangeMode</code> would be modified automatically. For example, if triggered by <code class=\"codespan\">toolbox.dataZoom</code>, it will be modefied to <code class=\"codespan\">&#39;value&#39;</code>, and if triggered by <code class=\"codespan\">dataZoom-inside</code> or <code class=\"codespan\">dataZoom-slider</code>, it will be modified to <code class=\"codespan\">&#39;percent&#39;</code>.</p>\n<p>If we specify <code class=\"codespan\">rangeMode</code> manually in <code class=\"codespan\">option</code>, it only works when both <code class=\"codespan\">start</code> and <code class=\"codespan\">startValue</code> specified or both <code class=\"codespan\">end</code> and <code class=\"codespan\">endValue</code> specified. So usually we do not need to specify <code class=\"codespan\">dataZoom.rangeMode</code> manually.</p>\n<p>Take a scenario as an example. When we are using dynamic data (update data periodically via <code class=\"codespan\">setOption</code>), if in <code class=\"codespan\">&#39;value</code>&#39; mode, the window will be kept in a fixed value range despite how data are appended, while if in <code class=\"codespan\">&#39;percent&#39;</code> mode, whe window range will be changed alone with the appended data (suppose <code class=\"codespan\">axis.min</code> and <code class=\"codespan\">axis.max</code> are not specified).</p>\n"},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between dataZoom-slider component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"top":{"type":["string","number"],"description":"<p>Distance between dataZoom-slider component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"right":{"type":["string","number"],"description":"<p>Distance between dataZoom-slider component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"<p>Distance between dataZoom-slider component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"}}}]},"description":"<p><code class=\"codespan\">dataZoom</code> component is used for zooming a specific area, which enables user to investigate data in detail, or get an overview of the data, or get rid of outlier points.</p>\n<p>These types of <code class=\"codespan\">dataZoom</code> component are supported:</p>\n<ul>\n<li><p><a href=\"#dataZoom-inside\">dataZoomInside</a>: Data zoom functionalities is embeded inside coordinate systems, enable user to zoom or roam coordinate system by mouse dragging, mouse move or finger touch (in touch screen).</p>\n</li>\n<li><p><a href=\"#dataZoom-slider\">dataZoomSlider</a>: A special slider bar is provided, on which coordinate systems can be zoomed or roamed by mouse dragging or finger touch (in touch screen).</p>\n</li>\n<li><p><a href=\"#toolbox.feature.dataZoom\">dataZoomSelect</a>: A marquee tool is provided for zooming or roaming coordinate system. That is <a href=\"#toolbox.feature.dataZoom\">toolbox.feature.dataZoom</a>, which can only be configured in toolbox.</p>\n</li>\n</ul>\n<p>Example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-dataZoom-all&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n<p><br></p>\n<hr>\n<p><strong>✦ Relationship between dataZoom and axis ✦</strong></p>\n<p>Basically <code class=\"codespan\">dataZoom</code> component operates &quot;window&quot; on axis to zoom or roam coordinate system.</p>\n<blockquote>\n<p>Use <a href=\"#dataZoom.xAxisIndex\">dataZoom.xAxisIndex</a> or <a href=\"#dataZoom.yAxisIndex\">dataZoom.yAxisIndex</a> or <a href=\"#dataZoom.radiusAxisIndex\">dataZoom.radiusAxisIndex</a> or <a href=\"#dataZoom.angleAxisIndex\">dataZoom.angleAxisIndex</a> to specify which axes are operated by <code class=\"codespan\">dataZoom</code>.</p>\n</blockquote>\n<p>A single chart instance can contain several <code class=\"codespan\">dataZoom</code> components, each of which controls different axes. The <code class=\"codespan\">dataZoom</code> components that control the same axis will be automatically linked (i.e., all of them will be updated when one of them is updated by user action or API call).</p>\n<p><br></p>\n<hr>\n<p><strong>✦ How dataZoom componets operates axes and data ✦</strong></p>\n<p>Generally <code class=\"codespan\">dataZoom</code> component zoom or roam coordinate system through data filtering and set the windows of axes internally.</p>\n<p>Its behaviours vary according to filtering mode settings (<a href=\"#dataZoom.filterMode\">dataZoom.filterMode</a>).</p>\n<p>Possible values:</p>\n<ul>\n<li><p>&#39;filter&#39;: data that outside the window will be <strong>filtered</strong>, which may lead to some changes of windows of other axes. For each data item, it will be filtered if one of the relevant dimensions is out of the window.</p>\n</li>\n<li><p>&#39;weakFilter&#39;: data that outside the window will be <strong>filtered</strong>, which may lead to some changes of windows of other axes. For each data item, it will be filtered only if all of the relevant dimensions are out of the same side of the window.</p>\n</li>\n<li><p>&#39;empty&#39;: data that outside the window will be <strong>set to NaN</strong>, which will not lead to changes of windows of other axes.</p>\n</li>\n<li><p>&#39;none&#39;: Do not filter data.</p>\n</li>\n</ul>\n<p>How to set <code class=\"codespan\">filterMode</code> is up to users, depending on the requirments and scenarios. Expirically:</p>\n<ul>\n<li><p>If only <code class=\"codespan\">xAxis</code> or only <code class=\"codespan\">yAxis</code> is controlled by <code class=\"codespan\">dataZoom</code>, <code class=\"codespan\">filterMode: &#39;filter&#39;</code> is typically used, which enable the other axis auto adapte its window to the extent of the filtered data.</p>\n</li>\n<li><p>If both <code class=\"codespan\">xAxis</code> and <code class=\"codespan\">yAxis</code> are operated by <code class=\"codespan\">dataZoom</code>:</p>\n<ul>\n<li><p>If <code class=\"codespan\">xAxis</code> and <code class=\"codespan\">yAxis</code> should not effect mutually (e.g. a scatter chart with both axes on the type of <code class=\"codespan\">&#39;value&#39;</code>), they should be set to be <code class=\"codespan\">filterMode: &#39;empty&#39;</code>.</p>\n</li>\n<li><p>If <code class=\"codespan\">xAxis</code> is the main axis and <code class=\"codespan\">yAxis</code> is the auxiliary axis (or vise versa) (e.g., in a bar chart, when dragging <code class=\"codespan\">dataZoomX</code> to change the window of xAxis, we need the yAxis to adapt to the clipped data, but when dragging <code class=\"codespan\">dataZoomY</code> to change the window of yAxis, we need the xAxis not to be changed), in this case, <code class=\"codespan\">xAxis</code> should be set to be <code class=\"codespan\">fiterMode: &#39;filter&#39;</code>, while <code class=\"codespan\">yAxis</code> should be set to be <code class=\"codespan\">fiterMode: &#39;empty&#39;</code>.</p>\n</li>\n</ul>\n</li>\n</ul>\n<p>It can be demonstrated by the sample:</p>\n<pre><code class=\"lang-javascript\">option = {\n    dataZoom: [\n        {\n            id: &#39;dataZoomX&#39;,\n            type: &#39;slider&#39;,\n            xAxisIndex: [0],\n            filterMode: &#39;filter&#39;\n        },\n        {\n            id: &#39;dataZoomY&#39;,\n            type: &#39;slider&#39;,\n            yAxisIndex: [0],\n            filterMode: &#39;empty&#39;\n        }\n    ],\n    xAxis: {type: &#39;value&#39;},\n    yAxis: {type: &#39;value&#39;},\n    series{\n        type: &#39;bar&#39;,\n        data: [\n            // The first column corresponds to xAxis,\n            // and the second coloum corresponds to yAxis.\n            [12, 24, 36],\n            [90, 80, 70],\n            [3, 9, 27],\n            [1, 11, 111]\n        ]\n    }\n}\n</code></pre>\n<p>In the sample above, <code class=\"codespan\">dataZoomX</code> is set as <code class=\"codespan\">filterMode: &#39;filter&#39;</code>. When use drags <code class=\"codespan\">dataZoomX</code> (do not touch <code class=\"codespan\">dataZoomY</code>) and the valueWindow of <code class=\"codespan\">xAxis</code> is changed to <code class=\"codespan\">[2, 50]</code> consequently, <code class=\"codespan\">dataZoomX</code> travel the first column of series.data and filter items that out of the window. The series.data turns out to be:</p>\n<pre><code class=\"lang-javascript\">[\n    [12, 24, 36],\n    // [90, 80, 70] This item is filtered, as 90 is out of the window.\n    [3, 9, 27]\n    // [1, 11, 111] This item is filtered, as 1 is out of the window.\n]\n</code></pre>\n<p>Before filtering, the second column, which corresponds to yAxis, has values <code class=\"codespan\">24</code>, <code class=\"codespan\">80</code>, <code class=\"codespan\">9</code>, <code class=\"codespan\">11</code>. After filtering, only <code class=\"codespan\">24</code> and <code class=\"codespan\">9</code> are left. Then the extent of <code class=\"codespan\">yAxis</code> is adjusted to adapt the two values (if <code class=\"codespan\">yAxis.min</code> and <code class=\"codespan\">yAxis.man</code> are not set).</p>\n<p>So <code class=\"codespan\">filterMode: &#39;filter&#39;</code> can be used to enable the other axis to auto adapt the filtered data.</p>\n<p>Then let&#39;s review the sample from the beginning, <code class=\"codespan\">dataZoomY</code> is set as <code class=\"codespan\">filterMode: &#39;empty&#39;</code>. So if user drags <code class=\"codespan\">dataZoomY</code> (do not touch <code class=\"codespan\">dataZoomX</code>) and its window is changed to <code class=\"codespan\">[10, 60]</code> consequently, <code class=\"codespan\">dataZoomY</code> travels the second column of series.data and set NaN to all of the values that outside the window (NaN cause the graphical elements, i.e., bar elements, do not show, but still hold the place). The series.data turns out to be:</p>\n<pre><code class=\"lang-javascript\">[\n    [12, 24, 36],\n    [90, NaN, 70], // Set to NaN\n    [3, NaN, 27],  // Set to NaN\n    [1, 11, 111]\n]\n</code></pre>\n<p>In this case, the first column (i.e., <code class=\"codespan\">12</code>, <code class=\"codespan\">90</code>, <code class=\"codespan\">3</code>, <code class=\"codespan\">1</code>, which corresponds to <code class=\"codespan\">xAxis</code>), will not be changed at all. So dragging <code class=\"codespan\">yAxis</code> will not change extent of <code class=\"codespan\">xAxis</code>, which is good for requirements like outlier filtering.</p>\n<p>See this example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/bar-dataZoom-filterMode&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n\n\n\n<p>Moreover, when <code class=\"codespan\">min</code>, <code class=\"codespan\">max</code> of an axis is set (e.g., <code class=\"codespan\">yAxis: {min: 0, max: 400}</code>), this extent of the axis will not be modified by the behaviour of dataZoom of other axis any more.</p>\n<p><br></p>\n<hr>\n<p><strong>✦ How to set window ✦</strong></p>\n<p>You can set the current window in two forms:</p>\n<ul>\n<li><p>percent value: see <a href=\"#dataZoom.start\">dataZoom.start</a> and <a href=\"#dataZoom.end\">dataZoom.end</a>.</p>\n</li>\n<li><p>absolute value: see <a href=\"#dataZoom.startValue\">dataZoom.startValue</a> and <a href=\"#dataZoom.endValue\">dataZoom.endValue</a>.</p>\n</li>\n</ul>\n<p>Notice: If use percent value form, and it is in the scenario below, the result of dataZoom depends on the sequence of dataZoom definitions appearing in <code class=\"codespan\">option</code>.</p>\n<pre><code class=\"lang-javascript\">option = {\n    dataZoom: [\n        {\n            id: &#39;dataZoomX&#39;,\n            type: &#39;slider&#39;,\n            xAxisIndex: [0],\n            filterMode: &#39;filter&#39;,   // Set as &#39;filter&#39; so that the modification\n                                    // of window of xAxis willl effect the\n                                    // window of yAxis.\n            start: 30,\n            end: 70\n        },\n        {\n            id: &#39;dataZoomY&#39;,\n            type: &#39;slider&#39;,\n            yAxisIndex: [0],\n            filterMode: &#39;empty&#39;,\n            start: 20,\n            end: 80\n        }\n    ],\n    xAxis: {\n        type: &#39;value&#39;\n    },\n    yAxis: {\n        type: &#39;value&#39;\n        // Notice there is no min or max set to\n        // restrict the view extent of yAxis.\n    },\n    series{\n        type: &#39;bar&#39;,\n        data: [\n            // The first column corresponds to xAxis,\n            // and the second column corresponds to yAxis.\n            [12, 24, 36],\n            [90, 80, 70],\n            [3, 9, 27],\n            [1, 11, 111]\n        ]\n    }\n}\n</code></pre>\n<p>What is the exact meaning of <code class=\"codespan\">start: 20, end: 80</code> in <code class=\"codespan\">dataZoomY</code> in the example above?</p>\n<ul>\n<li><p>If <code class=\"codespan\">yAxis.min</code> and <code class=\"codespan\">yAxis.max</code> are set:</p>\n<p>  <code class=\"codespan\">start: 20, end: 80</code> of <code class=\"codespan\">dataZoomY</code> means: from <code class=\"codespan\">20%</code> to <code class=\"codespan\">80%</code> out of <code class=\"codespan\">[yAxis.min, yAxis.max]</code>.</p>\n<p>  If one of <code class=\"codespan\">yAxis.min</code> and <code class=\"codespan\">yAxis.max</code> is not set, the corresponding edge of the full extend also follow rule as follows.</p>\n</li>\n<li><p>If <code class=\"codespan\">yAxis.min</code> and <code class=\"codespan\">yAxis.max</code> are not set:</p>\n<ul>\n<li><p>If <code class=\"codespan\">dataZoomX</code> is set to be <code class=\"codespan\">filterMode: &#39;empty&#39;</code>:</p>\n<p>  <code class=\"codespan\">start: 20, end: 80</code> of <code class=\"codespan\">dataZoomY</code> means: from <code class=\"codespan\">20%</code> to <code class=\"codespan\">80%</code> out of <code class=\"codespan\">[dataMinY to dataMaxY]</code> of series.data (i.e., <code class=\"codespan\">[9, 80]</code> in the example above).</p>\n</li>\n<li><p>If <code class=\"codespan\">dataZoomX</code> is set to <code class=\"codespan\">filterMode: &#39;filter&#39;</code>:</p>\n<p>  Since <code class=\"codespan\">dataZoomX</code> is defined before <code class=\"codespan\">dataZoomY</code>, <code class=\"codespan\">start: 30, end: 70</code> of <code class=\"codespan\">dataZoomX</code> means: from <code class=\"codespan\">30%</code> to <code class=\"codespan\">70%</code> out of full series.data, whereas <code class=\"codespan\">start: 20, end: 80</code> of <code class=\"codespan\">dataZoomY</code> means: from <code class=\"codespan\">20%</code> to <code class=\"codespan\">80%</code> out of the series.data having been filtered by <code class=\"codespan\">dataZoomX</code>.</p>\n<p>  If you want to change the process sequence, you can just change the sequence of the definitions apearing in <code class=\"codespan\">option</code>.</p>\n</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<br></p>\n","properties":{}},"visualMap":{"type":"Array","items":{"anyOf":[{"type":["Object"],"description":"<p><strong>Continuous visualMap component (visualMapContinuous)</strong></p>\n<p> (See <a href=\"#visualMap\">the introduction to visual Map component (visualMap)</a>)</p>\n<p>You can set <a href=\"#visualMap.calculable\">visualMap.calculable</a> to show or hide the handles, which are used to change the selected range in <code class=\"codespan\">visualMapContinuous</code>.</p>\n<p><br>\n<br></p>\n","properties":{"type":{"type":["string"],"description":"<p>Used to determine that it is a continuous visualMap component.</p>\n","default":"continuous"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"min":{"type":["number"],"description":"<p>Specify the min dataValue for the visualMap component. <code class=\"codespan\">[visualMap.min, visualMax.max]</code> make up the domain of viusul mapping.</p>\n<p>Notice that <code class=\"codespan\">min</code> and <code class=\"codespan\">max</code> should be specified explicitly, and be <code class=\"codespan\">[0, 200]</code> by default, but not <code class=\"codespan\">dataMin</code> and <code class=\"codespan\">dataMax</code> in series.data.</p>\n"},"max":{"type":["number"],"description":"<p>Specify the max dataValue for the visualMap component. <code class=\"codespan\">[visualMap.min, visualMax.max]</code> make up the domain of viusul mapping.</p>\n<p>Notice that <code class=\"codespan\">min</code> and <code class=\"codespan\">max</code> should be specified explicitly, and be <code class=\"codespan\">[0, 200]</code> by default, but not <code class=\"codespan\">dataMin</code> and <code class=\"codespan\">dataMax</code> in series.data.</p>\n"},"range":{"type":["Array"],"description":"<p>Specify selected range, that is, the dataValue corresponding to the two handles. For example:</p>\n<pre><code class=\"lang-javascript\">chart.setOption({\n    visualMap: {\n        min: 0,\n        max: 100,\n        // dataValue corresponding to the two handles.\n        range: [4, 15],\n        ...\n    }\n});\n</code></pre>\n<p><strong>auto-adaption when min or max is modified by setOption</strong></p>\n<ul>\n<li>If <code class=\"codespan\">range</code> is not set (or set to null or undefined)</li>\n</ul>\n<pre><code class=\"lang-javascript\">For instance:\nchart.setOption({visualMap: {min: 10, max: 300}}); // range is not set, then range is [min, max] by default, that is, [10, 300].\n\nchart.setOption({visualMap: {min: 0, max: 400}}); // Modify min and max using setOption again.\n// Then range will be auto-modified to the new [min, max], that is, [0, 400].\n</code></pre>\n<ul>\n<li>If <code class=\"codespan\">range</code> is set explicitly, such as [10, 300]</li>\n</ul>\n<pre><code class=\"lang-javascript\">For instance:\nchart.setOption({visualMap: {min: 10, max: 300, range: [20, 80]}}); // range is set to [20, 80].\n\nchart.setOption({visualMap: {min: 0, max: 400}}); // min and max are modifies using setOption.\n// Then range keep the original value ([20, 80]) but will not do auto-adaption.\n\nchart.setOption({visualMap: {range: null}}); // Set range to null then.\n// Then auto-adaption of range turns on and range is auto modified to [min, max], that is, [0, 400].\n\n</code></pre>\n<p><code class=\"codespan\">range</code> gotten by <code class=\"codespan\">getOption</code> is always an <code class=\"codespan\">Array</code>, but not <code class=\"codespan\">null</code> or <code class=\"codespan\">undefined</code>.</p>\n"},"calculable":{"type":["boolean"],"description":"<p>Whether show handles, which can be dragged to adjust &quot;selected range&quot;.</p>\n<p>Notes: In order to be compatible with ECharts2, the rule, which seems to be a little odd, is retained: when <a href=\"#visualMap.type\">visualMap.type</a> is not set, and <a href=\"#visualMap-continuous.calculable\">visualMap.calculable</a> was set to be <code class=\"codespan\">true</code>, <a href=\"#visualMap.type\">visualMap.type</a> will be automatically set as <code class=\"codespan\">&#39;continuous&#39;</code>, regardless of some settings such as <a href=\"#visualMap-piecewise.splitNumber\">visualMap-piecewise.splitNumber</a>. Therefore, it is recommended to set <a href=\"#visualMap.type\">visualMap.type</a> explicitly, which avoids ambiguity.</p>\n","default":false},"realtime":{"type":["boolean"],"description":"<p>Whether to update view in real time when dragging a handle.</p>\n<ul>\n<li><p>If <code class=\"codespan\">ture</code>, the chart view will be updated in real time when dragging.</p>\n</li>\n<li><p>If <code class=\"codespan\">false</code>, the chart view will be updated at the end of the handle dragging.</p>\n</li>\n</ul>\n","default":true},"inverse":{"type":["boolean"],"description":"<p>Whether to inverse the layout of visualMap component.</p>\n<p>As <code class=\"codespan\">inverse</code> is <code class=\"codespan\">false</code>, the layout direction is the same as <a href=\"#grid\">cartesian coordinate</a>. That is:</p>\n<ul>\n<li>As <a href=\"#visualMap.orient\">visualMap.orient</a> is <code class=\"codespan\">&#39;vertical&#39;</code>, large data are placed at the top while small at the bottom.</li>\n<li>As <a href=\"#visualMap.orient\">visualMap.orient</a> is <code class=\"codespan\">&#39;horizontal&#39;</code>,  large data are placed on the right while small on the left.</li>\n</ul>\n<p>As <code class=\"codespan\">inverse</code> is <code class=\"codespan\">true</code>, the result is opposite.</p>\n","default":false},"precision":{"type":["number"],"description":"<p>The decimal precision of label, defaults to be 0 (no decimals).</p>\n","default":0},"itemWidth":{"type":["number"],"description":"<p>The width of the main bar of visualMap component.</p>\n","default":20},"itemHeight":{"type":["number"],"description":"<p>The height of the main bar of visualMap component.</p>\n","default":140},"align":{"type":["string"],"description":"<p>Specify the position of handles and labels, against the main bar. The possible values are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;auto&#39;</code> Decide automatically.</li>\n<li><code class=\"codespan\">&#39;left&#39;</code> The handles and labels are on the right, which is valid when <code class=\"codespan\">orient</code> is set as <code class=\"codespan\">&#39;horizontal&#39;</code>.</li>\n<li><code class=\"codespan\">&#39;right&#39;</code> The handles and labels are on the left, which is valid when <code class=\"codespan\">orient</code> is set as <code class=\"codespan\">&#39;horizontal&#39;</code>.</li>\n<li><code class=\"codespan\">&#39;top&#39;</code> the handles and labels are at the bottom, which is valid when <code class=\"codespan\">orient</code> is set as  <code class=\"codespan\">&#39;vertical&#39;</code>.</li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code> the handles and labels are at the top, which is valid when <code class=\"codespan\">orient</code> is set as <code class=\"codespan\">&#39;vertical&#39;</code>.</li>\n</ul>\n","default":"'auto'"},"text":{"type":["Array"],"description":"<p>The label text on both ends, such as <code class=\"codespan\">[&#39;High&#39;, &#39;Low&#39;]</code>. <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/map-visualMap-continuous-text&amp;edit=1&amp;reset=1\" target=\"_blank\">sample</a>.</p>\n<p>You can understand the order of items in <code class=\"codespan\">text</code> array just by a simple trial. See <a href=\"#visualMap.inverse\">visualMap.inverse</a>.</p>\n","default":null},"textGap":{"type":["number"],"description":"<p>The distance between the ends of the main bar and the label, with unit px. See <a href=\"#visualMap-continuous.text\">visualMap-continuous.text</a></p>\n","default":10},"show":{"type":["boolean"],"description":"<p>Whether to show visualMap-continuous component. If set as <code class=\"codespan\">false</code>, visualMap-continuous component will not show, but it can still perform visual mapping from dataValue to visual channel in chart.</p>\n","default":true},"dimension":{"type":["string"],"description":"<p>Specify which dimension should be used to fetch dataValue from <a href=\"#series.data\">series.data</a>, and then map them to visual channel.</p>\n<p><a href=\"#series.data\">series.data</a> can be regarded as a two-dimensional array, for instance:</p>\n<pre><code class=\"lang-javascript\">[\n    [12, 23, 43],\n    [12, 23, 43],\n    [43, 545, 65],\n    [92, 23, 33]\n]\n</code></pre>\n<p>Each column of the above array is regarded as a <code class=\"codespan\">dimension</code>. For example, when property <code class=\"codespan\">dimension</code> is set to 1, the second column (i.e., 23, 23, 545, 23) is chosen to perform visual mapping.</p>\n<p>Use the last dimension of <code class=\"codespan\">data</code> by default.</p>\n"},"seriesIndex":{"type":["number","Array"],"description":"<p>Specify visual mapping should be performed on which series, from which\n<a href=\"#series.data\">series.data</a> is fetched.</p>\n<p>All series are used by default.</p>\n"},"hoverLink":{"type":["boolean"],"description":"<p><code class=\"codespan\">hoverLink</code> enable highlight certain graphical elements of chart when mouse hovers on some place of <code class=\"codespan\">visualMap</code> component that is coresponding to those graphical elements by visual mapping.</p>\n<p>Inversely, when mouse hovers a graphical element of chart, its value label will be displayed on its corresponding position in <code class=\"codespan\">visualMap</code>.</p>\n","default":true},"inRange":{"type":["Object"],"description":"<p>Define visual channels that will mapped from dataValues that are <strong>in selected range</strong>. (User can interact with visualMap component and make a seleced range by mouse or touch.)</p>\n<p>Possiable visual channels includes:</p>\n<ul>\n<li><code class=\"codespan\">symbol</code>: Type of symbol.</li>\n<li><code class=\"codespan\">symbolSize</code>: Symbol size.</li>\n<li><code class=\"codespan\">color</code>: Symbol color.</li>\n<li><code class=\"codespan\">colorAlpha</code>: Symbol alpha channel.</li>\n<li><code class=\"codespan\">opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code class=\"codespan\">colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<hr>\n<p><code class=\"codespan\">inRange</code> could customize visual channels both in series (by <a href=\"#visualMap-continuous.seriesIndex\">visualMap-continuous.seriesIndex</a>) and in <code class=\"codespan\">visualMap-continuous</code> itself.</p>\n<p>For instance, if a <code class=\"codespan\">visualMap-continuous</code> component is used on a scatter chart, the mapping approach from data to <code class=\"codespan\">color</code> (or <code class=\"codespan\">symbol</code>, <code class=\"codespan\">size</code>, ...) can be both customized in the scatter chart and <code class=\"codespan\">visualMap-continuous</code> component itself. See the code as following:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels both in target series and visualMap-continuous component itself:\n        inRange: {\n            color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n            symbolSize: [30, 100]\n        }\n    }\n]\n</code></pre>\n<p>If you want to define visual channels for target series and visualMap-continuous component separately, you should do as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels only for target series.\n        target: {\n            inRange: {\n                color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n                symbolSize: [60, 200]\n            }\n        },\n        // Define visual channels only for visualMap-continuous component.\n        controller: {\n            inRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n</code></pre>\n<p>Or define as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels for both target series and visualMap-continuous component.\n        inRange: {\n            color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n            symbolSize: [60, 200]\n        },\n        // Define visual channels only for visualMap-continuous component, which\n        // will overlap the properties with the same name in the above common\n        // definition. (symbolSize is overlapped by [30, 100] while color\n        // keeps the original value)\n        controller: {\n            inRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>✦ About visual channels ✦</strong></p>\n<ul>\n<li><p>Various visual channels (such as <code class=\"codespan\">color</code>、<code class=\"codespan\">symbolSize</code> and ect.) can be defined in inRange at the same time and all of them will be apopted.</p>\n</li>\n<li><p>Basically visual channels <code class=\"codespan\">opacity</code> is recommended, rather than <code class=\"codespan\">colorAlpha</code>. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.</p>\n</li>\n<li><p>There are two approaches of visual mapping supported: &#39;Linear Mapping&#39; and &#39;Table Mapping&#39;.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>✦ Linear Mapping to visual channel ✦</strong></p>\n<p><code class=\"codespan\">Linear Mapping</code> means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of <code class=\"codespan\">[visaulMap.min, visualMap.max]</code> to a given range of <code class=\"codespan\">[visual value 1, visual value 2]</code> and obtaining a final value (say visual value) for visual channel rendering.</p>\n<p>For instance, <code class=\"codespan\">[visualMap.min, visualMap.max]</code> is set to be <code class=\"codespan\">[0, 100]</code>, and there is series.data: <code class=\"codespan\">[50, 10, 100]</code>. We intend to map them to an <code class=\"codespan\">opacity</code> range <code class=\"codespan\">[0.4, 1]</code>, by which the size of value can be demostrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values <code class=\"codespan\">[0.7, 0.44, 1]</code>, cooresponding to each dataValue.</p>\n<p>We can also set the visual range inversely, such as <code class=\"codespan\">opacity: [1, 0.4]</code>, and the final mapping result for the given series.data above will be <code class=\"codespan\">[0.7, 0.96, 0.4]</code>.</p>\n<p>Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by default, but not <code class=\"codespan\">dataMin</code> and <code class=\"codespan\">dataMax</code> in series.data.</p>\n<p>How to configure visualMap component to do Linear Mapping?</p>\n<ul>\n<li><p>When use <a href=\"#visualMap-continuous\">visualMap-continuous</a>, or</p>\n</li>\n<li><p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is not used.</p>\n</li>\n</ul>\n<p>About the value of visual channel (visual value):</p>\n<ul>\n<li><p>Basically <code class=\"codespan\">Array</code> is used to express the range of visual value, e.g., <code class=\"codespan\">color: [&#39;#333&#39;, &#39;#777&#39;]</code>.</p>\n</li>\n<li><p>Single <code class=\"codespan\">number</code> or single <code class=\"codespan\">string</code> can also be used, which will be converted to an <code class=\"codespan\">Array</code> by visualMap component. e.g.:  <code class=\"codespan\">opacity: 0.4</code> will be converted to <code class=\"codespan\">opacity: [0.4, 0.4]</code>, <code class=\"codespan\">color: &#39;#333&#39;</code> will be converted to <code class=\"codespan\">color: [&#39;#333&#39;, &#39;#333&#39;]</code>.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">symbolSize</code>, <code class=\"codespan\">opacity</code>, <code class=\"codespan\">colorAlpha</code>, <code class=\"codespan\">colorLightness</code>, <code class=\"codespan\">colorSaturation</code>, <code class=\"codespan\">colorHue</code>, the range of visual value is always in the form of: <code class=\"codespan\">[visual value of visualMap.min, visual value of visualMap.max]</code>. For example, <code class=\"codespan\">colorLightness: [0.8, 0.2]</code> means that the dataValue in series.data that equals to <code class=\"codespan\">visualMap.min</code> (if any) will be mapped to lightness <code class=\"codespan\">0.8</code>, and the dataValue that equals to <code class=\"codespan\">visualMap.max</code> (if any) will be mapped to lightness <code class=\"codespan\">0.2</code>, and other dataValues will be mapped by the linear calculateion based on the domain of <code class=\"codespan\">[visualMap.min, visualMap.max]</code> and the range of <code class=\"codespan\">[0.8, 0.2]</code>.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">color</code>, array is used, like: <code class=\"codespan\">[&#39;#333&#39;, &#39;#78ab23&#39;, &#39;blue&#39;]</code>, which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to <code class=\"codespan\">visualMap.min</code> will be mapped onto <code class=\"codespan\">&#39;#333&#39;</code>, the dataValue that equals to <code class=\"codespan\">visualMap.max</code> will be mapped onto <code class=\"codespan\">&#39;blue&#39;</code>, and other dataValues will be piecewisely interpolated to get the final color.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">symbol</code>, array is used, like: <code class=\"codespan\">[&#39;circle&#39;, &#39;rect&#39;, &#39;diamond&#39;]</code>, where the dataValue that equals to <code class=\"codespan\">visualMap.min</code> will be mapped onto <code class=\"codespan\">&#39;circle&#39;</code>, the dataValue that equals to <code class=\"codespan\">visualMap.max</code> will be mapped onto <code class=\"codespan\">&#39;diamond&#39;</code>, and other dataValues will be caculated based on the numerical distance to <code class=\"codespan\">visualMax.min</code> and to <code class=\"codespan\">visualMap.max</code>, and mapped onto one of <code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>.</p>\n</li>\n</ul>\n<p>About the possible value range of visual value:</p>\n<ul>\n<li><p><code class=\"codespan\">opacity</code>、<code class=\"codespan\">colorAlpha</code>、<code class=\"codespan\">colorLightness</code>、<code class=\"codespan\">colorSaturation</code>、<code class=\"codespan\">visual value</code></p>\n<p>  possible value range is <code class=\"codespan\">[0, 1]</code>.</p>\n</li>\n<li><p><code class=\"codespan\">colorHue</code>:</p>\n<p>  possible value range is <code class=\"codespan\">[0, 360]</code>.</p>\n</li>\n<li><p><code class=\"codespan\">color</code>:</p>\n<p>  color can use RGB expression, like <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>, or RGBA expression, like <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>, or Hex expression, like &#39;#ccc&#39;.</p>\n</li>\n<li><p><code class=\"codespan\">symbol</code>:</p>\n</li>\n</ul>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p><br></p>\n<hr>\n<p><strong>✦ Table Mapping to visual channel ✦</strong></p>\n<p><code class=\"codespan\">Table Mapping</code> could be used when dataValue (values in series.data, specified by <a href=\"#visualMap.dimension\">visualMap.dimension</a>) is enumerable and we intend to map them to visual value by looking up a given table.</p>\n<p>For instance, in a <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> component, <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is set to <code class=\"codespan\">[&#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. And there is series.data: <code class=\"codespan\">[&#39;Demon Hunter&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. Then we can establish the lookup rule for color: <code class=\"codespan\">color: {&#39;Warden&#39;: &#39;red&#39;, &#39;Demon Hunter&#39;: &#39;black&#39;}</code>, by which the <code class=\"codespan\">visualMap</code> component will map <code class=\"codespan\">dataValue</code> to <code class=\"codespan\">color</code>.</p>\n<p>How to configure <code class=\"codespan\">visualMap</code> component to do <code class=\"codespan\">Table Mapping</code>?</p>\n<p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a>is set.</p>\n<p>About the value of visual channel (visual value):</p>\n<p>Generally <code class=\"codespan\">Object</code> or <code class=\"codespan\">Array</code> is used, for instance:</p>\n<pre><code class=\"lang-javascript\">visualMap: {\n    type: &#39;piecewise&#39;,\n    // categories defines the items that to be displayed in visualMap-piecewise component.\n    categories: [\n        &#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;\n    ],\n    inRange: {\n        // visual value can be an Object:\n        color: {\n            &#39;Warden&#39;: &#39;red&#39;,\n            &#39;Demon Hunter&#39;: &#39;black&#39;,\n            &#39;&#39;: &#39;green&#39; // Blank string means that except &#39;Warden&#39; and &#39;Demon Hunter&#39;,\n                        // all other dataValues should be mapped to &#39;green&#39;.\n        }\n        // visual value can also be a single value,\n        // means that all dataValues should be mapped to the value.\n        color: &#39;green&#39;,\n        // visual value can also be a array, with the same length\n        // as the array of categories and one-one mapping onto it.\n        color: [&#39;red&#39;, &#39;black&#39;, &#39;green&#39;, &#39;yellow&#39;, &#39;white&#39;]\n    }\n}\n</code></pre>\n<p><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/scatter-visualMap-categories&amp;edit=1&amp;reset=1\" target=\"_blank\">Example</a></p>\n<hr>\n<p><strong>✦ How to modity configurations of vsiual encoding? ✦</strong></p>\n<p>If you want to modify the configurations of visual encoding after chart been rendered (by invoke <code class=\"codespan\">setOption</code> to set the initial <code class=\"codespan\">option</code>), <code class=\"codespan\">setOption</code> can be used again to modify configurations of visual encoding. For instance:</p>\n<pre><code class=\"lang-javascript\">chart.setOption({\n    visualMap: {\n        inRange: {color: [&#39;red&#39;, &#39;blue&#39;]}\n    }\n});\n</code></pre>\n<p>Notice:</p>\n<ul>\n<li><p>These visualMap properties (i.e. <code class=\"codespan\">inRange</code>, <code class=\"codespan\">outOfRange</code>, <code class=\"codespan\">target</code>, <code class=\"codespan\">controller</code>) do not support &quot;merge&quot;, that is, anyone among them is modified when use <code class=\"codespan\">setOption</code> again, all of the original values of them will not be kept but erased. The &quot;merge&quot; brings complication in implemnentation and understanding, whereas &quot;erase all&quot; normalize the practise: once you want to modify some visual values, you should pass all of them to <code class=\"codespan\">setOption</code>, no matter they are to be changed.</p>\n</li>\n<li><p>This way, <code class=\"codespan\">getOption() -&gt; modify the gotten option -&gt; setOption(modified option)</code>, is strongly <strong>not recommended</strong>, for instance:</p>\n</li>\n</ul>\n<pre><code class=\"lang-javascript\">// Not recommended approach, regardless of its correctness:\n\nvar option = chart.getOption(); // Get the entire option.\noption.visualMap.inRange.color = [&#39;red&#39;, &#39;blue&#39;]; // modify color, which is what you want.\n\n// You have to modify those two properties, otherwise you will not get what you want.\noption.visualMap.target.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\noption.visualMap.controller.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\n\nchart.setOption(option); // set the modified option back.\n// You should not use this approach, but use the\n// approach demostrated before this example.\n</code></pre>\n<p><strong>Notice:</strong> There is default color <code class=\"codespan\">[&#39;#f6efa6&#39;, &#39;#d88273&#39;, &#39;#bf444c&#39;]</code> in <code class=\"codespan\">inRange</code> if you not set <code class=\"codespan\">inRange</code>. If you dont want it, set <code class=\"codespan\">inRange: {color: null}</code> to disable it.</p>\n"},"outOfRange":{"type":["Object"],"description":"<p>Define visual channels that will mapped from dataValues that are <strong>out of selected range</strong>. (User can interact with visualMap component and make a seleced range by mouse or touch.)</p>\n<p>Possiable visual channels includes:</p>\n<ul>\n<li><code class=\"codespan\">symbol</code>: Type of symbol.</li>\n<li><code class=\"codespan\">symbolSize</code>: Symbol size.</li>\n<li><code class=\"codespan\">color</code>: Symbol color.</li>\n<li><code class=\"codespan\">colorAlpha</code>: Symbol alpha channel.</li>\n<li><code class=\"codespan\">opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code class=\"codespan\">colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<p><code class=\"codespan\">outOfRange</code> could customize visual channels both in series (by <a href=\"#visualMap-continuous.seriesIndex\">visualMap-continuous.seriesIndex</a>) and in <code class=\"codespan\">visualMap-continuous</code> itself.</p>\n<p>For instance, if a <code class=\"codespan\">visualMap-continuous</code> component is used on a scatter chart, the mapping approach from data to <code class=\"codespan\">color</code> (or <code class=\"codespan\">symbol</code>, <code class=\"codespan\">size</code>, ...) can be both customized in the scatter chart and <code class=\"codespan\">visualMap-continuous</code> component itself. See the code as following:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels both in target series and visualMap-continuous component itself:\n        outOfRange: {\n            color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n            symbolSize: [30, 100]\n        }\n    }\n]\n</code></pre>\n<p>If you want to define visual channels for target series and visualMap-continuous component separately, you should do as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels only for target series.\n        target: {\n            outOfRange: {\n                color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n                symbolSize: [60, 200]\n            }\n        },\n        // Define visual channels only for visualMap-continuous component.\n        controller: {\n            outOfRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n</code></pre>\n<p>Or define as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels for both target series and visualMap-continuous component.\n        outOfRange: {\n            color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n            symbolSize: [60, 200]\n        },\n        // Define visual channels only for visualMap-continuous component, which\n        // will overlap the properties with the same name in the above common\n        // definition. (symbolSize is overlapped by [30, 100] while color\n        // keeps the original value)\n        controller: {\n            outOfRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>✦ About visual channels ✦</strong></p>\n<ul>\n<li><p>Various visual channels (such as <code class=\"codespan\">color</code>、<code class=\"codespan\">symbolSize</code> and ect.) can be defined in outOfRange at the same time and all of them will be apopted.</p>\n</li>\n<li><p>Basically visual channels <code class=\"codespan\">opacity</code> is recommended, rather than <code class=\"codespan\">colorAlpha</code>. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.</p>\n</li>\n<li><p>There are two approaches of visual mapping supported: &#39;Linear Mapping&#39; and &#39;Table Mapping&#39;.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>✦ Linear Mapping to visual channel ✦</strong></p>\n<p><code class=\"codespan\">Linear Mapping</code> means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of <code class=\"codespan\">[visaulMap.min, visualMap.max]</code> to a given range of <code class=\"codespan\">[visual value 1, visual value 2]</code> and obtaining a final value (say visual value) for visual channel rendering.</p>\n<p>For instance, <code class=\"codespan\">[visualMap.min, visualMap.max]</code> is set to be <code class=\"codespan\">[0, 100]</code>, and there is series.data: <code class=\"codespan\">[50, 10, 100]</code>. We intend to map them to an <code class=\"codespan\">opacity</code> range <code class=\"codespan\">[0.4, 1]</code>, by which the size of value can be demostrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values <code class=\"codespan\">[0.7, 0.44, 1]</code>, cooresponding to each dataValue.</p>\n<p>We can also set the visual range inversely, such as <code class=\"codespan\">opacity: [1, 0.4]</code>, and the final mapping result for the given series.data above will be <code class=\"codespan\">[0.7, 0.96, 0.4]</code>.</p>\n<p>Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by default, but not <code class=\"codespan\">dataMin</code> and <code class=\"codespan\">dataMax</code> in series.data.</p>\n<p>How to configure visualMap component to do Linear Mapping?</p>\n<ul>\n<li><p>When use <a href=\"#visualMap-continuous\">visualMap-continuous</a>, or</p>\n</li>\n<li><p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is not used.</p>\n</li>\n</ul>\n<p>About the value of visual channel (visual value):</p>\n<ul>\n<li><p>Basically <code class=\"codespan\">Array</code> is used to express the range of visual value, e.g., <code class=\"codespan\">color: [&#39;#333&#39;, &#39;#777&#39;]</code>.</p>\n</li>\n<li><p>Single <code class=\"codespan\">number</code> or single <code class=\"codespan\">string</code> can also be used, which will be converted to an <code class=\"codespan\">Array</code> by visualMap component. e.g.:  <code class=\"codespan\">opacity: 0.4</code> will be converted to <code class=\"codespan\">opacity: [0.4, 0.4]</code>, <code class=\"codespan\">color: &#39;#333&#39;</code> will be converted to <code class=\"codespan\">color: [&#39;#333&#39;, &#39;#333&#39;]</code>.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">symbolSize</code>, <code class=\"codespan\">opacity</code>, <code class=\"codespan\">colorAlpha</code>, <code class=\"codespan\">colorLightness</code>, <code class=\"codespan\">colorSaturation</code>, <code class=\"codespan\">colorHue</code>, the range of visual value is always in the form of: <code class=\"codespan\">[visual value of visualMap.min, visual value of visualMap.max]</code>. For example, <code class=\"codespan\">colorLightness: [0.8, 0.2]</code> means that the dataValue in series.data that equals to <code class=\"codespan\">visualMap.min</code> (if any) will be mapped to lightness <code class=\"codespan\">0.8</code>, and the dataValue that equals to <code class=\"codespan\">visualMap.max</code> (if any) will be mapped to lightness <code class=\"codespan\">0.2</code>, and other dataValues will be mapped by the linear calculateion based on the domain of <code class=\"codespan\">[visualMap.min, visualMap.max]</code> and the range of <code class=\"codespan\">[0.8, 0.2]</code>.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">color</code>, array is used, like: <code class=\"codespan\">[&#39;#333&#39;, &#39;#78ab23&#39;, &#39;blue&#39;]</code>, which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to <code class=\"codespan\">visualMap.min</code> will be mapped onto <code class=\"codespan\">&#39;#333&#39;</code>, the dataValue that equals to <code class=\"codespan\">visualMap.max</code> will be mapped onto <code class=\"codespan\">&#39;blue&#39;</code>, and other dataValues will be piecewisely interpolated to get the final color.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">symbol</code>, array is used, like: <code class=\"codespan\">[&#39;circle&#39;, &#39;rect&#39;, &#39;diamond&#39;]</code>, where the dataValue that equals to <code class=\"codespan\">visualMap.min</code> will be mapped onto <code class=\"codespan\">&#39;circle&#39;</code>, the dataValue that equals to <code class=\"codespan\">visualMap.max</code> will be mapped onto <code class=\"codespan\">&#39;diamond&#39;</code>, and other dataValues will be caculated based on the numerical distance to <code class=\"codespan\">visualMax.min</code> and to <code class=\"codespan\">visualMap.max</code>, and mapped onto one of <code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>.</p>\n</li>\n</ul>\n<p>About the possible value range of visual value:</p>\n<ul>\n<li><p><code class=\"codespan\">opacity</code>、<code class=\"codespan\">colorAlpha</code>、<code class=\"codespan\">colorLightness</code>、<code class=\"codespan\">colorSaturation</code>、<code class=\"codespan\">visual value</code></p>\n<p>  possible value range is <code class=\"codespan\">[0, 1]</code>.</p>\n</li>\n<li><p><code class=\"codespan\">colorHue</code>:</p>\n<p>  possible value range is <code class=\"codespan\">[0, 360]</code>.</p>\n</li>\n<li><p><code class=\"codespan\">color</code>:</p>\n<p>  color can use RGB expression, like <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>, or RGBA expression, like <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>, or Hex expression, like &#39;#ccc&#39;.</p>\n</li>\n<li><p><code class=\"codespan\">symbol</code>:</p>\n</li>\n</ul>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p><br></p>\n<hr>\n<p><strong>✦ Table Mapping to visual channel ✦</strong></p>\n<p><code class=\"codespan\">Table Mapping</code> could be used when dataValue (values in series.data, specified by <a href=\"#visualMap.dimension\">visualMap.dimension</a>) is enumerable and we intend to map them to visual value by looking up a given table.</p>\n<p>For instance, in a <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> component, <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is set to <code class=\"codespan\">[&#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. And there is series.data: <code class=\"codespan\">[&#39;Demon Hunter&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. Then we can establish the lookup rule for color: <code class=\"codespan\">color: {&#39;Warden&#39;: &#39;red&#39;, &#39;Demon Hunter&#39;: &#39;black&#39;}</code>, by which the <code class=\"codespan\">visualMap</code> component will map <code class=\"codespan\">dataValue</code> to <code class=\"codespan\">color</code>.</p>\n<p>How to configure <code class=\"codespan\">visualMap</code> component to do <code class=\"codespan\">Table Mapping</code>?</p>\n<p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a>is set.</p>\n<p>About the value of visual channel (visual value):</p>\n<p>Generally <code class=\"codespan\">Object</code> or <code class=\"codespan\">Array</code> is used, for instance:</p>\n<pre><code class=\"lang-javascript\">visualMap: {\n    type: &#39;piecewise&#39;,\n    // categories defines the items that to be displayed in visualMap-piecewise component.\n    categories: [\n        &#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;\n    ],\n    outOfRange: {\n        // visual value can be an Object:\n        color: {\n            &#39;Warden&#39;: &#39;red&#39;,\n            &#39;Demon Hunter&#39;: &#39;black&#39;,\n            &#39;&#39;: &#39;green&#39; // Blank string means that except &#39;Warden&#39; and &#39;Demon Hunter&#39;,\n                        // all other dataValues should be mapped to &#39;green&#39;.\n        }\n        // visual value can also be a single value,\n        // means that all dataValues should be mapped to the value.\n        color: &#39;green&#39;,\n        // visual value can also be a array, with the same length\n        // as the array of categories and one-one mapping onto it.\n        color: [&#39;red&#39;, &#39;black&#39;, &#39;green&#39;, &#39;yellow&#39;, &#39;white&#39;]\n    }\n}\n</code></pre>\n<p><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/scatter-visualMap-categories&amp;edit=1&amp;reset=1\" target=\"_blank\">Example</a></p>\n<hr>\n<p><strong>✦ How to modity configurations of vsiual encoding? ✦</strong></p>\n<p>If you want to modify the configurations of visual encoding after chart been rendered (by invoke <code class=\"codespan\">setOption</code> to set the initial <code class=\"codespan\">option</code>), <code class=\"codespan\">setOption</code> can be used again to modify configurations of visual encoding. For instance:</p>\n<pre><code class=\"lang-javascript\">chart.setOption({\n    visualMap: {\n        inRange: {color: [&#39;red&#39;, &#39;blue&#39;]}\n    }\n});\n</code></pre>\n<p>Notice:</p>\n<ul>\n<li><p>These visualMap properties (i.e. <code class=\"codespan\">inRange</code>, <code class=\"codespan\">outOfRange</code>, <code class=\"codespan\">target</code>, <code class=\"codespan\">controller</code>) do not support &quot;merge&quot;, that is, anyone among them is modified when use <code class=\"codespan\">setOption</code> again, all of the original values of them will not be kept but erased. The &quot;merge&quot; brings complication in implemnentation and understanding, whereas &quot;erase all&quot; normalize the practise: once you want to modify some visual values, you should pass all of them to <code class=\"codespan\">setOption</code>, no matter they are to be changed.</p>\n</li>\n<li><p>This way, <code class=\"codespan\">getOption() -&gt; modify the gotten option -&gt; setOption(modified option)</code>, is strongly <strong>not recommended</strong>, for instance:</p>\n</li>\n</ul>\n<pre><code class=\"lang-javascript\">// Not recommended approach, regardless of its correctness:\n\nvar option = chart.getOption(); // Get the entire option.\noption.visualMap.inRange.color = [&#39;red&#39;, &#39;blue&#39;]; // modify color, which is what you want.\n\n// You have to modify those two properties, otherwise you will not get what you want.\noption.visualMap.target.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\noption.visualMap.controller.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\n\nchart.setOption(option); // set the modified option back.\n// You should not use this approach, but use the\n// approach demostrated before this example.\n</code></pre>\n"},"controller":{"type":["Object"],"description":"<p>Property <code class=\"codespan\">inRange</code> and <code class=\"codespan\">outOfRange</code> can be set within property <code class=\"codespan\">controller</code>, which means those <code class=\"codespan\">inRange</code> and <code class=\"codespan\">outOfRange</code> are only used on the controller (<code class=\"codespan\">visualMap</code> component itself), but are not used on chart (series). This property is useful in some scenarios when the view of controller needs to be customized in detail.</p>\n","properties":{"inRange":{"type":["Object"],"description":"<p>Define visual channels that will mapped from dataValues that are <strong>in selected range</strong>. (User can interact with visualMap component and make a seleced range by mouse or touch.)</p>\n<p>Possiable visual channels includes:</p>\n<ul>\n<li><code class=\"codespan\">symbol</code>: Type of symbol.</li>\n<li><code class=\"codespan\">symbolSize</code>: Symbol size.</li>\n<li><code class=\"codespan\">color</code>: Symbol color.</li>\n<li><code class=\"codespan\">colorAlpha</code>: Symbol alpha channel.</li>\n<li><code class=\"codespan\">opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code class=\"codespan\">colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<hr>\n<p><code class=\"codespan\">inRange</code> could customize visual channels both in series (by <a href=\"#visualMap-continuous.seriesIndex\">visualMap-continuous.seriesIndex</a>) and in <code class=\"codespan\">visualMap-continuous</code> itself.</p>\n<p>For instance, if a <code class=\"codespan\">visualMap-continuous</code> component is used on a scatter chart, the mapping approach from data to <code class=\"codespan\">color</code> (or <code class=\"codespan\">symbol</code>, <code class=\"codespan\">size</code>, ...) can be both customized in the scatter chart and <code class=\"codespan\">visualMap-continuous</code> component itself. See the code as following:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels both in target series and visualMap-continuous component itself:\n        inRange: {\n            color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n            symbolSize: [30, 100]\n        }\n    }\n]\n</code></pre>\n<p>If you want to define visual channels for target series and visualMap-continuous component separately, you should do as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels only for target series.\n        target: {\n            inRange: {\n                color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n                symbolSize: [60, 200]\n            }\n        },\n        // Define visual channels only for visualMap-continuous component.\n        controller: {\n            inRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n</code></pre>\n<p>Or define as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels for both target series and visualMap-continuous component.\n        inRange: {\n            color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n            symbolSize: [60, 200]\n        },\n        // Define visual channels only for visualMap-continuous component, which\n        // will overlap the properties with the same name in the above common\n        // definition. (symbolSize is overlapped by [30, 100] while color\n        // keeps the original value)\n        controller: {\n            inRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>✦ About visual channels ✦</strong></p>\n<ul>\n<li><p>Various visual channels (such as <code class=\"codespan\">color</code>、<code class=\"codespan\">symbolSize</code> and ect.) can be defined in inRange at the same time and all of them will be apopted.</p>\n</li>\n<li><p>Basically visual channels <code class=\"codespan\">opacity</code> is recommended, rather than <code class=\"codespan\">colorAlpha</code>. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.</p>\n</li>\n<li><p>There are two approaches of visual mapping supported: &#39;Linear Mapping&#39; and &#39;Table Mapping&#39;.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>✦ Linear Mapping to visual channel ✦</strong></p>\n<p><code class=\"codespan\">Linear Mapping</code> means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of <code class=\"codespan\">[visaulMap.min, visualMap.max]</code> to a given range of <code class=\"codespan\">[visual value 1, visual value 2]</code> and obtaining a final value (say visual value) for visual channel rendering.</p>\n<p>For instance, <code class=\"codespan\">[visualMap.min, visualMap.max]</code> is set to be <code class=\"codespan\">[0, 100]</code>, and there is series.data: <code class=\"codespan\">[50, 10, 100]</code>. We intend to map them to an <code class=\"codespan\">opacity</code> range <code class=\"codespan\">[0.4, 1]</code>, by which the size of value can be demostrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values <code class=\"codespan\">[0.7, 0.44, 1]</code>, cooresponding to each dataValue.</p>\n<p>We can also set the visual range inversely, such as <code class=\"codespan\">opacity: [1, 0.4]</code>, and the final mapping result for the given series.data above will be <code class=\"codespan\">[0.7, 0.96, 0.4]</code>.</p>\n<p>Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by default, but not <code class=\"codespan\">dataMin</code> and <code class=\"codespan\">dataMax</code> in series.data.</p>\n<p>How to configure visualMap component to do Linear Mapping?</p>\n<ul>\n<li><p>When use <a href=\"#visualMap-continuous\">visualMap-continuous</a>, or</p>\n</li>\n<li><p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is not used.</p>\n</li>\n</ul>\n<p>About the value of visual channel (visual value):</p>\n<ul>\n<li><p>Basically <code class=\"codespan\">Array</code> is used to express the range of visual value, e.g., <code class=\"codespan\">color: [&#39;#333&#39;, &#39;#777&#39;]</code>.</p>\n</li>\n<li><p>Single <code class=\"codespan\">number</code> or single <code class=\"codespan\">string</code> can also be used, which will be converted to an <code class=\"codespan\">Array</code> by visualMap component. e.g.:  <code class=\"codespan\">opacity: 0.4</code> will be converted to <code class=\"codespan\">opacity: [0.4, 0.4]</code>, <code class=\"codespan\">color: &#39;#333&#39;</code> will be converted to <code class=\"codespan\">color: [&#39;#333&#39;, &#39;#333&#39;]</code>.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">symbolSize</code>, <code class=\"codespan\">opacity</code>, <code class=\"codespan\">colorAlpha</code>, <code class=\"codespan\">colorLightness</code>, <code class=\"codespan\">colorSaturation</code>, <code class=\"codespan\">colorHue</code>, the range of visual value is always in the form of: <code class=\"codespan\">[visual value of visualMap.min, visual value of visualMap.max]</code>. For example, <code class=\"codespan\">colorLightness: [0.8, 0.2]</code> means that the dataValue in series.data that equals to <code class=\"codespan\">visualMap.min</code> (if any) will be mapped to lightness <code class=\"codespan\">0.8</code>, and the dataValue that equals to <code class=\"codespan\">visualMap.max</code> (if any) will be mapped to lightness <code class=\"codespan\">0.2</code>, and other dataValues will be mapped by the linear calculateion based on the domain of <code class=\"codespan\">[visualMap.min, visualMap.max]</code> and the range of <code class=\"codespan\">[0.8, 0.2]</code>.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">color</code>, array is used, like: <code class=\"codespan\">[&#39;#333&#39;, &#39;#78ab23&#39;, &#39;blue&#39;]</code>, which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to <code class=\"codespan\">visualMap.min</code> will be mapped onto <code class=\"codespan\">&#39;#333&#39;</code>, the dataValue that equals to <code class=\"codespan\">visualMap.max</code> will be mapped onto <code class=\"codespan\">&#39;blue&#39;</code>, and other dataValues will be piecewisely interpolated to get the final color.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">symbol</code>, array is used, like: <code class=\"codespan\">[&#39;circle&#39;, &#39;rect&#39;, &#39;diamond&#39;]</code>, where the dataValue that equals to <code class=\"codespan\">visualMap.min</code> will be mapped onto <code class=\"codespan\">&#39;circle&#39;</code>, the dataValue that equals to <code class=\"codespan\">visualMap.max</code> will be mapped onto <code class=\"codespan\">&#39;diamond&#39;</code>, and other dataValues will be caculated based on the numerical distance to <code class=\"codespan\">visualMax.min</code> and to <code class=\"codespan\">visualMap.max</code>, and mapped onto one of <code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>.</p>\n</li>\n</ul>\n<p>About the possible value range of visual value:</p>\n<ul>\n<li><p><code class=\"codespan\">opacity</code>、<code class=\"codespan\">colorAlpha</code>、<code class=\"codespan\">colorLightness</code>、<code class=\"codespan\">colorSaturation</code>、<code class=\"codespan\">visual value</code></p>\n<p>  possible value range is <code class=\"codespan\">[0, 1]</code>.</p>\n</li>\n<li><p><code class=\"codespan\">colorHue</code>:</p>\n<p>  possible value range is <code class=\"codespan\">[0, 360]</code>.</p>\n</li>\n<li><p><code class=\"codespan\">color</code>:</p>\n<p>  color can use RGB expression, like <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>, or RGBA expression, like <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>, or Hex expression, like &#39;#ccc&#39;.</p>\n</li>\n<li><p><code class=\"codespan\">symbol</code>:</p>\n</li>\n</ul>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p><br></p>\n<hr>\n<p><strong>✦ Table Mapping to visual channel ✦</strong></p>\n<p><code class=\"codespan\">Table Mapping</code> could be used when dataValue (values in series.data, specified by <a href=\"#visualMap.dimension\">visualMap.dimension</a>) is enumerable and we intend to map them to visual value by looking up a given table.</p>\n<p>For instance, in a <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> component, <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is set to <code class=\"codespan\">[&#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. And there is series.data: <code class=\"codespan\">[&#39;Demon Hunter&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. Then we can establish the lookup rule for color: <code class=\"codespan\">color: {&#39;Warden&#39;: &#39;red&#39;, &#39;Demon Hunter&#39;: &#39;black&#39;}</code>, by which the <code class=\"codespan\">visualMap</code> component will map <code class=\"codespan\">dataValue</code> to <code class=\"codespan\">color</code>.</p>\n<p>How to configure <code class=\"codespan\">visualMap</code> component to do <code class=\"codespan\">Table Mapping</code>?</p>\n<p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a>is set.</p>\n<p>About the value of visual channel (visual value):</p>\n<p>Generally <code class=\"codespan\">Object</code> or <code class=\"codespan\">Array</code> is used, for instance:</p>\n<pre><code class=\"lang-javascript\">visualMap: {\n    type: &#39;piecewise&#39;,\n    // categories defines the items that to be displayed in visualMap-piecewise component.\n    categories: [\n        &#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;\n    ],\n    inRange: {\n        // visual value can be an Object:\n        color: {\n            &#39;Warden&#39;: &#39;red&#39;,\n            &#39;Demon Hunter&#39;: &#39;black&#39;,\n            &#39;&#39;: &#39;green&#39; // Blank string means that except &#39;Warden&#39; and &#39;Demon Hunter&#39;,\n                        // all other dataValues should be mapped to &#39;green&#39;.\n        }\n        // visual value can also be a single value,\n        // means that all dataValues should be mapped to the value.\n        color: &#39;green&#39;,\n        // visual value can also be a array, with the same length\n        // as the array of categories and one-one mapping onto it.\n        color: [&#39;red&#39;, &#39;black&#39;, &#39;green&#39;, &#39;yellow&#39;, &#39;white&#39;]\n    }\n}\n</code></pre>\n<p><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/scatter-visualMap-categories&amp;edit=1&amp;reset=1\" target=\"_blank\">Example</a></p>\n<hr>\n<p><strong>✦ How to modity configurations of vsiual encoding? ✦</strong></p>\n<p>If you want to modify the configurations of visual encoding after chart been rendered (by invoke <code class=\"codespan\">setOption</code> to set the initial <code class=\"codespan\">option</code>), <code class=\"codespan\">setOption</code> can be used again to modify configurations of visual encoding. For instance:</p>\n<pre><code class=\"lang-javascript\">chart.setOption({\n    visualMap: {\n        inRange: {color: [&#39;red&#39;, &#39;blue&#39;]}\n    }\n});\n</code></pre>\n<p>Notice:</p>\n<ul>\n<li><p>These visualMap properties (i.e. <code class=\"codespan\">inRange</code>, <code class=\"codespan\">outOfRange</code>, <code class=\"codespan\">target</code>, <code class=\"codespan\">controller</code>) do not support &quot;merge&quot;, that is, anyone among them is modified when use <code class=\"codespan\">setOption</code> again, all of the original values of them will not be kept but erased. The &quot;merge&quot; brings complication in implemnentation and understanding, whereas &quot;erase all&quot; normalize the practise: once you want to modify some visual values, you should pass all of them to <code class=\"codespan\">setOption</code>, no matter they are to be changed.</p>\n</li>\n<li><p>This way, <code class=\"codespan\">getOption() -&gt; modify the gotten option -&gt; setOption(modified option)</code>, is strongly <strong>not recommended</strong>, for instance:</p>\n</li>\n</ul>\n<pre><code class=\"lang-javascript\">// Not recommended approach, regardless of its correctness:\n\nvar option = chart.getOption(); // Get the entire option.\noption.visualMap.inRange.color = [&#39;red&#39;, &#39;blue&#39;]; // modify color, which is what you want.\n\n// You have to modify those two properties, otherwise you will not get what you want.\noption.visualMap.target.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\noption.visualMap.controller.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\n\nchart.setOption(option); // set the modified option back.\n// You should not use this approach, but use the\n// approach demostrated before this example.\n</code></pre>\n<p><strong>Notice:</strong> There is default color <code class=\"codespan\">[&#39;#f6efa6&#39;, &#39;#d88273&#39;, &#39;#bf444c&#39;]</code> in <code class=\"codespan\">inRange</code> if you not set <code class=\"codespan\">inRange</code>. If you dont want it, set <code class=\"codespan\">inRange: {color: null}</code> to disable it.</p>\n"},"outOfRange":{"type":["Object"],"description":"<p>Define visual channels that will mapped from dataValues that are <strong>out of selected range</strong>. (User can interact with visualMap component and make a seleced range by mouse or touch.)</p>\n<p>Possiable visual channels includes:</p>\n<ul>\n<li><code class=\"codespan\">symbol</code>: Type of symbol.</li>\n<li><code class=\"codespan\">symbolSize</code>: Symbol size.</li>\n<li><code class=\"codespan\">color</code>: Symbol color.</li>\n<li><code class=\"codespan\">colorAlpha</code>: Symbol alpha channel.</li>\n<li><code class=\"codespan\">opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code class=\"codespan\">colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<p><code class=\"codespan\">outOfRange</code> could customize visual channels both in series (by <a href=\"#visualMap-continuous.seriesIndex\">visualMap-continuous.seriesIndex</a>) and in <code class=\"codespan\">visualMap-continuous</code> itself.</p>\n<p>For instance, if a <code class=\"codespan\">visualMap-continuous</code> component is used on a scatter chart, the mapping approach from data to <code class=\"codespan\">color</code> (or <code class=\"codespan\">symbol</code>, <code class=\"codespan\">size</code>, ...) can be both customized in the scatter chart and <code class=\"codespan\">visualMap-continuous</code> component itself. See the code as following:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels both in target series and visualMap-continuous component itself:\n        outOfRange: {\n            color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n            symbolSize: [30, 100]\n        }\n    }\n]\n</code></pre>\n<p>If you want to define visual channels for target series and visualMap-continuous component separately, you should do as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels only for target series.\n        target: {\n            outOfRange: {\n                color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n                symbolSize: [60, 200]\n            }\n        },\n        // Define visual channels only for visualMap-continuous component.\n        controller: {\n            outOfRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n</code></pre>\n<p>Or define as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels for both target series and visualMap-continuous component.\n        outOfRange: {\n            color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n            symbolSize: [60, 200]\n        },\n        // Define visual channels only for visualMap-continuous component, which\n        // will overlap the properties with the same name in the above common\n        // definition. (symbolSize is overlapped by [30, 100] while color\n        // keeps the original value)\n        controller: {\n            outOfRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>✦ About visual channels ✦</strong></p>\n<ul>\n<li><p>Various visual channels (such as <code class=\"codespan\">color</code>、<code class=\"codespan\">symbolSize</code> and ect.) can be defined in outOfRange at the same time and all of them will be apopted.</p>\n</li>\n<li><p>Basically visual channels <code class=\"codespan\">opacity</code> is recommended, rather than <code class=\"codespan\">colorAlpha</code>. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.</p>\n</li>\n<li><p>There are two approaches of visual mapping supported: &#39;Linear Mapping&#39; and &#39;Table Mapping&#39;.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>✦ Linear Mapping to visual channel ✦</strong></p>\n<p><code class=\"codespan\">Linear Mapping</code> means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of <code class=\"codespan\">[visaulMap.min, visualMap.max]</code> to a given range of <code class=\"codespan\">[visual value 1, visual value 2]</code> and obtaining a final value (say visual value) for visual channel rendering.</p>\n<p>For instance, <code class=\"codespan\">[visualMap.min, visualMap.max]</code> is set to be <code class=\"codespan\">[0, 100]</code>, and there is series.data: <code class=\"codespan\">[50, 10, 100]</code>. We intend to map them to an <code class=\"codespan\">opacity</code> range <code class=\"codespan\">[0.4, 1]</code>, by which the size of value can be demostrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values <code class=\"codespan\">[0.7, 0.44, 1]</code>, cooresponding to each dataValue.</p>\n<p>We can also set the visual range inversely, such as <code class=\"codespan\">opacity: [1, 0.4]</code>, and the final mapping result for the given series.data above will be <code class=\"codespan\">[0.7, 0.96, 0.4]</code>.</p>\n<p>Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by default, but not <code class=\"codespan\">dataMin</code> and <code class=\"codespan\">dataMax</code> in series.data.</p>\n<p>How to configure visualMap component to do Linear Mapping?</p>\n<ul>\n<li><p>When use <a href=\"#visualMap-continuous\">visualMap-continuous</a>, or</p>\n</li>\n<li><p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is not used.</p>\n</li>\n</ul>\n<p>About the value of visual channel (visual value):</p>\n<ul>\n<li><p>Basically <code class=\"codespan\">Array</code> is used to express the range of visual value, e.g., <code class=\"codespan\">color: [&#39;#333&#39;, &#39;#777&#39;]</code>.</p>\n</li>\n<li><p>Single <code class=\"codespan\">number</code> or single <code class=\"codespan\">string</code> can also be used, which will be converted to an <code class=\"codespan\">Array</code> by visualMap component. e.g.:  <code class=\"codespan\">opacity: 0.4</code> will be converted to <code class=\"codespan\">opacity: [0.4, 0.4]</code>, <code class=\"codespan\">color: &#39;#333&#39;</code> will be converted to <code class=\"codespan\">color: [&#39;#333&#39;, &#39;#333&#39;]</code>.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">symbolSize</code>, <code class=\"codespan\">opacity</code>, <code class=\"codespan\">colorAlpha</code>, <code class=\"codespan\">colorLightness</code>, <code class=\"codespan\">colorSaturation</code>, <code class=\"codespan\">colorHue</code>, the range of visual value is always in the form of: <code class=\"codespan\">[visual value of visualMap.min, visual value of visualMap.max]</code>. For example, <code class=\"codespan\">colorLightness: [0.8, 0.2]</code> means that the dataValue in series.data that equals to <code class=\"codespan\">visualMap.min</code> (if any) will be mapped to lightness <code class=\"codespan\">0.8</code>, and the dataValue that equals to <code class=\"codespan\">visualMap.max</code> (if any) will be mapped to lightness <code class=\"codespan\">0.2</code>, and other dataValues will be mapped by the linear calculateion based on the domain of <code class=\"codespan\">[visualMap.min, visualMap.max]</code> and the range of <code class=\"codespan\">[0.8, 0.2]</code>.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">color</code>, array is used, like: <code class=\"codespan\">[&#39;#333&#39;, &#39;#78ab23&#39;, &#39;blue&#39;]</code>, which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to <code class=\"codespan\">visualMap.min</code> will be mapped onto <code class=\"codespan\">&#39;#333&#39;</code>, the dataValue that equals to <code class=\"codespan\">visualMap.max</code> will be mapped onto <code class=\"codespan\">&#39;blue&#39;</code>, and other dataValues will be piecewisely interpolated to get the final color.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">symbol</code>, array is used, like: <code class=\"codespan\">[&#39;circle&#39;, &#39;rect&#39;, &#39;diamond&#39;]</code>, where the dataValue that equals to <code class=\"codespan\">visualMap.min</code> will be mapped onto <code class=\"codespan\">&#39;circle&#39;</code>, the dataValue that equals to <code class=\"codespan\">visualMap.max</code> will be mapped onto <code class=\"codespan\">&#39;diamond&#39;</code>, and other dataValues will be caculated based on the numerical distance to <code class=\"codespan\">visualMax.min</code> and to <code class=\"codespan\">visualMap.max</code>, and mapped onto one of <code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>.</p>\n</li>\n</ul>\n<p>About the possible value range of visual value:</p>\n<ul>\n<li><p><code class=\"codespan\">opacity</code>、<code class=\"codespan\">colorAlpha</code>、<code class=\"codespan\">colorLightness</code>、<code class=\"codespan\">colorSaturation</code>、<code class=\"codespan\">visual value</code></p>\n<p>  possible value range is <code class=\"codespan\">[0, 1]</code>.</p>\n</li>\n<li><p><code class=\"codespan\">colorHue</code>:</p>\n<p>  possible value range is <code class=\"codespan\">[0, 360]</code>.</p>\n</li>\n<li><p><code class=\"codespan\">color</code>:</p>\n<p>  color can use RGB expression, like <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>, or RGBA expression, like <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>, or Hex expression, like &#39;#ccc&#39;.</p>\n</li>\n<li><p><code class=\"codespan\">symbol</code>:</p>\n</li>\n</ul>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p><br></p>\n<hr>\n<p><strong>✦ Table Mapping to visual channel ✦</strong></p>\n<p><code class=\"codespan\">Table Mapping</code> could be used when dataValue (values in series.data, specified by <a href=\"#visualMap.dimension\">visualMap.dimension</a>) is enumerable and we intend to map them to visual value by looking up a given table.</p>\n<p>For instance, in a <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> component, <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is set to <code class=\"codespan\">[&#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. And there is series.data: <code class=\"codespan\">[&#39;Demon Hunter&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. Then we can establish the lookup rule for color: <code class=\"codespan\">color: {&#39;Warden&#39;: &#39;red&#39;, &#39;Demon Hunter&#39;: &#39;black&#39;}</code>, by which the <code class=\"codespan\">visualMap</code> component will map <code class=\"codespan\">dataValue</code> to <code class=\"codespan\">color</code>.</p>\n<p>How to configure <code class=\"codespan\">visualMap</code> component to do <code class=\"codespan\">Table Mapping</code>?</p>\n<p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a>is set.</p>\n<p>About the value of visual channel (visual value):</p>\n<p>Generally <code class=\"codespan\">Object</code> or <code class=\"codespan\">Array</code> is used, for instance:</p>\n<pre><code class=\"lang-javascript\">visualMap: {\n    type: &#39;piecewise&#39;,\n    // categories defines the items that to be displayed in visualMap-piecewise component.\n    categories: [\n        &#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;\n    ],\n    outOfRange: {\n        // visual value can be an Object:\n        color: {\n            &#39;Warden&#39;: &#39;red&#39;,\n            &#39;Demon Hunter&#39;: &#39;black&#39;,\n            &#39;&#39;: &#39;green&#39; // Blank string means that except &#39;Warden&#39; and &#39;Demon Hunter&#39;,\n                        // all other dataValues should be mapped to &#39;green&#39;.\n        }\n        // visual value can also be a single value,\n        // means that all dataValues should be mapped to the value.\n        color: &#39;green&#39;,\n        // visual value can also be a array, with the same length\n        // as the array of categories and one-one mapping onto it.\n        color: [&#39;red&#39;, &#39;black&#39;, &#39;green&#39;, &#39;yellow&#39;, &#39;white&#39;]\n    }\n}\n</code></pre>\n<p><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/scatter-visualMap-categories&amp;edit=1&amp;reset=1\" target=\"_blank\">Example</a></p>\n<hr>\n<p><strong>✦ How to modity configurations of vsiual encoding? ✦</strong></p>\n<p>If you want to modify the configurations of visual encoding after chart been rendered (by invoke <code class=\"codespan\">setOption</code> to set the initial <code class=\"codespan\">option</code>), <code class=\"codespan\">setOption</code> can be used again to modify configurations of visual encoding. For instance:</p>\n<pre><code class=\"lang-javascript\">chart.setOption({\n    visualMap: {\n        inRange: {color: [&#39;red&#39;, &#39;blue&#39;]}\n    }\n});\n</code></pre>\n<p>Notice:</p>\n<ul>\n<li><p>These visualMap properties (i.e. <code class=\"codespan\">inRange</code>, <code class=\"codespan\">outOfRange</code>, <code class=\"codespan\">target</code>, <code class=\"codespan\">controller</code>) do not support &quot;merge&quot;, that is, anyone among them is modified when use <code class=\"codespan\">setOption</code> again, all of the original values of them will not be kept but erased. The &quot;merge&quot; brings complication in implemnentation and understanding, whereas &quot;erase all&quot; normalize the practise: once you want to modify some visual values, you should pass all of them to <code class=\"codespan\">setOption</code>, no matter they are to be changed.</p>\n</li>\n<li><p>This way, <code class=\"codespan\">getOption() -&gt; modify the gotten option -&gt; setOption(modified option)</code>, is strongly <strong>not recommended</strong>, for instance:</p>\n</li>\n</ul>\n<pre><code class=\"lang-javascript\">// Not recommended approach, regardless of its correctness:\n\nvar option = chart.getOption(); // Get the entire option.\noption.visualMap.inRange.color = [&#39;red&#39;, &#39;blue&#39;]; // modify color, which is what you want.\n\n// You have to modify those two properties, otherwise you will not get what you want.\noption.visualMap.target.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\noption.visualMap.controller.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\n\nchart.setOption(option); // set the modified option back.\n// You should not use this approach, but use the\n// approach demostrated before this example.\n</code></pre>\n"}}},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":4},"left":{"type":["string","number"],"description":"<p>Distance between visualMap  component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":0},"top":{"type":["string","number"],"description":"<p>Distance between visualMap  component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"auto"},"right":{"type":["string","number"],"description":"<p>Distance between visualMap  component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n","default":"auto"},"bottom":{"type":["string","number"],"description":"<p>Distance between visualMap  component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n","default":0},"orient":{"type":["string"],"description":"<p>How to layout the visualMap component, <code class=\"codespan\">&#39;horizontal&#39;</code> or <code class=\"codespan\">&#39;vertical&#39;</code>.</p>\n","default":"'vertical'"},"padding":{"type":["number","Array"],"description":"<p>visualMap-continuous space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"backgroundColor":{"type":["Color"],"description":"<p>background color of visualMap component.</p>\n","default":"'rgba(0,0,0,0)'"},"borderColor":{"type":["Color"],"description":"<p>border color of visualMap component.</p>\n","default":"'#ccc'"},"borderWidth":{"type":["number"],"description":"<p>border width of visualMap component, with unit: px.</p>\n","default":0},"color":{"type":["Array"],"description":"<p>This property remains only for compatibility with ECharts2, and is not recommended in ECharts3. It is recommended to configure color in <a href=\"#visualMap-continuous.inRange\">visualMap-continuous.inRange</a>, or <a href=\"#visualMap-continuous.outOfRange\">visualMap-continuous.outOfRange</a> if needed.</p>\n<p>If you persist in using it, the following issue should be noticed: the sequence of dataValues that are mapped to colorValues in property <code class=\"codespan\">color</code> is from <code class=\"codespan\">large</code> to <code class=\"codespan\">small</code>, whereas that in <a href=\"#visualMap-continuous.inRange\">visualMap-continuous.inRange</a> or <a href=\"#visualMap-continuous.outOfRange\">visualMap-continuous.outOfRange</a> is from <code class=\"codespan\">small</code> to <code class=\"codespan\">large</code>.</p>\n","default":"['#bf444c', '#d88273', '#f6efa6']"},"textStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>visualMap  text color.</p>\n","default":"#333"},"fontStyle":{"type":["string"],"description":"<p>visualMap  font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p>visualMap  font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>visualMap  font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>visualMap  font size.</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"formatter":{"type":["string","Function"],"description":"<p>the formatter tool for label.</p>\n<ul>\n<li><p>If it was set as a <code class=\"codespan\">string</code>, it refers to a template, for instance: <code class=\"codespan\">aaaa{value}bbbb</code>, where <code class=\"codespan\">{value}</code> represents the value of the edge of the seleted range.</p>\n</li>\n<li><p>If it was set as a <code class=\"codespan\">Function</code>, it refers to a callback function, for instance:</p>\n</li>\n</ul>\n<pre><code class=\"lang-javascript\">formatter: function (value) {\n    return &#39;aaaa&#39; + value + &#39;bbbb&#39;;\n}\n</code></pre>\n"}}},{"type":["Object"],"description":"<p><strong>Piecewise visualMap component (visualMapPiecewise) </strong></p>\n<p> (Reference to <a href=\"#visualMap\">the introduction of visual Map component (visualMap)</a>)</p>\n<p>Sample:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-visualMap-piecewise&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n\n<p>Piecewise visualMap component works in one of the three modes:</p>\n<ul>\n<li><strong>CONTINUOUS-AVERAGE</strong>: The series.data is continuous and is divided into pieces averagely according to <a href=\"#visualMap-piecewise.splitNumber\">visualMap-piecewise.splitNumber</a>.</li>\n<li><strong>CONTINUOUS-CUSTOMIZED</strong>: The series.data is continuous and is divided into pieces according to the given rule defined in <a href=\"#visualMap-piecewise.pieces\">visualMap-piecewise.pieces</a>.</li>\n<li><strong>CATEGORY</strong>: The series.data is discrete and is categorized according to <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a>.</li>\n</ul>\n<p><br>\n<br></p>\n","properties":{"type":{"type":["string"],"description":"<p>Used to determine it is a piecewise visualMap component.</p>\n","default":"piecewise"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"splitNumber":{"type":["number"],"description":"<p>Continuous data can be divide into pieces averagely according to splitNumber, that is, if splitNumber is 5, data will be sliced into 5 pieces.</p>\n<p>The range of continuous data should be defined by <a href=\"#visualMap-piecewise.max\">max</a> and <a href=\"#visualMap-piecewise.min\">min</a>.</p>\n<p>If <a href=\"#visualMap-piecewise.pieces\">visualMap-piecewise.pieces</a> or <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is set up, the <code class=\"codespan\">splitNumber</code> will not be used any more.</p>\n","default":5},"pieces":{"type":["Array"],"description":"<p>Used to customize how to slice continuous data, and some specific view style for some pieces. For instance:</p>\n<pre><code class=\"lang-javascript\">pieces: [\n    // Range of a piece can be specified by property min and max,\n    // where min will be set as -Infinity if ignored,\n    // and max will be set as Infinity if ignored.\n    {min: 1500},\n    {min: 900, max: 1500},\n    {min: 310, max: 1000},\n    {min: 200, max: 300},\n    // Label of the piece can be specified.\n    {min: 10, max: 200, label: &#39;10 to 200 (custom label) &#39;},\n    // Color of the piece can be specified.\n    {value: 123, label: &#39;123 (custom special color) &#39;, color: &#39;grey&#39;},\n    {max: 5}\n]\n</code></pre>\n<p>These visual channel can be customized in each piece:</p>\n<ul>\n<li><code class=\"codespan\">symbol</code>: Type of symbol.</li>\n<li><code class=\"codespan\">symbolSize</code>: Symbol size.</li>\n<li><code class=\"codespan\">color</code>: Symbol color.</li>\n<li><code class=\"codespan\">colorAlpha</code>: Symbol alpha channel.</li>\n<li><code class=\"codespan\">opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code class=\"codespan\">colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<p><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/map-visualMap-pieces&amp;edit=1&amp;reset=1\" target=\"_blank\">Sample</a></p>\n<p> (Notes: In ECharts2, <code class=\"codespan\">pieces</code> is called <code class=\"codespan\">splitList</code>, which is retained in ECharts3 for compatibility. But <code class=\"codespan\">pieces</code> is recommended.)</p>\n<p>You would realize the sequence in <code class=\"codespan\">pieces</code> by a simple trial. See more detailed rules in <a href=\"#visualMap.inverse\">visualMap.inverse</a>.</p>\n"},"categories":{"type":["Array"],"description":"<p>When dataValues in series.data (specified by <a href=\"#visualMap-piecewise.dimension\">visualMap-piecewise.dimension</a>) are discrete (or also known as category data or enumerable data), and we intend to perform <strong>Table Mapping</strong> from dataValue to visual channels, <code class=\"codespan\">categories</code> is used to describe the entire enumeration of data. For instance:</p>\n<pre><code class=\"lang-javascript\">categories: [\n    &#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;\n],\n</code></pre>\n<p><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/scatter-visualMap-categories&amp;edit=1&amp;reset=1\" target=\"_blank\">Sample</a></p>\n<p>You would realize the sequence in <code class=\"codespan\">categories</code> by a simple trial. See more detailed rules in <a href=\"#visualMap.inverse\">visualMap.inverse</a>.</p>\n"},"min":{"type":["number"],"description":"<p>Specify the min dataValue for the visualMap component. <code class=\"codespan\">[visualMap.min, visualMax.max]</code> make up the domain of viusul mapping.</p>\n<p>In <strong>CONTINUOUS-CUSTOMIZED</strong> mode (i.e., <a href=\"#visualMap-piecewise.pieces\">visualMap-piecewise.pieces</a> is used) or <strong>CATEGORY</strong> mode (i.e., <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is used), <code class=\"codespan\">max</code> and <code class=\"codespan\">min</code> doesn&#39;t need to be specified.</p>\n<p>In <strong>CONTINUOUS-AVERAGE</strong> mode (i.e., <a href=\"#visualMap-piecewise.splitNumber\">visualMap-piecewise.splitNumber</a> is used), they should be specified explicitly, and be <code class=\"codespan\">[0, 200]</code> by default, but not <code class=\"codespan\">dataMin</code> and <code class=\"codespan\">dataMax</code> in series.data.</p>\n"},"max":{"type":["number"],"description":"<p>Specify the max dataValue for the visualMap component. <code class=\"codespan\">[visualMap.min, visualMax.max]</code> make up the domain of viusul mapping.</p>\n<p>In <strong>CONTINUOUS-CUSTOMIZED</strong> mode (i.e., <a href=\"#visualMap-piecewise.pieces\">visualMap-piecewise.pieces</a> is used) or <strong>CATEGORY</strong> mode (i.e., <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is used), <code class=\"codespan\">max</code> and <code class=\"codespan\">min</code> doesn&#39;t need to be specified.</p>\n<p>In <strong>CONTINUOUS-AVERAGE</strong> mode (i.e., <a href=\"#visualMap-piecewise.splitNumber\">visualMap-piecewise.splitNumber</a> is used), they should be specified explicitly, and be <code class=\"codespan\">[0, 200]</code> by default, but not <code class=\"codespan\">dataMin</code> and <code class=\"codespan\">dataMax</code> in series.data.</p>\n"},"minOpen":{"type":["boolean"],"description":"<p>This option works when <code class=\"codespan\">type</code> is <code class=\"codespan\">piecewise</code> and <code class=\"codespan\">min</code>/<code class=\"codespan\">max</code>/<code class=\"codespan\">splitNumber</code> are set.</p>\n<p>If it is set as <code class=\"codespan\">true</code>, an extra piece labeled with &quot;&lt; min&quot; will show.</p>\n"},"maxOpen":{"type":["boolean"],"description":"<p>This option works when <code class=\"codespan\">type</code> is <code class=\"codespan\">piecewise</code> and <code class=\"codespan\">min</code>/<code class=\"codespan\">max</code>/<code class=\"codespan\">splitNumber</code> are set.</p>\n<p>If it is set as <code class=\"codespan\">true</code>, an extra piece labeled with &quot;&gt; max&quot; will show.</p>\n"},"selectedMode":{"type":["string"],"description":"<p>Selected Mode could be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;multiple&#39;</code> (multiple selection).</li>\n<li><code class=\"codespan\">&#39;single&#39;</code> (single selection).</li>\n</ul>\n","default":"'multiple'"},"inverse":{"type":["boolean"],"description":"<p>Whether to inverse the layout of visualMap component.</p>\n<ul>\n<li><p>In <strong>CONTINUOUS-AVERAGE</strong> mode (i.e., <a href=\"#visualMap-piecewise.splitNumber\">visualMap-piecewise.splitNumber</a> is used), the rule of data layout is the same as <a href=\"#visualMap-continuous.inverse\">visualMap-continuous.inverse</a>.</p>\n</li>\n<li><p>In <strong>CONTINUOUS-CUSTOMIZED</strong> mode (i.e., <a href=\"#visualMap-piecewise.pieces\">visualMap-piecewise.pieces</a> is used) or <strong>CATEGORY</strong> mode (i.e., <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is used), the layout of each piece is determined by the their order in the definition of <code class=\"codespan\">pieces</code> or <code class=\"codespan\">categories</code>, namely:</p>\n<ul>\n<li><p>When <code class=\"codespan\">inverse</code> is <code class=\"codespan\">false</code>:</p>\n<ul>\n<li><p>When <a href=\"#visualMap.orient\">visualMap.orient</a> is <code class=\"codespan\">&#39;vertical&#39;</code>, pieces[0] or categories[0] correspond to upward side.</p>\n</li>\n<li><p>When <a href=\"#visualMap.orient\">visualMap.orient</a> is <code class=\"codespan\">&#39;horizontal&#39;</code>, pieces[0] or categories[0] correspond to left side.</p>\n</li>\n</ul>\n</li>\n<li><p>When <code class=\"codespan\">inverse</code> is <code class=\"codespan\">true</code>, the results are opposite to above.</p>\n</li>\n</ul>\n</li>\n</ul>\n<p>If you just have a try, you&#39;ll know it is not so complicated.</p>\n","default":false},"precision":{"type":["number"],"description":"<p>The decimal precision of label, defaults to be 0 (no decimals).</p>\n<ul>\n<li><p>In <strong>CONTINUOUS-AVERAGE</strong> mode (i.e., <a href=\"#visualMap-piecewise.splitNumber\">visualMap-piecewise.splitNumber</a> is used), the rule of data layout is the same as <a href=\"#visualMap-continuous.inverse\">visualMap-continuous.inverse</a>, decimal percision auto adapts to series.data.</p>\n</li>\n<li><p>In <strong>CONTINUOUS-CUSTOMIZED</strong> mode (i.e., <a href=\"#visualMap-piecewise.pieces\">visualMap-piecewise.pieces</a> is used) or <strong>CATEGORY</strong> mode (i.e., <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is used), decimal percision defaults to be 0 (no decimals):</p>\n</li>\n</ul>\n","default":null},"itemWidth":{"type":["number"],"description":"<p>The width of each graphical element that represents a piece.</p>\n","default":20},"itemHeight":{"type":["number"],"description":"<p>The height of each graphical element that represents a piece.</p>\n","default":14},"align":{"type":["string"],"description":"<p>The layout relationship between the graphical elements for pieces and their labels. Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;auto&#39;</code> Decide automatically.</li>\n<li><code class=\"codespan\">&#39;left&#39;</code> The graphical elements for pieces are on the left and their labels are on the right.</li>\n<li><code class=\"codespan\">&#39;right&#39;</code> The graphical elements for pieces are on the right and their labels are on the left.</li>\n</ul>\n","default":"'auto'"},"text":{"type":["Array"],"description":"<p>The label text on both ends, such as <code class=\"codespan\">[&#39;High&#39;, &#39;Low&#39;]</code>. <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/map-visualMap-piecewise-text&amp;edit=1&amp;reset=1\" target=\"_blank\">Sample</a>.</p>\n<p>You can understand the order of items in <code class=\"codespan\">text</code> array just by a simple trial. See <a href=\"#visualMap.inverse\">visualMap.inverse</a>.</p>\n<p>The rule, that labels will not show when <code class=\"codespan\">text</code> is use, is retained for compatibility with ECharts2.</p>\n","default":null},"textGap":{"type":["number"],"description":"<p>The distance between the ends of the graphical elements for pieces and the labels, with unit px. See <a href=\"#visualMap-piecewise.text\">visualMap-piecewise.text</a></p>\n","default":10},"showLabel":{"type":["boolean"],"description":"<p>Whether to show label of each item. By default, label will not be shown when <a href=\"#visualMap-piecewise.text\">visualMap-piecewise.text</a> used, otherwise label will be shown.</p>\n"},"itemGap = 10":{"type":["*"],"description":"<p>Its the distance between each two graphical elements for pieces. The unit is px.</p>\n"},"itemSymbol":{"type":["string"],"description":"<p>Default symbol (the shape of graphical element). Possible values are:</p>\n<p><code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>The setting of visual channel <code class=\"codespan\">symbol</code> can refer to <a href=\"#visualMap-piecewise.inRange\">visualMap-piecewise.inRange</a> and <a href=\"#visualMap-piecewise.outOfRange\">visualMap-piecewise.outOfRange</a>.</p>\n<p>When they are not specified, <code class=\"codespan\">itemSymbol</code> is adopted as the default value (but just used in visualMap component itself, not in chart).</p>\n","default":"'roundRect'"},"show":{"type":["boolean"],"description":"<p>Whether to show visualMap-piecewise component. If set as <code class=\"codespan\">false</code>, visualMap-piecewise component will not show, but it can still perform visual mapping from dataValue to visual channel in chart.</p>\n","default":true},"dimension":{"type":["string"],"description":"<p>Specify which dimension should be used to fetch dataValue from <a href=\"#series.data\">series.data</a>, and then map them to visual channel.</p>\n<p><a href=\"#series.data\">series.data</a> can be regarded as a two-dimensional array, for instance:</p>\n<pre><code class=\"lang-javascript\">[\n    [12, 23, 43],\n    [12, 23, 43],\n    [43, 545, 65],\n    [92, 23, 33]\n]\n</code></pre>\n<p>Each column of the above array is regarded as a <code class=\"codespan\">dimension</code>. For example, when property <code class=\"codespan\">dimension</code> is set to 1, the second column (i.e., 23, 23, 545, 23) is chosen to perform visual mapping.</p>\n<p>Use the last dimension of <code class=\"codespan\">data</code> by default.</p>\n"},"seriesIndex":{"type":["number","Array"],"description":"<p>Specify visual mapping should be performed on which series, from which\n<a href=\"#series.data\">series.data</a> is fetched.</p>\n<p>All series are used by default.</p>\n"},"hoverLink":{"type":["boolean"],"description":"<p><code class=\"codespan\">hoverLink</code> enable highlight certain graphical elements of chart when mouse hovers on some place of <code class=\"codespan\">visualMap</code> component that is coresponding to those graphical elements by visual mapping.</p>\n<p>Inversely, when mouse hovers a graphical element of chart, its value label will be displayed on its corresponding position in <code class=\"codespan\">visualMap</code>.</p>\n","default":true},"inRange":{"type":["Object"],"description":"<p>Define visual channels that will mapped from dataValues that are <strong>in selected range</strong>. (User can interact with visualMap component and make a seleced range by mouse or touch.)</p>\n<p>Possiable visual channels includes:</p>\n<ul>\n<li><code class=\"codespan\">symbol</code>: Type of symbol.</li>\n<li><code class=\"codespan\">symbolSize</code>: Symbol size.</li>\n<li><code class=\"codespan\">color</code>: Symbol color.</li>\n<li><code class=\"codespan\">colorAlpha</code>: Symbol alpha channel.</li>\n<li><code class=\"codespan\">opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code class=\"codespan\">colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<hr>\n<p><code class=\"codespan\">inRange</code> could customize visual channels both in series (by <a href=\"#visualMap-piecewise.seriesIndex\">visualMap-piecewise.seriesIndex</a>) and in <code class=\"codespan\">visualMap-piecewise</code> itself.</p>\n<p>For instance, if a <code class=\"codespan\">visualMap-piecewise</code> component is used on a scatter chart, the mapping approach from data to <code class=\"codespan\">color</code> (or <code class=\"codespan\">symbol</code>, <code class=\"codespan\">size</code>, ...) can be both customized in the scatter chart and <code class=\"codespan\">visualMap-piecewise</code> component itself. See the code as following:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels both in target series and visualMap-piecewise component itself:\n        inRange: {\n            color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n            symbolSize: [30, 100]\n        }\n    }\n]\n</code></pre>\n<p>If you want to define visual channels for target series and visualMap-piecewise component separately, you should do as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels only for target series.\n        target: {\n            inRange: {\n                color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n                symbolSize: [60, 200]\n            }\n        },\n        // Define visual channels only for visualMap-piecewise component.\n        controller: {\n            inRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n</code></pre>\n<p>Or define as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels for both target series and visualMap-piecewise component.\n        inRange: {\n            color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n            symbolSize: [60, 200]\n        },\n        // Define visual channels only for visualMap-piecewise component, which\n        // will overlap the properties with the same name in the above common\n        // definition. (symbolSize is overlapped by [30, 100] while color\n        // keeps the original value)\n        controller: {\n            inRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>✦ About visual channels ✦</strong></p>\n<ul>\n<li><p>Various visual channels (such as <code class=\"codespan\">color</code>、<code class=\"codespan\">symbolSize</code> and ect.) can be defined in inRange at the same time and all of them will be apopted.</p>\n</li>\n<li><p>Basically visual channels <code class=\"codespan\">opacity</code> is recommended, rather than <code class=\"codespan\">colorAlpha</code>. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.</p>\n</li>\n<li><p>There are two approaches of visual mapping supported: &#39;Linear Mapping&#39; and &#39;Table Mapping&#39;.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>✦ Linear Mapping to visual channel ✦</strong></p>\n<p><code class=\"codespan\">Linear Mapping</code> means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of <code class=\"codespan\">[visaulMap.min, visualMap.max]</code> to a given range of <code class=\"codespan\">[visual value 1, visual value 2]</code> and obtaining a final value (say visual value) for visual channel rendering.</p>\n<p>For instance, <code class=\"codespan\">[visualMap.min, visualMap.max]</code> is set to be <code class=\"codespan\">[0, 100]</code>, and there is series.data: <code class=\"codespan\">[50, 10, 100]</code>. We intend to map them to an <code class=\"codespan\">opacity</code> range <code class=\"codespan\">[0.4, 1]</code>, by which the size of value can be demostrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values <code class=\"codespan\">[0.7, 0.44, 1]</code>, cooresponding to each dataValue.</p>\n<p>We can also set the visual range inversely, such as <code class=\"codespan\">opacity: [1, 0.4]</code>, and the final mapping result for the given series.data above will be <code class=\"codespan\">[0.7, 0.96, 0.4]</code>.</p>\n<p>Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by default, but not <code class=\"codespan\">dataMin</code> and <code class=\"codespan\">dataMax</code> in series.data.</p>\n<p>How to configure visualMap component to do Linear Mapping?</p>\n<ul>\n<li><p>When use <a href=\"#visualMap-continuous\">visualMap-continuous</a>, or</p>\n</li>\n<li><p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is not used.</p>\n</li>\n</ul>\n<p>About the value of visual channel (visual value):</p>\n<ul>\n<li><p>Basically <code class=\"codespan\">Array</code> is used to express the range of visual value, e.g., <code class=\"codespan\">color: [&#39;#333&#39;, &#39;#777&#39;]</code>.</p>\n</li>\n<li><p>Single <code class=\"codespan\">number</code> or single <code class=\"codespan\">string</code> can also be used, which will be converted to an <code class=\"codespan\">Array</code> by visualMap component. e.g.:  <code class=\"codespan\">opacity: 0.4</code> will be converted to <code class=\"codespan\">opacity: [0.4, 0.4]</code>, <code class=\"codespan\">color: &#39;#333&#39;</code> will be converted to <code class=\"codespan\">color: [&#39;#333&#39;, &#39;#333&#39;]</code>.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">symbolSize</code>, <code class=\"codespan\">opacity</code>, <code class=\"codespan\">colorAlpha</code>, <code class=\"codespan\">colorLightness</code>, <code class=\"codespan\">colorSaturation</code>, <code class=\"codespan\">colorHue</code>, the range of visual value is always in the form of: <code class=\"codespan\">[visual value of visualMap.min, visual value of visualMap.max]</code>. For example, <code class=\"codespan\">colorLightness: [0.8, 0.2]</code> means that the dataValue in series.data that equals to <code class=\"codespan\">visualMap.min</code> (if any) will be mapped to lightness <code class=\"codespan\">0.8</code>, and the dataValue that equals to <code class=\"codespan\">visualMap.max</code> (if any) will be mapped to lightness <code class=\"codespan\">0.2</code>, and other dataValues will be mapped by the linear calculateion based on the domain of <code class=\"codespan\">[visualMap.min, visualMap.max]</code> and the range of <code class=\"codespan\">[0.8, 0.2]</code>.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">color</code>, array is used, like: <code class=\"codespan\">[&#39;#333&#39;, &#39;#78ab23&#39;, &#39;blue&#39;]</code>, which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to <code class=\"codespan\">visualMap.min</code> will be mapped onto <code class=\"codespan\">&#39;#333&#39;</code>, the dataValue that equals to <code class=\"codespan\">visualMap.max</code> will be mapped onto <code class=\"codespan\">&#39;blue&#39;</code>, and other dataValues will be piecewisely interpolated to get the final color.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">symbol</code>, array is used, like: <code class=\"codespan\">[&#39;circle&#39;, &#39;rect&#39;, &#39;diamond&#39;]</code>, where the dataValue that equals to <code class=\"codespan\">visualMap.min</code> will be mapped onto <code class=\"codespan\">&#39;circle&#39;</code>, the dataValue that equals to <code class=\"codespan\">visualMap.max</code> will be mapped onto <code class=\"codespan\">&#39;diamond&#39;</code>, and other dataValues will be caculated based on the numerical distance to <code class=\"codespan\">visualMax.min</code> and to <code class=\"codespan\">visualMap.max</code>, and mapped onto one of <code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>.</p>\n</li>\n</ul>\n<p>About the possible value range of visual value:</p>\n<ul>\n<li><p><code class=\"codespan\">opacity</code>、<code class=\"codespan\">colorAlpha</code>、<code class=\"codespan\">colorLightness</code>、<code class=\"codespan\">colorSaturation</code>、<code class=\"codespan\">visual value</code></p>\n<p>  possible value range is <code class=\"codespan\">[0, 1]</code>.</p>\n</li>\n<li><p><code class=\"codespan\">colorHue</code>:</p>\n<p>  possible value range is <code class=\"codespan\">[0, 360]</code>.</p>\n</li>\n<li><p><code class=\"codespan\">color</code>:</p>\n<p>  color can use RGB expression, like <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>, or RGBA expression, like <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>, or Hex expression, like &#39;#ccc&#39;.</p>\n</li>\n<li><p><code class=\"codespan\">symbol</code>:</p>\n</li>\n</ul>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p><br></p>\n<hr>\n<p><strong>✦ Table Mapping to visual channel ✦</strong></p>\n<p><code class=\"codespan\">Table Mapping</code> could be used when dataValue (values in series.data, specified by <a href=\"#visualMap.dimension\">visualMap.dimension</a>) is enumerable and we intend to map them to visual value by looking up a given table.</p>\n<p>For instance, in a <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> component, <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is set to <code class=\"codespan\">[&#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. And there is series.data: <code class=\"codespan\">[&#39;Demon Hunter&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. Then we can establish the lookup rule for color: <code class=\"codespan\">color: {&#39;Warden&#39;: &#39;red&#39;, &#39;Demon Hunter&#39;: &#39;black&#39;}</code>, by which the <code class=\"codespan\">visualMap</code> component will map <code class=\"codespan\">dataValue</code> to <code class=\"codespan\">color</code>.</p>\n<p>How to configure <code class=\"codespan\">visualMap</code> component to do <code class=\"codespan\">Table Mapping</code>?</p>\n<p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a>is set.</p>\n<p>About the value of visual channel (visual value):</p>\n<p>Generally <code class=\"codespan\">Object</code> or <code class=\"codespan\">Array</code> is used, for instance:</p>\n<pre><code class=\"lang-javascript\">visualMap: {\n    type: &#39;piecewise&#39;,\n    // categories defines the items that to be displayed in visualMap-piecewise component.\n    categories: [\n        &#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;\n    ],\n    inRange: {\n        // visual value can be an Object:\n        color: {\n            &#39;Warden&#39;: &#39;red&#39;,\n            &#39;Demon Hunter&#39;: &#39;black&#39;,\n            &#39;&#39;: &#39;green&#39; // Blank string means that except &#39;Warden&#39; and &#39;Demon Hunter&#39;,\n                        // all other dataValues should be mapped to &#39;green&#39;.\n        }\n        // visual value can also be a single value,\n        // means that all dataValues should be mapped to the value.\n        color: &#39;green&#39;,\n        // visual value can also be a array, with the same length\n        // as the array of categories and one-one mapping onto it.\n        color: [&#39;red&#39;, &#39;black&#39;, &#39;green&#39;, &#39;yellow&#39;, &#39;white&#39;]\n    }\n}\n</code></pre>\n<p><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/scatter-visualMap-categories&amp;edit=1&amp;reset=1\" target=\"_blank\">Example</a></p>\n<hr>\n<p><strong>✦ How to modity configurations of vsiual encoding? ✦</strong></p>\n<p>If you want to modify the configurations of visual encoding after chart been rendered (by invoke <code class=\"codespan\">setOption</code> to set the initial <code class=\"codespan\">option</code>), <code class=\"codespan\">setOption</code> can be used again to modify configurations of visual encoding. For instance:</p>\n<pre><code class=\"lang-javascript\">chart.setOption({\n    visualMap: {\n        inRange: {color: [&#39;red&#39;, &#39;blue&#39;]}\n    }\n});\n</code></pre>\n<p>Notice:</p>\n<ul>\n<li><p>These visualMap properties (i.e. <code class=\"codespan\">inRange</code>, <code class=\"codespan\">outOfRange</code>, <code class=\"codespan\">target</code>, <code class=\"codespan\">controller</code>) do not support &quot;merge&quot;, that is, anyone among them is modified when use <code class=\"codespan\">setOption</code> again, all of the original values of them will not be kept but erased. The &quot;merge&quot; brings complication in implemnentation and understanding, whereas &quot;erase all&quot; normalize the practise: once you want to modify some visual values, you should pass all of them to <code class=\"codespan\">setOption</code>, no matter they are to be changed.</p>\n</li>\n<li><p>This way, <code class=\"codespan\">getOption() -&gt; modify the gotten option -&gt; setOption(modified option)</code>, is strongly <strong>not recommended</strong>, for instance:</p>\n</li>\n</ul>\n<pre><code class=\"lang-javascript\">// Not recommended approach, regardless of its correctness:\n\nvar option = chart.getOption(); // Get the entire option.\noption.visualMap.inRange.color = [&#39;red&#39;, &#39;blue&#39;]; // modify color, which is what you want.\n\n// You have to modify those two properties, otherwise you will not get what you want.\noption.visualMap.target.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\noption.visualMap.controller.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\n\nchart.setOption(option); // set the modified option back.\n// You should not use this approach, but use the\n// approach demostrated before this example.\n</code></pre>\n<p><strong>Notice:</strong> There is default color <code class=\"codespan\">[&#39;#f6efa6&#39;, &#39;#d88273&#39;, &#39;#bf444c&#39;]</code> in <code class=\"codespan\">inRange</code> if you not set <code class=\"codespan\">inRange</code>. If you dont want it, set <code class=\"codespan\">inRange: {color: null}</code> to disable it.</p>\n"},"outOfRange":{"type":["Object"],"description":"<p>Define visual channels that will mapped from dataValues that are <strong>out of selected range</strong>. (User can interact with visualMap component and make a seleced range by mouse or touch.)</p>\n<p>Possiable visual channels includes:</p>\n<ul>\n<li><code class=\"codespan\">symbol</code>: Type of symbol.</li>\n<li><code class=\"codespan\">symbolSize</code>: Symbol size.</li>\n<li><code class=\"codespan\">color</code>: Symbol color.</li>\n<li><code class=\"codespan\">colorAlpha</code>: Symbol alpha channel.</li>\n<li><code class=\"codespan\">opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code class=\"codespan\">colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<p><code class=\"codespan\">outOfRange</code> could customize visual channels both in series (by <a href=\"#visualMap-piecewise.seriesIndex\">visualMap-piecewise.seriesIndex</a>) and in <code class=\"codespan\">visualMap-piecewise</code> itself.</p>\n<p>For instance, if a <code class=\"codespan\">visualMap-piecewise</code> component is used on a scatter chart, the mapping approach from data to <code class=\"codespan\">color</code> (or <code class=\"codespan\">symbol</code>, <code class=\"codespan\">size</code>, ...) can be both customized in the scatter chart and <code class=\"codespan\">visualMap-piecewise</code> component itself. See the code as following:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels both in target series and visualMap-piecewise component itself:\n        outOfRange: {\n            color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n            symbolSize: [30, 100]\n        }\n    }\n]\n</code></pre>\n<p>If you want to define visual channels for target series and visualMap-piecewise component separately, you should do as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels only for target series.\n        target: {\n            outOfRange: {\n                color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n                symbolSize: [60, 200]\n            }\n        },\n        // Define visual channels only for visualMap-piecewise component.\n        controller: {\n            outOfRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n</code></pre>\n<p>Or define as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels for both target series and visualMap-piecewise component.\n        outOfRange: {\n            color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n            symbolSize: [60, 200]\n        },\n        // Define visual channels only for visualMap-piecewise component, which\n        // will overlap the properties with the same name in the above common\n        // definition. (symbolSize is overlapped by [30, 100] while color\n        // keeps the original value)\n        controller: {\n            outOfRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>✦ About visual channels ✦</strong></p>\n<ul>\n<li><p>Various visual channels (such as <code class=\"codespan\">color</code>、<code class=\"codespan\">symbolSize</code> and ect.) can be defined in outOfRange at the same time and all of them will be apopted.</p>\n</li>\n<li><p>Basically visual channels <code class=\"codespan\">opacity</code> is recommended, rather than <code class=\"codespan\">colorAlpha</code>. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.</p>\n</li>\n<li><p>There are two approaches of visual mapping supported: &#39;Linear Mapping&#39; and &#39;Table Mapping&#39;.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>✦ Linear Mapping to visual channel ✦</strong></p>\n<p><code class=\"codespan\">Linear Mapping</code> means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of <code class=\"codespan\">[visaulMap.min, visualMap.max]</code> to a given range of <code class=\"codespan\">[visual value 1, visual value 2]</code> and obtaining a final value (say visual value) for visual channel rendering.</p>\n<p>For instance, <code class=\"codespan\">[visualMap.min, visualMap.max]</code> is set to be <code class=\"codespan\">[0, 100]</code>, and there is series.data: <code class=\"codespan\">[50, 10, 100]</code>. We intend to map them to an <code class=\"codespan\">opacity</code> range <code class=\"codespan\">[0.4, 1]</code>, by which the size of value can be demostrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values <code class=\"codespan\">[0.7, 0.44, 1]</code>, cooresponding to each dataValue.</p>\n<p>We can also set the visual range inversely, such as <code class=\"codespan\">opacity: [1, 0.4]</code>, and the final mapping result for the given series.data above will be <code class=\"codespan\">[0.7, 0.96, 0.4]</code>.</p>\n<p>Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by default, but not <code class=\"codespan\">dataMin</code> and <code class=\"codespan\">dataMax</code> in series.data.</p>\n<p>How to configure visualMap component to do Linear Mapping?</p>\n<ul>\n<li><p>When use <a href=\"#visualMap-continuous\">visualMap-continuous</a>, or</p>\n</li>\n<li><p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is not used.</p>\n</li>\n</ul>\n<p>About the value of visual channel (visual value):</p>\n<ul>\n<li><p>Basically <code class=\"codespan\">Array</code> is used to express the range of visual value, e.g., <code class=\"codespan\">color: [&#39;#333&#39;, &#39;#777&#39;]</code>.</p>\n</li>\n<li><p>Single <code class=\"codespan\">number</code> or single <code class=\"codespan\">string</code> can also be used, which will be converted to an <code class=\"codespan\">Array</code> by visualMap component. e.g.:  <code class=\"codespan\">opacity: 0.4</code> will be converted to <code class=\"codespan\">opacity: [0.4, 0.4]</code>, <code class=\"codespan\">color: &#39;#333&#39;</code> will be converted to <code class=\"codespan\">color: [&#39;#333&#39;, &#39;#333&#39;]</code>.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">symbolSize</code>, <code class=\"codespan\">opacity</code>, <code class=\"codespan\">colorAlpha</code>, <code class=\"codespan\">colorLightness</code>, <code class=\"codespan\">colorSaturation</code>, <code class=\"codespan\">colorHue</code>, the range of visual value is always in the form of: <code class=\"codespan\">[visual value of visualMap.min, visual value of visualMap.max]</code>. For example, <code class=\"codespan\">colorLightness: [0.8, 0.2]</code> means that the dataValue in series.data that equals to <code class=\"codespan\">visualMap.min</code> (if any) will be mapped to lightness <code class=\"codespan\">0.8</code>, and the dataValue that equals to <code class=\"codespan\">visualMap.max</code> (if any) will be mapped to lightness <code class=\"codespan\">0.2</code>, and other dataValues will be mapped by the linear calculateion based on the domain of <code class=\"codespan\">[visualMap.min, visualMap.max]</code> and the range of <code class=\"codespan\">[0.8, 0.2]</code>.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">color</code>, array is used, like: <code class=\"codespan\">[&#39;#333&#39;, &#39;#78ab23&#39;, &#39;blue&#39;]</code>, which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to <code class=\"codespan\">visualMap.min</code> will be mapped onto <code class=\"codespan\">&#39;#333&#39;</code>, the dataValue that equals to <code class=\"codespan\">visualMap.max</code> will be mapped onto <code class=\"codespan\">&#39;blue&#39;</code>, and other dataValues will be piecewisely interpolated to get the final color.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">symbol</code>, array is used, like: <code class=\"codespan\">[&#39;circle&#39;, &#39;rect&#39;, &#39;diamond&#39;]</code>, where the dataValue that equals to <code class=\"codespan\">visualMap.min</code> will be mapped onto <code class=\"codespan\">&#39;circle&#39;</code>, the dataValue that equals to <code class=\"codespan\">visualMap.max</code> will be mapped onto <code class=\"codespan\">&#39;diamond&#39;</code>, and other dataValues will be caculated based on the numerical distance to <code class=\"codespan\">visualMax.min</code> and to <code class=\"codespan\">visualMap.max</code>, and mapped onto one of <code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>.</p>\n</li>\n</ul>\n<p>About the possible value range of visual value:</p>\n<ul>\n<li><p><code class=\"codespan\">opacity</code>、<code class=\"codespan\">colorAlpha</code>、<code class=\"codespan\">colorLightness</code>、<code class=\"codespan\">colorSaturation</code>、<code class=\"codespan\">visual value</code></p>\n<p>  possible value range is <code class=\"codespan\">[0, 1]</code>.</p>\n</li>\n<li><p><code class=\"codespan\">colorHue</code>:</p>\n<p>  possible value range is <code class=\"codespan\">[0, 360]</code>.</p>\n</li>\n<li><p><code class=\"codespan\">color</code>:</p>\n<p>  color can use RGB expression, like <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>, or RGBA expression, like <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>, or Hex expression, like &#39;#ccc&#39;.</p>\n</li>\n<li><p><code class=\"codespan\">symbol</code>:</p>\n</li>\n</ul>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p><br></p>\n<hr>\n<p><strong>✦ Table Mapping to visual channel ✦</strong></p>\n<p><code class=\"codespan\">Table Mapping</code> could be used when dataValue (values in series.data, specified by <a href=\"#visualMap.dimension\">visualMap.dimension</a>) is enumerable and we intend to map them to visual value by looking up a given table.</p>\n<p>For instance, in a <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> component, <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is set to <code class=\"codespan\">[&#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. And there is series.data: <code class=\"codespan\">[&#39;Demon Hunter&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. Then we can establish the lookup rule for color: <code class=\"codespan\">color: {&#39;Warden&#39;: &#39;red&#39;, &#39;Demon Hunter&#39;: &#39;black&#39;}</code>, by which the <code class=\"codespan\">visualMap</code> component will map <code class=\"codespan\">dataValue</code> to <code class=\"codespan\">color</code>.</p>\n<p>How to configure <code class=\"codespan\">visualMap</code> component to do <code class=\"codespan\">Table Mapping</code>?</p>\n<p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a>is set.</p>\n<p>About the value of visual channel (visual value):</p>\n<p>Generally <code class=\"codespan\">Object</code> or <code class=\"codespan\">Array</code> is used, for instance:</p>\n<pre><code class=\"lang-javascript\">visualMap: {\n    type: &#39;piecewise&#39;,\n    // categories defines the items that to be displayed in visualMap-piecewise component.\n    categories: [\n        &#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;\n    ],\n    outOfRange: {\n        // visual value can be an Object:\n        color: {\n            &#39;Warden&#39;: &#39;red&#39;,\n            &#39;Demon Hunter&#39;: &#39;black&#39;,\n            &#39;&#39;: &#39;green&#39; // Blank string means that except &#39;Warden&#39; and &#39;Demon Hunter&#39;,\n                        // all other dataValues should be mapped to &#39;green&#39;.\n        }\n        // visual value can also be a single value,\n        // means that all dataValues should be mapped to the value.\n        color: &#39;green&#39;,\n        // visual value can also be a array, with the same length\n        // as the array of categories and one-one mapping onto it.\n        color: [&#39;red&#39;, &#39;black&#39;, &#39;green&#39;, &#39;yellow&#39;, &#39;white&#39;]\n    }\n}\n</code></pre>\n<p><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/scatter-visualMap-categories&amp;edit=1&amp;reset=1\" target=\"_blank\">Example</a></p>\n<hr>\n<p><strong>✦ How to modity configurations of vsiual encoding? ✦</strong></p>\n<p>If you want to modify the configurations of visual encoding after chart been rendered (by invoke <code class=\"codespan\">setOption</code> to set the initial <code class=\"codespan\">option</code>), <code class=\"codespan\">setOption</code> can be used again to modify configurations of visual encoding. For instance:</p>\n<pre><code class=\"lang-javascript\">chart.setOption({\n    visualMap: {\n        inRange: {color: [&#39;red&#39;, &#39;blue&#39;]}\n    }\n});\n</code></pre>\n<p>Notice:</p>\n<ul>\n<li><p>These visualMap properties (i.e. <code class=\"codespan\">inRange</code>, <code class=\"codespan\">outOfRange</code>, <code class=\"codespan\">target</code>, <code class=\"codespan\">controller</code>) do not support &quot;merge&quot;, that is, anyone among them is modified when use <code class=\"codespan\">setOption</code> again, all of the original values of them will not be kept but erased. The &quot;merge&quot; brings complication in implemnentation and understanding, whereas &quot;erase all&quot; normalize the practise: once you want to modify some visual values, you should pass all of them to <code class=\"codespan\">setOption</code>, no matter they are to be changed.</p>\n</li>\n<li><p>This way, <code class=\"codespan\">getOption() -&gt; modify the gotten option -&gt; setOption(modified option)</code>, is strongly <strong>not recommended</strong>, for instance:</p>\n</li>\n</ul>\n<pre><code class=\"lang-javascript\">// Not recommended approach, regardless of its correctness:\n\nvar option = chart.getOption(); // Get the entire option.\noption.visualMap.inRange.color = [&#39;red&#39;, &#39;blue&#39;]; // modify color, which is what you want.\n\n// You have to modify those two properties, otherwise you will not get what you want.\noption.visualMap.target.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\noption.visualMap.controller.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\n\nchart.setOption(option); // set the modified option back.\n// You should not use this approach, but use the\n// approach demostrated before this example.\n</code></pre>\n"},"controller":{"type":["Object"],"description":"<p>Property <code class=\"codespan\">inRange</code> and <code class=\"codespan\">outOfRange</code> can be set within property <code class=\"codespan\">controller</code>, which means those <code class=\"codespan\">inRange</code> and <code class=\"codespan\">outOfRange</code> are only used on the controller (<code class=\"codespan\">visualMap</code> component itself), but are not used on chart (series). This property is useful in some scenarios when the view of controller needs to be customized in detail.</p>\n","properties":{"inRange":{"type":["Object"],"description":"<p>Define visual channels that will mapped from dataValues that are <strong>in selected range</strong>. (User can interact with visualMap component and make a seleced range by mouse or touch.)</p>\n<p>Possiable visual channels includes:</p>\n<ul>\n<li><code class=\"codespan\">symbol</code>: Type of symbol.</li>\n<li><code class=\"codespan\">symbolSize</code>: Symbol size.</li>\n<li><code class=\"codespan\">color</code>: Symbol color.</li>\n<li><code class=\"codespan\">colorAlpha</code>: Symbol alpha channel.</li>\n<li><code class=\"codespan\">opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code class=\"codespan\">colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<hr>\n<p><code class=\"codespan\">inRange</code> could customize visual channels both in series (by <a href=\"#visualMap-piecewise.seriesIndex\">visualMap-piecewise.seriesIndex</a>) and in <code class=\"codespan\">visualMap-piecewise</code> itself.</p>\n<p>For instance, if a <code class=\"codespan\">visualMap-piecewise</code> component is used on a scatter chart, the mapping approach from data to <code class=\"codespan\">color</code> (or <code class=\"codespan\">symbol</code>, <code class=\"codespan\">size</code>, ...) can be both customized in the scatter chart and <code class=\"codespan\">visualMap-piecewise</code> component itself. See the code as following:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels both in target series and visualMap-piecewise component itself:\n        inRange: {\n            color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n            symbolSize: [30, 100]\n        }\n    }\n]\n</code></pre>\n<p>If you want to define visual channels for target series and visualMap-piecewise component separately, you should do as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels only for target series.\n        target: {\n            inRange: {\n                color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n                symbolSize: [60, 200]\n            }\n        },\n        // Define visual channels only for visualMap-piecewise component.\n        controller: {\n            inRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n</code></pre>\n<p>Or define as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels for both target series and visualMap-piecewise component.\n        inRange: {\n            color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n            symbolSize: [60, 200]\n        },\n        // Define visual channels only for visualMap-piecewise component, which\n        // will overlap the properties with the same name in the above common\n        // definition. (symbolSize is overlapped by [30, 100] while color\n        // keeps the original value)\n        controller: {\n            inRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>✦ About visual channels ✦</strong></p>\n<ul>\n<li><p>Various visual channels (such as <code class=\"codespan\">color</code>、<code class=\"codespan\">symbolSize</code> and ect.) can be defined in inRange at the same time and all of them will be apopted.</p>\n</li>\n<li><p>Basically visual channels <code class=\"codespan\">opacity</code> is recommended, rather than <code class=\"codespan\">colorAlpha</code>. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.</p>\n</li>\n<li><p>There are two approaches of visual mapping supported: &#39;Linear Mapping&#39; and &#39;Table Mapping&#39;.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>✦ Linear Mapping to visual channel ✦</strong></p>\n<p><code class=\"codespan\">Linear Mapping</code> means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of <code class=\"codespan\">[visaulMap.min, visualMap.max]</code> to a given range of <code class=\"codespan\">[visual value 1, visual value 2]</code> and obtaining a final value (say visual value) for visual channel rendering.</p>\n<p>For instance, <code class=\"codespan\">[visualMap.min, visualMap.max]</code> is set to be <code class=\"codespan\">[0, 100]</code>, and there is series.data: <code class=\"codespan\">[50, 10, 100]</code>. We intend to map them to an <code class=\"codespan\">opacity</code> range <code class=\"codespan\">[0.4, 1]</code>, by which the size of value can be demostrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values <code class=\"codespan\">[0.7, 0.44, 1]</code>, cooresponding to each dataValue.</p>\n<p>We can also set the visual range inversely, such as <code class=\"codespan\">opacity: [1, 0.4]</code>, and the final mapping result for the given series.data above will be <code class=\"codespan\">[0.7, 0.96, 0.4]</code>.</p>\n<p>Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by default, but not <code class=\"codespan\">dataMin</code> and <code class=\"codespan\">dataMax</code> in series.data.</p>\n<p>How to configure visualMap component to do Linear Mapping?</p>\n<ul>\n<li><p>When use <a href=\"#visualMap-continuous\">visualMap-continuous</a>, or</p>\n</li>\n<li><p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is not used.</p>\n</li>\n</ul>\n<p>About the value of visual channel (visual value):</p>\n<ul>\n<li><p>Basically <code class=\"codespan\">Array</code> is used to express the range of visual value, e.g., <code class=\"codespan\">color: [&#39;#333&#39;, &#39;#777&#39;]</code>.</p>\n</li>\n<li><p>Single <code class=\"codespan\">number</code> or single <code class=\"codespan\">string</code> can also be used, which will be converted to an <code class=\"codespan\">Array</code> by visualMap component. e.g.:  <code class=\"codespan\">opacity: 0.4</code> will be converted to <code class=\"codespan\">opacity: [0.4, 0.4]</code>, <code class=\"codespan\">color: &#39;#333&#39;</code> will be converted to <code class=\"codespan\">color: [&#39;#333&#39;, &#39;#333&#39;]</code>.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">symbolSize</code>, <code class=\"codespan\">opacity</code>, <code class=\"codespan\">colorAlpha</code>, <code class=\"codespan\">colorLightness</code>, <code class=\"codespan\">colorSaturation</code>, <code class=\"codespan\">colorHue</code>, the range of visual value is always in the form of: <code class=\"codespan\">[visual value of visualMap.min, visual value of visualMap.max]</code>. For example, <code class=\"codespan\">colorLightness: [0.8, 0.2]</code> means that the dataValue in series.data that equals to <code class=\"codespan\">visualMap.min</code> (if any) will be mapped to lightness <code class=\"codespan\">0.8</code>, and the dataValue that equals to <code class=\"codespan\">visualMap.max</code> (if any) will be mapped to lightness <code class=\"codespan\">0.2</code>, and other dataValues will be mapped by the linear calculateion based on the domain of <code class=\"codespan\">[visualMap.min, visualMap.max]</code> and the range of <code class=\"codespan\">[0.8, 0.2]</code>.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">color</code>, array is used, like: <code class=\"codespan\">[&#39;#333&#39;, &#39;#78ab23&#39;, &#39;blue&#39;]</code>, which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to <code class=\"codespan\">visualMap.min</code> will be mapped onto <code class=\"codespan\">&#39;#333&#39;</code>, the dataValue that equals to <code class=\"codespan\">visualMap.max</code> will be mapped onto <code class=\"codespan\">&#39;blue&#39;</code>, and other dataValues will be piecewisely interpolated to get the final color.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">symbol</code>, array is used, like: <code class=\"codespan\">[&#39;circle&#39;, &#39;rect&#39;, &#39;diamond&#39;]</code>, where the dataValue that equals to <code class=\"codespan\">visualMap.min</code> will be mapped onto <code class=\"codespan\">&#39;circle&#39;</code>, the dataValue that equals to <code class=\"codespan\">visualMap.max</code> will be mapped onto <code class=\"codespan\">&#39;diamond&#39;</code>, and other dataValues will be caculated based on the numerical distance to <code class=\"codespan\">visualMax.min</code> and to <code class=\"codespan\">visualMap.max</code>, and mapped onto one of <code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>.</p>\n</li>\n</ul>\n<p>About the possible value range of visual value:</p>\n<ul>\n<li><p><code class=\"codespan\">opacity</code>、<code class=\"codespan\">colorAlpha</code>、<code class=\"codespan\">colorLightness</code>、<code class=\"codespan\">colorSaturation</code>、<code class=\"codespan\">visual value</code></p>\n<p>  possible value range is <code class=\"codespan\">[0, 1]</code>.</p>\n</li>\n<li><p><code class=\"codespan\">colorHue</code>:</p>\n<p>  possible value range is <code class=\"codespan\">[0, 360]</code>.</p>\n</li>\n<li><p><code class=\"codespan\">color</code>:</p>\n<p>  color can use RGB expression, like <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>, or RGBA expression, like <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>, or Hex expression, like &#39;#ccc&#39;.</p>\n</li>\n<li><p><code class=\"codespan\">symbol</code>:</p>\n</li>\n</ul>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p><br></p>\n<hr>\n<p><strong>✦ Table Mapping to visual channel ✦</strong></p>\n<p><code class=\"codespan\">Table Mapping</code> could be used when dataValue (values in series.data, specified by <a href=\"#visualMap.dimension\">visualMap.dimension</a>) is enumerable and we intend to map them to visual value by looking up a given table.</p>\n<p>For instance, in a <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> component, <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is set to <code class=\"codespan\">[&#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. And there is series.data: <code class=\"codespan\">[&#39;Demon Hunter&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. Then we can establish the lookup rule for color: <code class=\"codespan\">color: {&#39;Warden&#39;: &#39;red&#39;, &#39;Demon Hunter&#39;: &#39;black&#39;}</code>, by which the <code class=\"codespan\">visualMap</code> component will map <code class=\"codespan\">dataValue</code> to <code class=\"codespan\">color</code>.</p>\n<p>How to configure <code class=\"codespan\">visualMap</code> component to do <code class=\"codespan\">Table Mapping</code>?</p>\n<p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a>is set.</p>\n<p>About the value of visual channel (visual value):</p>\n<p>Generally <code class=\"codespan\">Object</code> or <code class=\"codespan\">Array</code> is used, for instance:</p>\n<pre><code class=\"lang-javascript\">visualMap: {\n    type: &#39;piecewise&#39;,\n    // categories defines the items that to be displayed in visualMap-piecewise component.\n    categories: [\n        &#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;\n    ],\n    inRange: {\n        // visual value can be an Object:\n        color: {\n            &#39;Warden&#39;: &#39;red&#39;,\n            &#39;Demon Hunter&#39;: &#39;black&#39;,\n            &#39;&#39;: &#39;green&#39; // Blank string means that except &#39;Warden&#39; and &#39;Demon Hunter&#39;,\n                        // all other dataValues should be mapped to &#39;green&#39;.\n        }\n        // visual value can also be a single value,\n        // means that all dataValues should be mapped to the value.\n        color: &#39;green&#39;,\n        // visual value can also be a array, with the same length\n        // as the array of categories and one-one mapping onto it.\n        color: [&#39;red&#39;, &#39;black&#39;, &#39;green&#39;, &#39;yellow&#39;, &#39;white&#39;]\n    }\n}\n</code></pre>\n<p><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/scatter-visualMap-categories&amp;edit=1&amp;reset=1\" target=\"_blank\">Example</a></p>\n<hr>\n<p><strong>✦ How to modity configurations of vsiual encoding? ✦</strong></p>\n<p>If you want to modify the configurations of visual encoding after chart been rendered (by invoke <code class=\"codespan\">setOption</code> to set the initial <code class=\"codespan\">option</code>), <code class=\"codespan\">setOption</code> can be used again to modify configurations of visual encoding. For instance:</p>\n<pre><code class=\"lang-javascript\">chart.setOption({\n    visualMap: {\n        inRange: {color: [&#39;red&#39;, &#39;blue&#39;]}\n    }\n});\n</code></pre>\n<p>Notice:</p>\n<ul>\n<li><p>These visualMap properties (i.e. <code class=\"codespan\">inRange</code>, <code class=\"codespan\">outOfRange</code>, <code class=\"codespan\">target</code>, <code class=\"codespan\">controller</code>) do not support &quot;merge&quot;, that is, anyone among them is modified when use <code class=\"codespan\">setOption</code> again, all of the original values of them will not be kept but erased. The &quot;merge&quot; brings complication in implemnentation and understanding, whereas &quot;erase all&quot; normalize the practise: once you want to modify some visual values, you should pass all of them to <code class=\"codespan\">setOption</code>, no matter they are to be changed.</p>\n</li>\n<li><p>This way, <code class=\"codespan\">getOption() -&gt; modify the gotten option -&gt; setOption(modified option)</code>, is strongly <strong>not recommended</strong>, for instance:</p>\n</li>\n</ul>\n<pre><code class=\"lang-javascript\">// Not recommended approach, regardless of its correctness:\n\nvar option = chart.getOption(); // Get the entire option.\noption.visualMap.inRange.color = [&#39;red&#39;, &#39;blue&#39;]; // modify color, which is what you want.\n\n// You have to modify those two properties, otherwise you will not get what you want.\noption.visualMap.target.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\noption.visualMap.controller.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\n\nchart.setOption(option); // set the modified option back.\n// You should not use this approach, but use the\n// approach demostrated before this example.\n</code></pre>\n<p><strong>Notice:</strong> There is default color <code class=\"codespan\">[&#39;#f6efa6&#39;, &#39;#d88273&#39;, &#39;#bf444c&#39;]</code> in <code class=\"codespan\">inRange</code> if you not set <code class=\"codespan\">inRange</code>. If you dont want it, set <code class=\"codespan\">inRange: {color: null}</code> to disable it.</p>\n"},"outOfRange":{"type":["Object"],"description":"<p>Define visual channels that will mapped from dataValues that are <strong>out of selected range</strong>. (User can interact with visualMap component and make a seleced range by mouse or touch.)</p>\n<p>Possiable visual channels includes:</p>\n<ul>\n<li><code class=\"codespan\">symbol</code>: Type of symbol.</li>\n<li><code class=\"codespan\">symbolSize</code>: Symbol size.</li>\n<li><code class=\"codespan\">color</code>: Symbol color.</li>\n<li><code class=\"codespan\">colorAlpha</code>: Symbol alpha channel.</li>\n<li><code class=\"codespan\">opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code class=\"codespan\">colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<p><code class=\"codespan\">outOfRange</code> could customize visual channels both in series (by <a href=\"#visualMap-piecewise.seriesIndex\">visualMap-piecewise.seriesIndex</a>) and in <code class=\"codespan\">visualMap-piecewise</code> itself.</p>\n<p>For instance, if a <code class=\"codespan\">visualMap-piecewise</code> component is used on a scatter chart, the mapping approach from data to <code class=\"codespan\">color</code> (or <code class=\"codespan\">symbol</code>, <code class=\"codespan\">size</code>, ...) can be both customized in the scatter chart and <code class=\"codespan\">visualMap-piecewise</code> component itself. See the code as following:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels both in target series and visualMap-piecewise component itself:\n        outOfRange: {\n            color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n            symbolSize: [30, 100]\n        }\n    }\n]\n</code></pre>\n<p>If you want to define visual channels for target series and visualMap-piecewise component separately, you should do as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels only for target series.\n        target: {\n            outOfRange: {\n                color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n                symbolSize: [60, 200]\n            }\n        },\n        // Define visual channels only for visualMap-piecewise component.\n        controller: {\n            outOfRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n</code></pre>\n<p>Or define as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels for both target series and visualMap-piecewise component.\n        outOfRange: {\n            color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n            symbolSize: [60, 200]\n        },\n        // Define visual channels only for visualMap-piecewise component, which\n        // will overlap the properties with the same name in the above common\n        // definition. (symbolSize is overlapped by [30, 100] while color\n        // keeps the original value)\n        controller: {\n            outOfRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>✦ About visual channels ✦</strong></p>\n<ul>\n<li><p>Various visual channels (such as <code class=\"codespan\">color</code>、<code class=\"codespan\">symbolSize</code> and ect.) can be defined in outOfRange at the same time and all of them will be apopted.</p>\n</li>\n<li><p>Basically visual channels <code class=\"codespan\">opacity</code> is recommended, rather than <code class=\"codespan\">colorAlpha</code>. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.</p>\n</li>\n<li><p>There are two approaches of visual mapping supported: &#39;Linear Mapping&#39; and &#39;Table Mapping&#39;.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>✦ Linear Mapping to visual channel ✦</strong></p>\n<p><code class=\"codespan\">Linear Mapping</code> means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of <code class=\"codespan\">[visaulMap.min, visualMap.max]</code> to a given range of <code class=\"codespan\">[visual value 1, visual value 2]</code> and obtaining a final value (say visual value) for visual channel rendering.</p>\n<p>For instance, <code class=\"codespan\">[visualMap.min, visualMap.max]</code> is set to be <code class=\"codespan\">[0, 100]</code>, and there is series.data: <code class=\"codespan\">[50, 10, 100]</code>. We intend to map them to an <code class=\"codespan\">opacity</code> range <code class=\"codespan\">[0.4, 1]</code>, by which the size of value can be demostrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values <code class=\"codespan\">[0.7, 0.44, 1]</code>, cooresponding to each dataValue.</p>\n<p>We can also set the visual range inversely, such as <code class=\"codespan\">opacity: [1, 0.4]</code>, and the final mapping result for the given series.data above will be <code class=\"codespan\">[0.7, 0.96, 0.4]</code>.</p>\n<p>Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by default, but not <code class=\"codespan\">dataMin</code> and <code class=\"codespan\">dataMax</code> in series.data.</p>\n<p>How to configure visualMap component to do Linear Mapping?</p>\n<ul>\n<li><p>When use <a href=\"#visualMap-continuous\">visualMap-continuous</a>, or</p>\n</li>\n<li><p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is not used.</p>\n</li>\n</ul>\n<p>About the value of visual channel (visual value):</p>\n<ul>\n<li><p>Basically <code class=\"codespan\">Array</code> is used to express the range of visual value, e.g., <code class=\"codespan\">color: [&#39;#333&#39;, &#39;#777&#39;]</code>.</p>\n</li>\n<li><p>Single <code class=\"codespan\">number</code> or single <code class=\"codespan\">string</code> can also be used, which will be converted to an <code class=\"codespan\">Array</code> by visualMap component. e.g.:  <code class=\"codespan\">opacity: 0.4</code> will be converted to <code class=\"codespan\">opacity: [0.4, 0.4]</code>, <code class=\"codespan\">color: &#39;#333&#39;</code> will be converted to <code class=\"codespan\">color: [&#39;#333&#39;, &#39;#333&#39;]</code>.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">symbolSize</code>, <code class=\"codespan\">opacity</code>, <code class=\"codespan\">colorAlpha</code>, <code class=\"codespan\">colorLightness</code>, <code class=\"codespan\">colorSaturation</code>, <code class=\"codespan\">colorHue</code>, the range of visual value is always in the form of: <code class=\"codespan\">[visual value of visualMap.min, visual value of visualMap.max]</code>. For example, <code class=\"codespan\">colorLightness: [0.8, 0.2]</code> means that the dataValue in series.data that equals to <code class=\"codespan\">visualMap.min</code> (if any) will be mapped to lightness <code class=\"codespan\">0.8</code>, and the dataValue that equals to <code class=\"codespan\">visualMap.max</code> (if any) will be mapped to lightness <code class=\"codespan\">0.2</code>, and other dataValues will be mapped by the linear calculateion based on the domain of <code class=\"codespan\">[visualMap.min, visualMap.max]</code> and the range of <code class=\"codespan\">[0.8, 0.2]</code>.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">color</code>, array is used, like: <code class=\"codespan\">[&#39;#333&#39;, &#39;#78ab23&#39;, &#39;blue&#39;]</code>, which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to <code class=\"codespan\">visualMap.min</code> will be mapped onto <code class=\"codespan\">&#39;#333&#39;</code>, the dataValue that equals to <code class=\"codespan\">visualMap.max</code> will be mapped onto <code class=\"codespan\">&#39;blue&#39;</code>, and other dataValues will be piecewisely interpolated to get the final color.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">symbol</code>, array is used, like: <code class=\"codespan\">[&#39;circle&#39;, &#39;rect&#39;, &#39;diamond&#39;]</code>, where the dataValue that equals to <code class=\"codespan\">visualMap.min</code> will be mapped onto <code class=\"codespan\">&#39;circle&#39;</code>, the dataValue that equals to <code class=\"codespan\">visualMap.max</code> will be mapped onto <code class=\"codespan\">&#39;diamond&#39;</code>, and other dataValues will be caculated based on the numerical distance to <code class=\"codespan\">visualMax.min</code> and to <code class=\"codespan\">visualMap.max</code>, and mapped onto one of <code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>.</p>\n</li>\n</ul>\n<p>About the possible value range of visual value:</p>\n<ul>\n<li><p><code class=\"codespan\">opacity</code>、<code class=\"codespan\">colorAlpha</code>、<code class=\"codespan\">colorLightness</code>、<code class=\"codespan\">colorSaturation</code>、<code class=\"codespan\">visual value</code></p>\n<p>  possible value range is <code class=\"codespan\">[0, 1]</code>.</p>\n</li>\n<li><p><code class=\"codespan\">colorHue</code>:</p>\n<p>  possible value range is <code class=\"codespan\">[0, 360]</code>.</p>\n</li>\n<li><p><code class=\"codespan\">color</code>:</p>\n<p>  color can use RGB expression, like <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>, or RGBA expression, like <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>, or Hex expression, like &#39;#ccc&#39;.</p>\n</li>\n<li><p><code class=\"codespan\">symbol</code>:</p>\n</li>\n</ul>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p><br></p>\n<hr>\n<p><strong>✦ Table Mapping to visual channel ✦</strong></p>\n<p><code class=\"codespan\">Table Mapping</code> could be used when dataValue (values in series.data, specified by <a href=\"#visualMap.dimension\">visualMap.dimension</a>) is enumerable and we intend to map them to visual value by looking up a given table.</p>\n<p>For instance, in a <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> component, <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is set to <code class=\"codespan\">[&#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. And there is series.data: <code class=\"codespan\">[&#39;Demon Hunter&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. Then we can establish the lookup rule for color: <code class=\"codespan\">color: {&#39;Warden&#39;: &#39;red&#39;, &#39;Demon Hunter&#39;: &#39;black&#39;}</code>, by which the <code class=\"codespan\">visualMap</code> component will map <code class=\"codespan\">dataValue</code> to <code class=\"codespan\">color</code>.</p>\n<p>How to configure <code class=\"codespan\">visualMap</code> component to do <code class=\"codespan\">Table Mapping</code>?</p>\n<p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a>is set.</p>\n<p>About the value of visual channel (visual value):</p>\n<p>Generally <code class=\"codespan\">Object</code> or <code class=\"codespan\">Array</code> is used, for instance:</p>\n<pre><code class=\"lang-javascript\">visualMap: {\n    type: &#39;piecewise&#39;,\n    // categories defines the items that to be displayed in visualMap-piecewise component.\n    categories: [\n        &#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;\n    ],\n    outOfRange: {\n        // visual value can be an Object:\n        color: {\n            &#39;Warden&#39;: &#39;red&#39;,\n            &#39;Demon Hunter&#39;: &#39;black&#39;,\n            &#39;&#39;: &#39;green&#39; // Blank string means that except &#39;Warden&#39; and &#39;Demon Hunter&#39;,\n                        // all other dataValues should be mapped to &#39;green&#39;.\n        }\n        // visual value can also be a single value,\n        // means that all dataValues should be mapped to the value.\n        color: &#39;green&#39;,\n        // visual value can also be a array, with the same length\n        // as the array of categories and one-one mapping onto it.\n        color: [&#39;red&#39;, &#39;black&#39;, &#39;green&#39;, &#39;yellow&#39;, &#39;white&#39;]\n    }\n}\n</code></pre>\n<p><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/scatter-visualMap-categories&amp;edit=1&amp;reset=1\" target=\"_blank\">Example</a></p>\n<hr>\n<p><strong>✦ How to modity configurations of vsiual encoding? ✦</strong></p>\n<p>If you want to modify the configurations of visual encoding after chart been rendered (by invoke <code class=\"codespan\">setOption</code> to set the initial <code class=\"codespan\">option</code>), <code class=\"codespan\">setOption</code> can be used again to modify configurations of visual encoding. For instance:</p>\n<pre><code class=\"lang-javascript\">chart.setOption({\n    visualMap: {\n        inRange: {color: [&#39;red&#39;, &#39;blue&#39;]}\n    }\n});\n</code></pre>\n<p>Notice:</p>\n<ul>\n<li><p>These visualMap properties (i.e. <code class=\"codespan\">inRange</code>, <code class=\"codespan\">outOfRange</code>, <code class=\"codespan\">target</code>, <code class=\"codespan\">controller</code>) do not support &quot;merge&quot;, that is, anyone among them is modified when use <code class=\"codespan\">setOption</code> again, all of the original values of them will not be kept but erased. The &quot;merge&quot; brings complication in implemnentation and understanding, whereas &quot;erase all&quot; normalize the practise: once you want to modify some visual values, you should pass all of them to <code class=\"codespan\">setOption</code>, no matter they are to be changed.</p>\n</li>\n<li><p>This way, <code class=\"codespan\">getOption() -&gt; modify the gotten option -&gt; setOption(modified option)</code>, is strongly <strong>not recommended</strong>, for instance:</p>\n</li>\n</ul>\n<pre><code class=\"lang-javascript\">// Not recommended approach, regardless of its correctness:\n\nvar option = chart.getOption(); // Get the entire option.\noption.visualMap.inRange.color = [&#39;red&#39;, &#39;blue&#39;]; // modify color, which is what you want.\n\n// You have to modify those two properties, otherwise you will not get what you want.\noption.visualMap.target.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\noption.visualMap.controller.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\n\nchart.setOption(option); // set the modified option back.\n// You should not use this approach, but use the\n// approach demostrated before this example.\n</code></pre>\n"}}},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":4},"left":{"type":["string","number"],"description":"<p>Distance between visualMap  component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":0},"top":{"type":["string","number"],"description":"<p>Distance between visualMap  component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"auto"},"right":{"type":["string","number"],"description":"<p>Distance between visualMap  component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n","default":"auto"},"bottom":{"type":["string","number"],"description":"<p>Distance between visualMap  component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n","default":0},"orient":{"type":["string"],"description":"<p>How to layout the visualMap component, <code class=\"codespan\">&#39;horizontal&#39;</code> or <code class=\"codespan\">&#39;vertical&#39;</code>.</p>\n","default":"'vertical'"},"padding":{"type":["number","Array"],"description":"<p>visualMap-piecewise space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"backgroundColor":{"type":["Color"],"description":"<p>background color of visualMap component.</p>\n","default":"'rgba(0,0,0,0)'"},"borderColor":{"type":["Color"],"description":"<p>border color of visualMap component.</p>\n","default":"'#ccc'"},"borderWidth":{"type":["number"],"description":"<p>border width of visualMap component, with unit: px.</p>\n","default":0},"color":{"type":["Array"],"description":"<p>This property remains only for compatibility with ECharts2, and is not recommended in ECharts3. It is recommended to configure color in <a href=\"#visualMap-piecewise.inRange\">visualMap-piecewise.inRange</a>, or <a href=\"#visualMap-piecewise.outOfRange\">visualMap-piecewise.outOfRange</a> if needed.</p>\n<p>If you persist in using it, the following issue should be noticed: the sequence of dataValues that are mapped to colorValues in property <code class=\"codespan\">color</code> is from <code class=\"codespan\">large</code> to <code class=\"codespan\">small</code>, whereas that in <a href=\"#visualMap-piecewise.inRange\">visualMap-piecewise.inRange</a> or <a href=\"#visualMap-piecewise.outOfRange\">visualMap-piecewise.outOfRange</a> is from <code class=\"codespan\">small</code> to <code class=\"codespan\">large</code>.</p>\n","default":"['#bf444c', '#d88273', '#f6efa6']"},"textStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>visualMap  text color.</p>\n","default":"#333"},"fontStyle":{"type":["string"],"description":"<p>visualMap  font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p>visualMap  font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>visualMap  font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>visualMap  font size.</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"formatter":{"type":["string","Function"],"description":"<p>the formatter tool for label.</p>\n<ul>\n<li><p>If it was set as a <code class=\"codespan\">string</code>, it refers to a template, for instance: <code class=\"codespan\">aaaa{value}bbbb{value2}</code>, where <code class=\"codespan\">{value}</code> and <code class=\"codespan\">{value2}</code> represents the current selected range of dataValues.</p>\n</li>\n<li><p>If it was set as a <code class=\"codespan\">Function</code>, it refers to a callback function, for instance:</p>\n</li>\n</ul>\n<pre><code class=\"lang-javascript\">formatter: function (value, value2) {\n    return &#39;aaaa&#39; + value + &#39;bbbb&#39; + value2;\n}\n</code></pre>\n"}}}]},"description":"<p><code class=\"codespan\">visualMap</code> is a type of component for visual encoding, which maps the data to visual channels, including:</p>\n<ul>\n<li><code class=\"codespan\">symbol</code>: Type of symbol.</li>\n<li><code class=\"codespan\">symbolSize</code>: Symbol size.</li>\n<li><code class=\"codespan\">color</code>: Symbol color.</li>\n<li><code class=\"codespan\">colorAlpha</code>: Symbol alpha channel.</li>\n<li><code class=\"codespan\">opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code class=\"codespan\">colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<p>Myltiple <code class=\"codespan\">visualMap</code> component could be defined in a chart instance, which enable that different dimensions of a series data are mapped to different visual channels.</p>\n<p><code class=\"codespan\">visualMap</code> could be defined as <a href=\"#visualMap-piecewise\">Piecewise (visualMapPiecewise)</a> or <a href=\"#visualMap-continuous\">Continuous (visualMapContinuous)</a>, which is distinguished by the property <code class=\"codespan\">type</code>. For instance:</p>\n<pre><code class=\"lang-javascript\">option = {\n    visualMap: [\n        { // the first visualMap component\n            type: &#39;continuous&#39;, // defined to be continuous visualMap\n            ...\n        },\n        { // the second visualMap component\n            type: &#39;piecewise&#39;, // defined to be piecewise visualMap\n            ...\n        }\n    ],\n    ...\n};\n</code></pre>\n<p><br>\n<strong>✦ Configure mapping ✦</strong></p>\n<p>The dimension of <a href=\"#series.data\">series.data</a> can be specified by <a href=\"#visualMap.dimension\">visualMap.dimension</a>, from which the value can be retrieved and mapped onto visual channels, which can be defined in <a href=\"#visualMap.inRange\">visualMap.inRange</a> and <a href=\"#visualMap.outOfRange\">visualMap.outOfRange</a>.</p>\n<p><br>\nIn series that controlled by visualMap, if a data item needs to escape from controlled by visualMap, you can set like this:</p>\n<pre><code>series: {\n    type: &#39;...&#39;,\n    data: [\n        {name: &#39;Shanghai&#39;, value: 251},\n        {name: &#39;Haikou&#39;, value: 21},\n        // Mark as `visualMap: false`, then this item does not controlled by visualMap any more,\n        // and series visual config (like color, symbol, ...) can be used to this item.\n        {name: &#39;Beijing&#39;, value: 821, },\n        ...\n    ]\n}\n</code></pre><p><br>\n<strong>✦ The relationship between visualMap of ECharts3 and dataRange of ECharts2 ✦</strong></p>\n<p><code class=\"codespan\">visualMap</code> is renamed from the <code class=\"codespan\">dataRange</code> of ECharts2, and the scope of functionalities are extended a lot. The configurations of <code class=\"codespan\">dataRange</code> are still compatible in ECharts3, which automatically convert them to <code class=\"codespan\">visualMap</code>. It is recommended to use <code class=\"codespan\">visualMap</code> instead of <code class=\"codespan\">dataRange</code> in ECharts3.</p>\n<p><br>\n<strong>✦ The detailed configurations of visualMap are elaborated as follows. ✦</strong></p>\n<p><br>\n<br></p>\n","properties":{}},"tooltip":{"type":["Object"],"description":"<p>Tooltip component.</p>\n<hr>\n<p><strong>General Introduction:</strong></p>\n<p>tooltip can be configured on different places:</p>\n<ul>\n<li><p>Configured on global: <a href=\"#tooltip\">tooltip</a></p>\n</li>\n<li><p>Configured in a coordinate system: <a href=\"#grid.tooltip\">grid.tooltip</a>, <a href=\"#polar.tooltip\">polar.tooltip</a>, <a href=\"#single.tooltip\">single.tooltip</a></p>\n</li>\n<li><p>Configured in a series: <a href=\"#series.tooltip\">series.tooltip</a></p>\n</li>\n<li><p>Configured in each item of <code class=\"codespan\">series.data</code>: <a href=\"#series.data.tooltip\">series.data.tooltip</a></p>\n</li>\n</ul>\n<hr>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the tooltip component, including tooltip floating layer and <a href=\"#tooltip.axisPointer\">axisPointer</a>.</p>\n","default":true},"trigger":{"type":["string"],"description":"<p>Type of triggering.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;item&#39;</code></p>\n<p>  Triggered by data item, which is mainly used for charts that don&#39;t have a category axis like scatter charts or pie charts.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;axis&#39;</code></p>\n<p>  Triggered by axes, which is mainly used for charts that have category axes, like bar charts or line charts.</p>\n<p> ECharts 2.x only supports axis trigger for category axis. In ECharts 3, it is supported for all types of axes in <a href=\"#grid\">grid</a> or <a href=\"#polar\">polar</a>. Also, you may assign axis with <a href=\"#tooltip.axisPointer.axis\">axisPointer.axis</a>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;none&#39;</code></p>\n<p>  Trigger nothing.</p>\n</li>\n</ul>\n","default":"'item'"},"axisPointer":{"type":["Object"],"description":"<p>Configuration item for axisPointer.</p>\n<p><code class=\"codespan\">tooltip.axisPointer</code> is like syntactic sugar of axisPointer settings on axes (for example, <a href=\"#xAxis.axisPointer\">xAxis.axisPointer</a> or <a href=\"#angleAxis.axisPointer\">angleAxis.axisPointer</a>). More detailed features can be configured on <code class=\"codespan\">someAxis.axisPointer</code>. But in common cases, using <code class=\"codespan\">tooltip.axisPointer</code> is more convenient.</p>\n<blockquote>\n<p><strong>Notice:</strong> configurations of <code class=\"codespan\">tooltip.axisPointer</code> has lower priority than that of <code class=\"codespan\">someAxis.axisPointer</code>.</p>\n</blockquote>\n<hr>\n<p><code class=\"codespan\">axisPointer</code> is a tool for displaying reference line and axis value under mouse pointer.</p>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/candlestick-axisPointer&edit=1&reset=1\" width=\"600\" height=\"450\"><iframe />\n\n\n<p>In the demo above, <a href=\"#axisPointer.link\">axisPointer.link</a> is used to link axisPointer from different coordinate systems.</p>\n<p><code class=\"codespan\">axisPointer</code> can also be used on touch device, where user can drag the button to move the reference line and label.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-tooltip-touch&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n<p>In the cases that more than one axis exist, axisPointer helps to look inside the data.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=multiple-y-axis&edit=1&reset=1\" width=\"600\" height=\"300\"><iframe />\n\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=multiple-x-axis&edit=1&reset=1\" width=\"600\" height=\"300\"><iframe />\n\n\n\n<hr>\n<blockquote>\n<p><strong>Notice:</strong>\nGenerally, axisPointers is configured in each axes who need them (for example <a href=\"#xAxis.axisPointer\">xAxis.axisPointer</a>), or configured in <code class=\"codespan\">tooltip</code> (for example <a href=\"#tooltip.axisPointer\">tooltip.axisPointer</a>).</p>\n</blockquote>\n<blockquote>\n<p>But these configurations can only be configured in global axisPointer:\n<a href=\"#axisPointer.triggerOn\">axisPointer.triggerOn</a>, <a href=\"#axisPointer.link\">axisPointer.link</a>.</p>\n</blockquote>\n<hr>\n<hr>\n<p><strong>How to display axisPointer:</strong></p>\n<p>In <a href=\"#grid\">cartesian (grid)</a> and <a href=\"#single\">polar](~polar) and (single axis</a>, each axis has its own axisPointer.</p>\n<p>Those axisPointer will not be displayed by default, utill configured as follows:</p>\n<ul>\n<li><p>Set <code class=\"codespan\">someAxis.axisPointer.show</code> (like <a href=\"#xAxis.axisPointer.show\">xAxis.axisPointer.show</a>) as <code class=\"codespan\">true</code>. Then axisPointer of this axis will be displayed.</p>\n</li>\n<li><p>Set <a href=\"#tooltip.trigger\">tooltip.trigger</a> as <code class=\"codespan\">&#39;axis&#39;</code>, or set <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> as <code class=\"codespan\">&#39;cross&#39;</code>. Then coordinate system will automatically chose the axes who will display their axisPointers. (<a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> can be used to change the choice.) Notice, <code class=\"codespan\">axis.axisPointer</code> will override <code class=\"codespan\">tooltip.axisPointer</code> settings.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to display the label of axisPointer:</strong></p>\n<p>The label of axisPointer will not be displayed by default(namely, only reference line will be displayed by default), utill configured as follows:</p>\n<ul>\n<li><p>Set <code class=\"codespan\">someAxis.axisPointer.label.show</code> (for example <a href=\"#xAxis.axisPointer.show\">xAxis.axisPointer.label.show</a>) as <code class=\"codespan\">true</code>. Then the label of the axisPointer will be displayed.</p>\n</li>\n<li><p>Set <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> as  <code class=\"codespan\">&#39;cross&#39;</code>. Then the label of the crossed axisPointers will be displayed.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to configure axisPointer on touch device:</strong></p>\n<p>Set <code class=\"codespan\">someAxis.axisPointer.handle.show</code> (for example <a href=\"#xAxis.axisPointer.handle.show\">xAxis.axisPointer.handle.show</a> as <code class=\"codespan\">true</code>. Then the button for dragging will be displayed. (This feature is not supported on polar).</p>\n<p><strong>Notice:</strong>\nIf tooltip does not work well in this case, try to set<a href=\"#tooltip.triggerOn\">tooltip.triggerOn</a> as <code class=\"codespan\">&#39;none&#39;</code> (for the effect: show tooltip when finger holding on the button, and hide tooltip after finger left the button), or set <a href=\"#tooltip.alwaysShowContent\">tooltip.alwaysShowContent</a> as <code class=\"codespan\">true</code> (then tooltip will always be displayed).</p>\n<p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>.</p>\n<hr>\n<p><strong>Snap to point</strong></p>\n<p>In value axis and time axis, if <a href=\"#xAxis.axisPointer.snap\">snap</a> is set as true, axisPointer will snap to point automatically.</p>\n<hr>\n","properties":{"type":{"type":["string"],"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;line&#39;</code> line indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;shadow&#39;</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;none&#39;</code> no indicator displayed.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;cross&#39;</code> crosshair indicator, which is actually the shortcut of enable two axisPointers of two orthometric axes.</p>\n</li>\n</ul>\n","default":"'line'"},"axis":{"type":["string"],"description":"<p>The coordinate axis, which could be <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, <code class=\"codespan\">&#39;radius&#39;</code>, or <code class=\"codespan\">&#39;angle&#39;</code>. By default, each coordinate system will automatically chose the axes whose will display its axisPointer (category axis or time axis is used by default).</p>\n","default":"'auto'"},"snap":{"type":["boolean"],"description":"<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n"},"z":{"type":["number"],"description":"<p>z value, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n"},"label":{"type":["Object"],"description":"<p>label of axisPointer</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label. Label will not show by default. But if <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as  <code class=\"codespan\">&#39;cross&#39;</code>, label will be displayed automatically.</p>\n","default":false},"precision":{"type":["number","string"],"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code class=\"codespan\">&#39;2&#39;</code>, which indicates that two decimal fractions are reserved.</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"<p>The formatter of label.</p>\n<p>If set as <code class=\"codespan\">string</code>, for example it can be: <code class=\"codespan\">formatter: &#39;some text {value} some text</code>, where <code class=\"codespan\">{value}</code> will be replaced by axis value automatically.</p>\n<p>If set as <code class=\"codespan\">function</code>:</p>\n<p><strong>Parameters:</strong></p>\n<p><code class=\"codespan\">{Object}</code> params: Including fields as follows:</p>\n<p><code class=\"codespan\">{Object}</code> params.value: current value of this axis. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;category&#39;</code>, it is one of the value in <code class=\"codespan\">axis.data</code>. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;time&#39;</code>, it is a timestamp.</p>\n<p><code class=\"codespan\">{Array.&lt;Object&gt;}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<p><code class=\"codespan\">{string}</code> params.axisDimension: The dimension name of the axis. For example, in catesian it will be <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, and in polar it will be <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code>.</p>\n<p><code class=\"codespan\">{number}</code> params.axisIndex: The index of the axis, for example, <code class=\"codespan\">0</code>,<code class=\"codespan\">1</code>, <code class=\"codespan\">2</code>, ...</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n    axisDim: &#39;x&#39;, // &#39;x&#39;, &#39;y&#39;, &#39;angle&#39;, &#39;radius&#39;, &#39;single&#39;\n    axisId: &#39;xxx&#39;,\n    axisName: &#39;xxx&#39;,\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: &#39;text of value&#39;\n}\n</code></pre>\n<p><strong>Return:</strong></p>\n<p>The string to be displayed.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n    // If axis.type is &#39;time&#39;\n    return &#39;some text&#39; + echarts.format.formatTime(params.value);\n}\n</code></pre>\n","default":null},"margin":{"type":["boolean"],"description":"<p>Distance between label and axis.</p>\n","default":3},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"padding":{"type":["string","Array"],"description":"<p>axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"<p>Border color of label.</p>\n","default":null},"borderWidth":{"type":["string"],"description":"<p>Border width of label.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"lineStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;line&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"shadowStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;shadow&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"crossStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;cross&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"dashed"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":200},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"exponentialOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"showContent":{"type":["boolean"],"description":"<p>Whether to show the tooltip floating layer, whose default value is true. It should be configurated to be <code class=\"codespan\">false</code>, if you only need tooltip to trigger the event or show the axisPointer without content.</p>\n","default":true},"alwaysShowContent":{"type":["boolean"],"description":"<p>Whether to show tooltip content all the time. By default, it will be hidden <a href=\"#tooltip.hideDelay\">after some time</a>. It can be set to be <code class=\"codespan\">true</code> to preserve displaying.</p>\n<p>This attribute is newly added to ECharts 3.0.</p>\n","default":false},"triggerOn":{"type":["string"],"description":"<p>Conditions to trigger tooltip. Options:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;mousemove&#39;</code></p>\n<p>  Trigger when mouse moves.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;click&#39;</code></p>\n<p>  Trigger when mouse clicks.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;mousemove|click&#39;</code></p>\n<p>  Trigger when mouse clicks and moves.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;none&#39;</code></p>\n<p>  Do not triggered by <code class=\"codespan\">&#39;mousemove&#39;</code> and <code class=\"codespan\">&#39;click&#39;</code>. Tooltip can be triggered and hidden manually by calling <a href=\"api.html#action.tooltip.showTip\" target=\"_blank\">action.tooltip.showTip</a> and <a href=\"api.html#action.tooltip.hideTip\" target=\"_blank\">action.tooltip.hideTip</a>. It can also be triggered by <a href=\"#xAxis.axisPointer.handle\">axisPointer.handle</a> in this case.</p>\n</li>\n</ul>\n<p>This attribute is new to ECharts 3.0.</p>\n","default":"'mousemove|click'"},"showDelay":{"type":["number"],"description":"<p>Delay time for showing tooltip, in ms. No delay by default, and it is not recommended to set. Only valid when <a href=\"#tooltip.triggerOn\">triggerOn</a> is set to be <code class=\"codespan\">&#39;mousemove&#39;</code>.</p>\n","default":0},"hideDelay":{"type":["number"],"description":"<p>Delay time for hiding tooltip, in ms. It will be invalid when <a href=\"#tooltip.alwaysShowContent\">alwaysShowContent</a> is <code class=\"codespan\">true</code>.</p>\n","default":100},"enterable":{"type":["boolean"],"description":"<p>Whether mouse is allowed to enter the floating layer of tooltip, whose default value is false. If you need to interact in the tooltip like with links or buttons, it can be set as <code class=\"codespan\">true</code>.</p>\n","default":true},"renderMode":{"type":["string"],"description":"<p>Render mode for tooltip. By default, it is set to be <code class=\"codespan\">&#39;html&#39;</code> so that extra DOM element is used for tooltip. It can also set to be <code class=\"codespan\">&#39;richText&#39;</code> so that the tooltip will be rendered inside Canvas (SVG rich text is not implemented yet). This is very useful for environments that don&#39;t have DOM, such as Wechat applications.</p>\n","default":"'html'"},"confine":{"type":["boolean"],"description":"<p>Whether confine tooltip content in the view rect of chart instance.</p>\n<p>Useful when tooltip is cut because of <code class=\"codespan\">&#39;overflow: hidden&#39;</code> set on outer dom of chart instance, or because of narrow screen on mobile.</p>\n","default":false},"appendToBody":{"type":["boolean"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.7.0</code></p>\n</blockquote>\n<p>Whether to append the tooltip DOM element as a child of the <code class=\"codespan\">&lt;body&gt;</code> of the HTML page, when using <a href=\"#tooltip.renderMode\">renderMode</a> <code class=\"codespan\">&#39;html&#39;</code>.</p>\n<p>By default <code class=\"codespan\">false</code>, means that the tooltip DOM element will be one of a descendant of its echarts DOM container. But that means that the tooltip might be cut when overflow the container if some of the ancestors DOM element of the echarts container are styled with <code class=\"codespan\">overflow: hidden</code>. This case could also be resolved by setting <a href=\"#tooltip.confine\">tooltip.confine</a>, but it might not suitable for all scenarios.</p>\n<p>Here we provide <code class=\"codespan\">appendToBody: true</code> to auto append the tooltip element to <code class=\"codespan\">&lt;body&gt;</code>, which is a common way to resolve this kind of issue. But <code class=\"codespan\">true</code> is not set as a default value because to void to bring break change for some cases where tooltip is deeply customized and to void some unexpected bad cases.</p>\n<p>Note that it also works when CSS transform used.</p>\n","default":false},"transitionDuration":{"type":["number"],"description":"<p>The transition duration of tooltip&#39;s animation, in seconds. When it is set to be 0, it would move closely with the mouse.</p>\n","default":0.4},"position":{"type":["string","Array"],"description":"<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}},"axisPointer":{"type":["Object"],"description":"<p>This is the global configurations of axisPointer.</p>\n<hr>\n<p><code class=\"codespan\">axisPointer</code> is a tool for displaying reference line and axis value under mouse pointer.</p>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/candlestick-axisPointer&edit=1&reset=1\" width=\"600\" height=\"450\"><iframe />\n\n\n<p>In the demo above, <a href=\"#axisPointer.link\">axisPointer.link</a> is used to link axisPointer from different coordinate systems.</p>\n<p><code class=\"codespan\">axisPointer</code> can also be used on touch device, where user can drag the button to move the reference line and label.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-tooltip-touch&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n<p>In the cases that more than one axis exist, axisPointer helps to look inside the data.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=multiple-y-axis&edit=1&reset=1\" width=\"600\" height=\"300\"><iframe />\n\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=multiple-x-axis&edit=1&reset=1\" width=\"600\" height=\"300\"><iframe />\n\n\n\n<hr>\n<blockquote>\n<p><strong>Notice:</strong>\nGenerally, axisPointers is configured in each axes who need them (for example <a href=\"#xAxis.axisPointer\">xAxis.axisPointer</a>), or configured in <code class=\"codespan\">tooltip</code> (for example <a href=\"#tooltip.axisPointer\">tooltip.axisPointer</a>).</p>\n</blockquote>\n<blockquote>\n<p>But these configurations can only be configured in global axisPointer:\n<a href=\"#axisPointer.triggerOn\">axisPointer.triggerOn</a>, <a href=\"#axisPointer.link\">axisPointer.link</a>.</p>\n</blockquote>\n<hr>\n<hr>\n<p><strong>How to display axisPointer:</strong></p>\n<p>In <a href=\"#grid\">cartesian (grid)</a> and <a href=\"#single\">polar](~polar) and (single axis</a>, each axis has its own axisPointer.</p>\n<p>Those axisPointer will not be displayed by default, utill configured as follows:</p>\n<ul>\n<li><p>Set <code class=\"codespan\">someAxis.axisPointer.show</code> (like <a href=\"#xAxis.axisPointer.show\">xAxis.axisPointer.show</a>) as <code class=\"codespan\">true</code>. Then axisPointer of this axis will be displayed.</p>\n</li>\n<li><p>Set <a href=\"#tooltip.trigger\">tooltip.trigger</a> as <code class=\"codespan\">&#39;axis&#39;</code>, or set <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> as <code class=\"codespan\">&#39;cross&#39;</code>. Then coordinate system will automatically chose the axes who will display their axisPointers. (<a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> can be used to change the choice.) Notice, <code class=\"codespan\">axis.axisPointer</code> will override <code class=\"codespan\">tooltip.axisPointer</code> settings.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to display the label of axisPointer:</strong></p>\n<p>The label of axisPointer will not be displayed by default(namely, only reference line will be displayed by default), utill configured as follows:</p>\n<ul>\n<li><p>Set <code class=\"codespan\">someAxis.axisPointer.label.show</code> (for example <a href=\"#xAxis.axisPointer.show\">xAxis.axisPointer.label.show</a>) as <code class=\"codespan\">true</code>. Then the label of the axisPointer will be displayed.</p>\n</li>\n<li><p>Set <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> as  <code class=\"codespan\">&#39;cross&#39;</code>. Then the label of the crossed axisPointers will be displayed.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to configure axisPointer on touch device:</strong></p>\n<p>Set <code class=\"codespan\">someAxis.axisPointer.handle.show</code> (for example <a href=\"#xAxis.axisPointer.handle.show\">xAxis.axisPointer.handle.show</a> as <code class=\"codespan\">true</code>. Then the button for dragging will be displayed. (This feature is not supported on polar).</p>\n<p><strong>Notice:</strong>\nIf tooltip does not work well in this case, try to set<a href=\"#tooltip.triggerOn\">tooltip.triggerOn</a> as <code class=\"codespan\">&#39;none&#39;</code> (for the effect: show tooltip when finger holding on the button, and hide tooltip after finger left the button), or set <a href=\"#tooltip.alwaysShowContent\">tooltip.alwaysShowContent</a> as <code class=\"codespan\">true</code> (then tooltip will always be displayed).</p>\n<p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>.</p>\n<hr>\n<p><strong>Snap to point</strong></p>\n<p>In value axis and time axis, if <a href=\"#xAxis.axisPointer.snap\">snap</a> is set as true, axisPointer will snap to point automatically.</p>\n<hr>\n<hr>\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"show":{"type":["boolean"],"description":"<p>axisPointer will not be displayed by default. But if <a href=\"#tooltip.trigger\">tooltip.trigger</a> is set as <code class=\"codespan\">&#39;axis&#39;</code> or <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as  <code class=\"codespan\">&#39;cross&#39;</code>, axisPointer will be displayed automatically. Each coordinate system will automatically chose the axes whose will display its axisPointer. <a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> can be used to change the choice.</p>\n","default":false},"type":{"type":["string"],"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;line&#39;</code> line indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;shadow&#39;</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;none&#39;</code> no indicator displayed.</p>\n</li>\n</ul>\n","default":"'line'"},"snap":{"type":["boolean"],"description":"<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n"},"z":{"type":["number"],"description":"<p>z value, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n"},"label":{"type":["Object"],"description":"<p>label of axisPointer</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label. Label will not show by default. But if <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as  <code class=\"codespan\">&#39;cross&#39;</code>, label will be displayed automatically.</p>\n","default":false},"precision":{"type":["number","string"],"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code class=\"codespan\">&#39;2&#39;</code>, which indicates that two decimal fractions are reserved.</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"<p>The formatter of label.</p>\n<p>If set as <code class=\"codespan\">string</code>, for example it can be: <code class=\"codespan\">formatter: &#39;some text {value} some text</code>, where <code class=\"codespan\">{value}</code> will be replaced by axis value automatically.</p>\n<p>If set as <code class=\"codespan\">function</code>:</p>\n<p><strong>Parameters:</strong></p>\n<p><code class=\"codespan\">{Object}</code> params: Including fields as follows:</p>\n<p><code class=\"codespan\">{Object}</code> params.value: current value of this axis. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;category&#39;</code>, it is one of the value in <code class=\"codespan\">axis.data</code>. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;time&#39;</code>, it is a timestamp.</p>\n<p><code class=\"codespan\">{Array.&lt;Object&gt;}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<p><code class=\"codespan\">{string}</code> params.axisDimension: The dimension name of the axis. For example, in catesian it will be <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, and in polar it will be <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code>.</p>\n<p><code class=\"codespan\">{number}</code> params.axisIndex: The index of the axis, for example, <code class=\"codespan\">0</code>,<code class=\"codespan\">1</code>, <code class=\"codespan\">2</code>, ...</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n    axisDim: &#39;x&#39;, // &#39;x&#39;, &#39;y&#39;, &#39;angle&#39;, &#39;radius&#39;, &#39;single&#39;\n    axisId: &#39;xxx&#39;,\n    axisName: &#39;xxx&#39;,\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: &#39;text of value&#39;\n}\n</code></pre>\n<p><strong>Return:</strong></p>\n<p>The string to be displayed.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n    // If axis.type is &#39;time&#39;\n    return &#39;some text&#39; + echarts.format.formatTime(params.value);\n}\n</code></pre>\n","default":null},"margin":{"type":["boolean"],"description":"<p>Distance between label and axis.</p>\n","default":3},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"padding":{"type":["string","Array"],"description":"<p>axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"<p>Border color of label.</p>\n","default":null},"borderWidth":{"type":["string"],"description":"<p>Border width of label.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"lineStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;line&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"shadowStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;shadow&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"triggerTooltip":{"type":["boolean"],"description":"<p>Whether to trigger tooltip.</p>\n","default":true},"value":{"type":["number"],"description":"<p>current value. When using <a href=\"xAxisPointer.handle\" target=\"_blank\">axisPointer.handle</a>, <code class=\"codespan\">value</code> can be set to define the initail position of axisPointer.</p>\n","default":null},"status":{"type":["boolean"],"description":"<p>Current status, can be <code class=\"codespan\">&#39;show&#39;</code> 和 <code class=\"codespan\">&#39;hide&#39;</code>.</p>\n"},"handle":{"type":["Object"],"description":"<p>A button used to drag axisPointer. This feature is applicable in touch device. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set to <code class=\"codespan\">true</code> to use handle.</p>\n","default":false},"icon":{"type":["*"],"description":"<p>The icon of the handle.</p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/axisPointer-handle-image&amp;edit=1&amp;reset=1\" target=\"_blank\">example of using image</a></p>\n"},"size":{"type":["number","Array"],"description":"<p>The size of the handle, which can be set as a single value or an array (<code class=\"codespan\">[width, height]</code>).</p>\n","default":45},"margin":{"type":["number"],"description":"<p>Distance from handle center to axis.</p>\n","default":50},"color":{"type":["string"],"description":"<p>The color of the handle.</p>\n","default":"'#333'"},"throttle":{"type":["number"],"description":"<p>Throttle rate of trigger view update when dragging handle, in ms. Increase the value to improve performance, but decrease the experience.</p>\n","default":40},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":2},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"link":{"type":["Array"],"description":"<p>axisPointers can be linked to each other. The term &quot;link&quot; represents that axes are synchronized and move together. Axes are linked according to the value of axisPointer.</p>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/view.html?c=candlestick-brush&amp;edit=1&amp;reset=1\" target=\"_blank\">sampleA</a> and <a href=\"https://echarts.apache.org/examples/zh/view.html?c=scatter-nutrients-matrix&amp;edit=1&amp;reset=1\" target=\"_blank\">sampleB</a>.</p>\n<p>link is an array, where each item represents a &quot;link group&quot;. Axes will be linked when they are refered in the same link group. For example:</p>\n<pre><code class=\"lang-js\">link: [\n    {\n        // All axes with xAxisIndex 0, 3, 4 and yAxisName &#39;sameName&#39; will be linked.\n        xAxisIndex: [0, 3, 4],\n        yAxisName: &#39;someName&#39;\n    },\n    {\n        // All axes with xAxisId &#39;aa&#39;, &#39;cc&#39; and all angleAxis will be linked.\n        xAxisId: [&#39;aa&#39;, &#39;cc&#39;],\n        angleAxis: &#39;all&#39;\n    },\n    ...\n]\n</code></pre>\n<p>As illustrated above, axes can be refered in these approaches in a link group:</p>\n<pre><code class=\"lang-js\">{\n    // &#39;some&#39; represent the dimension name of a axis, namely, &#39;x&#39;, &#39;y&#39;, &#39;radius&#39;, &#39;angle&#39;, &#39;single&#39;\n    someAxisIndex: [...], // can be an array or a value or &#39;all&#39;\n    someAxisName: [...],  // can be an array or a value or &#39;all&#39;\n    someAxisId: [...],    // can be an array or a value or &#39;all&#39;\n}\n</code></pre>\n<hr>\n<hr>\n<p><strong>How to link axes with different <a href=\"#xAxis.type\">axis.type</a>?</strong></p>\n<p>For example, the type of axisA is &#39;category&#39;, and the type of axisB type is &#39;time&#39;, we can write conversion function (mapper) in link group to convert values from an axis to another axis. For example:</p>\n<pre><code class=\"lang-js\">link: [{\n    xAxisIndex: [0, 1],\n    yAxisName: [&#39;yy&#39;],\n    mapper: function (sourceVal, sourceAxisInfo, targetAxisInfo) {\n        if (sourceAxisInfo.axisName === &#39;yy&#39;) {\n            // from timestamp to &#39;2012-02-05&#39;\n            return echarts.format.formatTime(&#39;yyyy-MM-dd&#39;, sourceVal);\n        }\n        else if (targetAxisInfo.axisName === &#39;yy&#39;) {\n            // from &#39;2012-02-05&#39; to date\n            return echarts.number.parseDate(dates[sourceVal]);\n        }\n        else {\n            return sourceVal;\n        }\n    }\n}]\n</code></pre>\n<p>Input parameters of mapper:</p>\n<p><code class=\"codespan\">{number}</code> sourceVal</p>\n<p><code class=\"codespan\">{Object}</code> sourceAxisInfo Including {axisDim, axisId, axisName, axisIndex, ...}</p>\n<p><code class=\"codespan\">{Object}</code> targetAxisInfo Including {axisDim, axisId, axisName, axisIndex, ...}</p>\n<p>Return of mapper:</p>\n<p><code class=\"codespan\">{number}</code> The result of conversion.</p>\n"},"triggerOn":{"type":["string"],"description":"<p>Conditions to trigger tooltip. Options:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;mousemove&#39;</code></p>\n<p>  Trigger when mouse moves.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;click&#39;</code></p>\n<p>  Trigger when mouse clicks.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;mousemove|click&#39;</code></p>\n<p>  Trigger when mouse clicks and moves.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;none&#39;</code></p>\n<p>  Do not triggered by <code class=\"codespan\">&#39;mousemove&#39;</code> and <code class=\"codespan\">&#39;click&#39;</code></p>\n</li>\n</ul>\n","default":"'mousemove|click'"}}},"toolbox":{"type":["Object"],"description":"<p>A group of utility tools, which includes <a href=\"#toolbox.feature.saveAsImage\">export</a>, <a href=\"#toolbox.feature.dataView\">data view</a>, <a href=\"#toolbox.feature.magicType\">dynamic type switching</a>, <a href=\"#toolbox.feature.dataZoom\">data area zooming</a>, and <a href=\"#toolbox.feature.reset\">reset</a>.</p>\n<p><strong>Example: </strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-marker&reset=1&edit=1\" width=\"600\" height=\"400\"><iframe />\n\n\n\n\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"show":{"type":["boolean"],"description":"<p>Whether to show toolbox component.</p>\n","default":true},"orient":{"type":["string"],"description":"<p>The layout orientation of toolbox&#39;s icon.</p>\n<p>Options:</p>\n<ul>\n<li>&#39;horizontal&#39;</li>\n<li>&#39;vertical&#39;</li>\n</ul>\n","default":"'horizontal'"},"itemSize":{"type":["number"],"description":"<p>The size of toolbox&#39;s icon.</p>\n","default":15},"itemGap":{"type":["number"],"description":"<p>The gap between each icon of toolbox. It is horizontal gap in horizontal layout, while vertical gap in vertical layout.</p>\n","default":10},"showTitle":{"type":["boolean"],"description":"<p>Whether to show the title of each tool icon when mouse hovers.</p>\n","default":true},"feature":{"type":["Object"],"description":"<p>The configuration item for each tool.</p>\n<p>Besides the tools we provide, user-defined toolbox is also supported.</p>\n<p>Notes: User-defined tool name could only start with <code class=\"codespan\">my</code>, like <code class=\"codespan\">myTool1</code> and <code class=\"codespan\">myTool2</code> in the below example:</p>\n<pre><code class=\"lang-javascript\">{\n    toolbox: {\n        feature: {\n            myTool1: {\n                show: true,\n                title: &#39;custom extension method 1&#39;,\n                icon: &#39;path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891&#39;,\n                onclick: function (){\n                    alert(&#39;myToolHandler1&#39;)\n                }\n            },\n            myTool2: {\n                show: true,\n                title: &#39;custom extension method&#39;,\n                icon: &#39;image://http://echarts.baidu.com/images/favicon.png&#39;,\n                onclick: function (){\n                    alert(&#39;myToolHandler2&#39;)\n                }\n            }\n        }\n    }\n}\n</code></pre>\n","properties":{"saveAsImage":{"type":["Object"],"description":"<p>Save as image.</p>\n","properties":{"type":{"type":["string"],"description":"<p>File suffix of the image saved.</p>\n<ul>\n<li>If the <code class=\"codespan\">renderer</code> is set to be <code class=\"codespan\">&#39;canvas&#39;</code> when chart <a href=\"api.html#echarts.init\" target=\"_blank\">initialized</a> (default), then <code class=\"codespan\">&#39;png&#39;</code> (default) and <code class=\"codespan\">&#39;jpeg&#39;</code> are supported.</li>\n<li>If the <code class=\"codespan\">renderer</code> is set to be <code class=\"codespan\">&#39;svg&#39;</code> when when chart <a href=\"api.html#echarts.init\" target=\"_blank\">initialized</a>, then only <code class=\"codespan\">&#39;svg&#39;</code> is supported for <code class=\"codespan\">type</code> (<code class=\"codespan\">&#39;svg&#39;</code> type is supported since <code class=\"codespan\">v4.8.0</code>).</li>\n</ul>\n","default":"'png'"},"name":{"type":["string"],"description":"<p>Name to save the image, whose default value is <a href=\"#title.text\">title.text</a>.</p>\n"},"backgroundColor":{"type":["Color"],"description":"<p>Background color to save the image, whose default value is <a href=\"#backgroundColor\">backgroundColor</a>. If <code class=\"codespan\">backgroundColor</code> is not set, white color is used.</p>\n","default":"'auto'"},"connectedBackgroundColor":{"type":["Color"],"description":"<p>When <a href=\"api.html#echarts.connect\" target=\"_blank\">echarts.connect</a> is used to connect the interaction of multiple chart series, they will all be included in the exported image. This option sets the background color between these charts.</p>\n","default":"'#fff'"},"excludeComponents":{"type":["Array"],"description":"<p>Components to be excluded when export. By default, toolbox is excluded.</p>\n","default":"['toolbox']"},"show":{"type":["boolean"],"description":"<p>Whether to show the tool.</p>\n","default":true},"title":{"type":["string"],"description":"","default":"'save as image'"},"icon":{"type":["*"],"description":"<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"iconStyle":{"type":["Object"],"description":"<p>The style setting of save as image icon. Since icon label is displayed only when hovering on the icon, the label configuration options are available under <code class=\"codespan\">emphasis</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"none"},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"#666"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"iconStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"textPosition":{"type":["string"],"description":"<p>Text position: <code class=\"codespan\">&#39;left&#39;</code> / <code class=\"codespan\">&#39;right&#39;</code> / <code class=\"codespan\">&#39;top&#39;</code> / <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n","default":"'bottom'"},"textFill":{"type":["string"],"description":"<p>Fill color of text. If it&#39;s not set, it will use in the order of icon&#39;s fill color, stroke color, and <code class=\"codespan\">&#39;#000&#39;</code>.</p>\n","default":"'#000'"},"textAlign":{"type":["string"],"description":"<p>Text align: <code class=\"codespan\">&#39;left&#39;</code> / <code class=\"codespan\">&#39;center&#39;</code> / <code class=\"codespan\">&#39;right&#39;</code>.</p>\n","default":"'center'"},"textBackgroundColor":{"type":["string"],"description":"<p>Text background color.</p>\n"},"textBorderRadius":{"type":["number"],"description":"<p>Border radius of text area.</p>\n"},"textPadding":{"type":["number"],"description":"<p>Padding of text area.</p>\n"}}}}},"pixelRatio":{"type":["number"],"description":"<p>Resolution ratio to save image, whose default value is that of the container. Values larger than 1 (e.g.: 2) is supported when you need higher resolution.</p>\n","default":1}}},"restore":{"type":["Object"],"description":"<p>Restore configuration item.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the tool.</p>\n","default":true},"title":{"type":["string"],"description":"","default":"'restore'"},"icon":{"type":["*"],"description":"<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"iconStyle":{"type":["Object"],"description":"<p>The style setting of restore icon. Since icon label is displayed only when hovering on the icon, the label configuration options are available under <code class=\"codespan\">emphasis</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"none"},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"#666"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"iconStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"textPosition":{"type":["string"],"description":"<p>Text position: <code class=\"codespan\">&#39;left&#39;</code> / <code class=\"codespan\">&#39;right&#39;</code> / <code class=\"codespan\">&#39;top&#39;</code> / <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n","default":"'bottom'"},"textFill":{"type":["string"],"description":"<p>Fill color of text. If it&#39;s not set, it will use in the order of icon&#39;s fill color, stroke color, and <code class=\"codespan\">&#39;#000&#39;</code>.</p>\n","default":"'#000'"},"textAlign":{"type":["string"],"description":"<p>Text align: <code class=\"codespan\">&#39;left&#39;</code> / <code class=\"codespan\">&#39;center&#39;</code> / <code class=\"codespan\">&#39;right&#39;</code>.</p>\n","default":"'center'"},"textBackgroundColor":{"type":["string"],"description":"<p>Text background color.</p>\n"},"textBorderRadius":{"type":["number"],"description":"<p>Border radius of text area.</p>\n"},"textPadding":{"type":["number"],"description":"<p>Padding of text area.</p>\n"}}}}}}},"dataView":{"type":["Object"],"description":"<p>Data view tool, which could display data in current chart and updates chart after being edited.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the tool.</p>\n","default":true},"title":{"type":["string"],"description":"","default":"'data view'"},"icon":{"type":["*"],"description":"<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"iconStyle":{"type":["Object"],"description":"<p>The style setting of data view icon. Since icon label is displayed only when hovering on the icon, the label configuration options are available under <code class=\"codespan\">emphasis</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"none"},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"#666"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"iconStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"textPosition":{"type":["string"],"description":"<p>Text position: <code class=\"codespan\">&#39;left&#39;</code> / <code class=\"codespan\">&#39;right&#39;</code> / <code class=\"codespan\">&#39;top&#39;</code> / <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n","default":"'bottom'"},"textFill":{"type":["string"],"description":"<p>Fill color of text. If it&#39;s not set, it will use in the order of icon&#39;s fill color, stroke color, and <code class=\"codespan\">&#39;#000&#39;</code>.</p>\n","default":"'#000'"},"textAlign":{"type":["string"],"description":"<p>Text align: <code class=\"codespan\">&#39;left&#39;</code> / <code class=\"codespan\">&#39;center&#39;</code> / <code class=\"codespan\">&#39;right&#39;</code>.</p>\n","default":"'center'"},"textBackgroundColor":{"type":["string"],"description":"<p>Text background color.</p>\n"},"textBorderRadius":{"type":["number"],"description":"<p>Border radius of text area.</p>\n"},"textPadding":{"type":["number"],"description":"<p>Padding of text area.</p>\n"}}}}},"readOnly":{"type":["boolean"],"description":"<p>Whether it is read-only.</p>\n","default":false},"optionToContent":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(option:Object) =&gt; HTMLDomElement|string\n</code></pre>\n<p>Define a function to present dataView. It is used to replace default textarea for richer data editing. It can return a DOM object, or an HTML string.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">optionToContent: function(opt) {\n    var axisData = opt.xAxis[0].data;\n    var series = opt.series;\n    var table = &#39;&lt;table style=&quot;width:100%;text-align:center&quot;&gt;&lt;tbody&gt;&lt;tr&gt;&#39;\n                 + &#39;&lt;td&gt;Time:&lt;/td&gt;&#39;\n                 + &#39;&lt;td&gt;&#39; + series[0].name + &#39;&lt;/td&gt;&#39;\n                 + &#39;&lt;td&gt;&#39; + series[1].name + &#39;&lt;/td&gt;&#39;\n                 + &#39;&lt;/tr&gt;&#39;;\n    for (var i = 0, l = axisData.length; i &lt; l; i++) {\n        table += &#39;&lt;tr&gt;&#39;\n                 + &#39;&lt;td&gt;&#39; + axisData[i] + &#39;&lt;/td&gt;&#39;\n                 + &#39;&lt;td&gt;&#39; + series[0].data[i] + &#39;&lt;/td&gt;&#39;\n                 + &#39;&lt;td&gt;&#39; + series[1].data[i] + &#39;&lt;/td&gt;&#39;\n                 + &#39;&lt;/tr&gt;&#39;;\n    }\n    table += &#39;&lt;/tbody&gt;&lt;/table&gt;&#39;;\n    return table;\n}\n</code></pre>\n"},"contentToOption":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(container:HTMLDomElement, option:Object) =&gt; Object\n</code></pre>\n<p>When optionToContent is used, if you want to support refreshing chart after data changes, you need to implement the logic to merge options in this function.</p>\n"},"lang":{"type":["Array"],"description":"<p>There are 3 names in data view, which are <code class=\"codespan\">[&#39;data view&#39;, &#39;turn off&#39; and &#39;refresh&#39;]</code>.</p>\n","default":"['data view', 'turn off', 'refresh']"},"backgroundColor":{"type":["string"],"description":"<p>Background color of the floating layer in data view.</p>\n","default":"'#fff'"},"textareaColor":{"type":["string"],"description":"<p>Background color of input area of the floating layer in data view.</p>\n","default":"'#fff'"},"textareaBorderColor":{"type":["string"],"description":"<p>Border color of input area of the floating layer in data view.</p>\n","default":"'#333'"},"textColor":{"type":["string"],"description":"<p>Text color.</p>\n","default":"'#000'"},"buttonColor":{"type":["string"],"description":"<p>Button color.</p>\n","default":"'#c23531'"},"buttonTextColor":{"type":["string"],"description":"<p>Color of button text.</p>\n","default":"'#fff'"}}},"dataZoom":{"type":["Object"],"description":"<p>Data area zooming, which only supports rectangular coordinate by now.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the tool.</p>\n","default":true},"title":{"type":["Object"],"description":"<p>Restored and zoomed title text.</p>\n","properties":{"zoom":{"type":["string"],"description":"","default":"'area zooming'"},"back":{"type":["string"],"description":"","default":"'restore area zooming'"}}},"icon":{"type":["Object"],"description":"<p>Zooming and restore icon path.</p>\n","properties":{"zoom":{"type":["string"],"description":"<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"back":{"type":["string"],"description":"<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"}}},"iconStyle":{"type":["Object"],"description":"<p>The style setting of data area zooming icon. Since icon label is displayed only when hovering on the icon, the label configuration options are available under <code class=\"codespan\">emphasis</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"none"},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"#666"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"iconStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"textPosition":{"type":["string"],"description":"<p>Text position: <code class=\"codespan\">&#39;left&#39;</code> / <code class=\"codespan\">&#39;right&#39;</code> / <code class=\"codespan\">&#39;top&#39;</code> / <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n","default":"'bottom'"},"textFill":{"type":["string"],"description":"<p>Fill color of text. If it&#39;s not set, it will use in the order of icon&#39;s fill color, stroke color, and <code class=\"codespan\">&#39;#000&#39;</code>.</p>\n","default":"'#000'"},"textAlign":{"type":["string"],"description":"<p>Text align: <code class=\"codespan\">&#39;left&#39;</code> / <code class=\"codespan\">&#39;center&#39;</code> / <code class=\"codespan\">&#39;right&#39;</code>.</p>\n","default":"'center'"},"textBackgroundColor":{"type":["string"],"description":"<p>Text background color.</p>\n"},"textBorderRadius":{"type":["number"],"description":"<p>Border radius of text area.</p>\n"},"textPadding":{"type":["number"],"description":"<p>Padding of text area.</p>\n"}}}}},"filterMode":{"type":["string"],"description":"<p>The same meaning as <a href=\"#dataZoom.filterMode\">dataZoom.filterMode</a>.</p>\n","default":"'filter'"},"xAxisIndex":{"type":["number","Array","boolean"],"description":"<p>Defines which <a href=\"#xAxis\">xAxis</a> should be controlled. By default, it controls all x axes. If it is set to be <code class=\"codespan\">false</code>, then no x axis is controlled. If it is set to be then it controls axis with axisIndex of <code class=\"codespan\">3</code>. If it is set to be <code class=\"codespan\">[0, 3]</code>, it controls the x-axes with axisIndex of <code class=\"codespan\">0</code> and <code class=\"codespan\">3</code>.</p>\n"},"yAxisIndex":{"type":["number","Array","boolean"],"description":"<p>Defines which <a href=\"#yAxis\">yAxis</a> should be controlled. By default, it controls all y axes. If it is set to be <code class=\"codespan\">false</code>, then no y axis is controlled. If it is set to be then it controls axis with axisIndex of <code class=\"codespan\">3</code>. If it is set to be <code class=\"codespan\">[0, 3]</code>, it controls the x-axes with axisIndex of <code class=\"codespan\">0</code> and <code class=\"codespan\">3</code>.</p>\n"}}},"magicType":{"type":["Object"],"description":"<p>Magic type switching.\n<strong>示例: </strong></p>\n<pre><code class=\"lang-js\">feature: {\n    magicType: {\n        type: [&#39;line&#39;, &#39;bar&#39;, &#39;stack&#39;, &#39;tiled&#39;]\n    }\n}\n</code></pre>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the tool.</p>\n","default":true},"type":{"type":["Array"],"description":"<p>Enabled magic types, including <code class=\"codespan\">&#39;line&#39;</code> (for line charts), <code class=\"codespan\">&#39;bar&#39;</code> (for bar charts), <code class=\"codespan\">&#39;stack&#39;</code> (for stacked charts), and <code class=\"codespan\">&#39;tiled&#39;</code> (for tiled charts).</p>\n"},"title":{"type":["Object"],"description":"<p>Title for different types, can be configured seperately.</p>\n","properties":{"line":{"type":["string"],"description":"","default":"'for line charts'"},"bar":{"type":["string"],"description":"","default":"'for bar charts'"},"stack":{"type":["string"],"description":"","default":"'for stacked charts'"},"tiled":{"type":["string"],"description":"","default":"'for tiled charts'"}}},"icon":{"type":["Object"],"description":"<p>the different types of icon path , which could be configurated individually.</p>\n","properties":{"line":{"type":["string"],"description":"<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"bar":{"type":["string"],"description":"<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"stack":{"type":["string"],"description":"<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"tiled":{"type":["string"],"description":"<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"}}},"iconStyle":{"type":["Object"],"description":"<p>The style setting of magic type switching icon. Since icon label is displayed only when hovering on the icon, the label configuration options are available under <code class=\"codespan\">emphasis</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"none"},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"#666"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"iconStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"textPosition":{"type":["string"],"description":"<p>Text position: <code class=\"codespan\">&#39;left&#39;</code> / <code class=\"codespan\">&#39;right&#39;</code> / <code class=\"codespan\">&#39;top&#39;</code> / <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n","default":"'bottom'"},"textFill":{"type":["string"],"description":"<p>Fill color of text. If it&#39;s not set, it will use in the order of icon&#39;s fill color, stroke color, and <code class=\"codespan\">&#39;#000&#39;</code>.</p>\n","default":"'#000'"},"textAlign":{"type":["string"],"description":"<p>Text align: <code class=\"codespan\">&#39;left&#39;</code> / <code class=\"codespan\">&#39;center&#39;</code> / <code class=\"codespan\">&#39;right&#39;</code>.</p>\n","default":"'center'"},"textBackgroundColor":{"type":["string"],"description":"<p>Text background color.</p>\n"},"textBorderRadius":{"type":["number"],"description":"<p>Border radius of text area.</p>\n"},"textPadding":{"type":["number"],"description":"<p>Padding of text area.</p>\n"}}}}},"option":{"type":["Object"],"description":"<p>Configuration item for each type, which will be used when switching to certain type.</p>\n","properties":{"line":{"type":["Object"],"description":""},"bar":{"type":["Object"],"description":""},"stack":{"type":["Object"],"description":""},"tiled":{"type":["Object"],"description":""}}},"seriesIndex":{"type":["Object"],"description":"<p>Series list for each type.</p>\n","properties":{"line":{"type":["Array"],"description":""},"bar":{"type":["Array"],"description":""},"stack":{"type":["Array"],"description":""},"tiled":{"type":["Array"],"description":""}}}}},"brush":{"type":["Object"],"description":"<p>Brush-selecting icon.</p>\n<p>It can also be configured at <a href=\"#brush.toolbox\">brush.toolbox</a>.</p>\n","properties":{"type":{"type":["Array"],"description":"<p>Icons used, whose values are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;rect&#39;</code>: Enabling selecting with rectangle area.</li>\n<li><code class=\"codespan\">&#39;polygon&#39;</code>: Enabling selecting with any shape.</li>\n<li><code class=\"codespan\">&#39;lineX&#39;</code>: Enabling horizontal selecting.</li>\n<li><code class=\"codespan\">&#39;lineY&#39;</code>: Enabling vertical selecting.</li>\n<li><code class=\"codespan\">&#39;keep&#39;</code>: Switching between <em>single selecting</em> and <em>multiple selecting</em>. The latter one can select multiple areas, while the former one cancels previous selection.</li>\n<li><code class=\"codespan\">&#39;clear&#39;</code>: Clearing all selection.</li>\n</ul>\n"},"icon":{"type":["Object"],"description":"<p>Icon path for each icon.</p>\n","properties":{"rect":{"type":["string"],"description":"<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"polygon":{"type":["string"],"description":"<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"lineX":{"type":["string"],"description":"<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"lineY":{"type":["string"],"description":"<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"keep":{"type":["string"],"description":"<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"clear":{"type":["string"],"description":"<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"}}},"title":{"type":["Object"],"description":"<p>Title.</p>\n","properties":{"rect":{"type":["string"],"description":"","default":"'Rectangle selection'"},"polygon":{"type":["string"],"description":"","default":"'Polygon selection'"},"lineX":{"type":["string"],"description":"","default":"'Horizontal selection'"},"lineY":{"type":["string"],"description":"","default":"'Vertical selection'"},"keep":{"type":["string"],"description":"","default":"'Keep previous selection'"},"clear":{"type":["string"],"description":"","default":"'Clear selection'"}}}}}}},"iconStyle":{"type":["Object"],"description":"<p>The style setting of Shared icon. Since icon label is displayed only when hovering on the icon, the label configuration options are available under <code class=\"codespan\">emphasis</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"none"},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"#666"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"iconStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"textPosition":{"type":["string"],"description":"<p>Text position: <code class=\"codespan\">&#39;left&#39;</code> / <code class=\"codespan\">&#39;right&#39;</code> / <code class=\"codespan\">&#39;top&#39;</code> / <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n","default":"'bottom'"},"textFill":{"type":["string"],"description":"<p>Fill color of text. If it&#39;s not set, it will use in the order of icon&#39;s fill color, stroke color, and <code class=\"codespan\">&#39;#000&#39;</code>.</p>\n","default":"'#000'"},"textAlign":{"type":["string"],"description":"<p>Text align: <code class=\"codespan\">&#39;left&#39;</code> / <code class=\"codespan\">&#39;center&#39;</code> / <code class=\"codespan\">&#39;right&#39;</code>.</p>\n","default":"'center'"},"textBackgroundColor":{"type":["string"],"description":"<p>Text background color.</p>\n"},"textBorderRadius":{"type":["number"],"description":"<p>Border radius of text area.</p>\n"},"textPadding":{"type":["number"],"description":"<p>Padding of text area.</p>\n"}}}}},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between toolbox component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"top":{"type":["string","number"],"description":"<p>Distance between toolbox component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"right":{"type":["string","number"],"description":"<p>Distance between toolbox component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"<p>Distance between toolbox component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"width":{"type":["string","number"],"description":"<p>Width of toolbox component. Adaptive by default.</p>\n","default":"'auto'"},"height":{"type":["string","number"],"description":"<p>Height of toolbox component. Adaptive by default.</p>\n","default":"'auto'"},"tooltip":{"type":["Object"],"description":"<p>Tooltip configuration for toolbox tooltip, which is similar to <a href=\"#tooltip\">tooltip</a>. It is not shown by default. If you wish to set special style for toolbox icon label (especially when using CSS to control text style), you may set as the following example:</p>\n<pre><code class=\"lang-js\">option = {\n    tooltip: {\n        show: true // include tooltip component for the feature\n    },\n    toolbox: {\n        show: true,\n        showTitle: false, // hide the default text so they don&#39;t overlap each other\n        feature: {\n            saveAsImage: {\n                show: true,\n                title: &#39;Save As Image&#39;\n            },\n            dataView: {\n                show: true,\n                title: &#39;Data View&#39;\n            },\n        },\n        tooltip: { // same as option.tooltip\n            show: true,\n            formatter: function (param) {\n                return return &#39;&lt;div&gt;&#39; + param.title + &#39;&lt;/div&gt;&#39;; // user-defined DOM structure\n            },\n            backgroundColor: &#39;#222&#39;,\n            textStyle: {\n                fontSize: 12,\n            },\n            extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39; // user-defined CSS styles\n        }\n    },\n    ...\n}\n</code></pre>\n"}}},"brush":{"type":["Object"],"description":"<p><code class=\"codespan\">brush</code> is an area-selecting component, with which user can select part of data from a chart to display in detail, or do calculations with them.</p>\n<p><br></p>\n<hr>\n<p><strong>Brush type and triggering button</strong></p>\n<p>Currently, supported <code class=\"codespan\">brush</code> types include: <code class=\"codespan\">scatter</code>, <code class=\"codespan\">bar</code>, <code class=\"codespan\">candlestick</code>. (Note that <code class=\"codespan\">parallel</code> contains brush function by itself, which is not provided by brush component.)</p>\n<p>Click the button in <code class=\"codespan\">toolbox</code> to enable operations like <em>area selecting</em>, or <em>canceling selecting</em>.</p>\n<p><br>\nExample of <code class=\"codespan\">horizontal brush</code>: (Click the button in <code class=\"codespan\">toolbox</code> to enable brushing.)</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=candlestick-brush&edit=1&reset=1\" width=\"800\" height=\"500\"><iframe />\n\n\n<p><br>\nExample of <code class=\"codespan\">brush</code> in <code class=\"codespan\">bar</code> charts:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-brush&edit=1&reset=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n<p>Button for <code class=\"codespan\">brush</code> can be assigned in <a href=\"#toolbox.feature.brush.type\"><code class=\"codespan\">toolbox</code></a> or <a href=\"#brush.toolbox\"><code class=\"codespan\">brush</code> configuration</a>.</p>\n<p>The following types of brushes are supported: <code class=\"codespan\">rect</code>, <code class=\"codespan\">polygon</code>, <code class=\"codespan\">lineX</code>, <code class=\"codespan\">lineY</code>. See <a href=\"#brush.toolbox\">brush.toolbox</a> for more information.</p>\n<p><code class=\"codespan\">keep</code> button can be used to toggle a single or multiple selections.</p>\n<ul>\n<li>Only one select box is available in single selection mode, and the select-box can be removed by clicking on the blank area.</li>\n<li>Multiple select boxes are available in multiple selection mode, and the select-boxes cannot be removed by click on the blank area. Instead, you need to click the <em>clear</em> button.</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>Relationship between brush-selecting and coordinates</strong></p>\n<p><code class=\"codespan\">brush</code> can be set to be <em>global</em>, or <em>belonging to a particular coordinate</em>.</p>\n<p><strong>Global brushes</strong></p>\n<p>Selecting is enabled for everywhere in ECharts&#39;s instance in this case. This is the default situation, when brush is not set to be global.</p>\n<p><strong>Coordinate brushes</strong></p>\n<p>Selecting is enabled only in the assigned coordinates in this case. Selecting-box will be altered according to scaling and translating of coordinate (see <code class=\"codespan\">roam</code> and <code class=\"codespan\">dataZoom</code>).</p>\n<p>In practice, you may often find coordinate brush to be a more frequently made choice, particularly in <code class=\"codespan\">geo</code> charts.</p>\n<p>By assigning <a href=\"#brush.geoIndex\">brush.geoIndex</a>, or <a href=\"#brush.xAxisIndex\">brush.xAxisIndex</a>, or <a href=\"#brush.yAxisIndex\">brush.yAxisIndex</a>, brush selecting axes can be assigned, whose value can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;all&#39;</code>: for all axes;</li>\n<li><code class=\"codespan\">number</code>: like <code class=\"codespan\">0</code>, for a particular coordinate with that index;</li>\n<li><code class=\"codespan\">Array</code>: like <code class=\"codespan\">[0, 4, 2]</code>, for coordinates with those indexes;</li>\n<li><code class=\"codespan\">&#39;none&#39;</code>, or <code class=\"codespan\">null</code>, or <code class=\"codespan\">undefined</code>: for not assigning.</li>\n</ul>\n<p>Example:</p>\n<pre><code class=\"lang-javascript\">option = {\n    geo: {\n        ...\n    },\n    brush: {\n        geoIndex: &#39;all&#39;, // brush selecting is enabled only in all geo charts above\n        ...\n    }\n};\n</code></pre>\n<p>Example:</p>\n<pre><code class=\"lang-javascript\">option = {\n    grid: [\n        {...}, // grid 0\n        {...}  // grid 1\n    ],\n    xAxis: [\n        {gridIndex: 1, ...}, // xAxis 0 for grid 1\n        {gridIndex: 0, ...}  // xAxis 1 for grid 0\n    ],\n    yAxis: [\n        {gridIndex: 1, ...}, // yAxis 0 for grid 1\n        {gridIndex: 0, ...}  // yAxis 1 for grid 0\n    ],\n    brush: {\n        xAxisIndex: [0, 1], // brush selecting is enabled only in coordinates with xAxisIndex as `0` or `1`\n        ...\n    }\n};\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>Control select-box with API</strong></p>\n<p><code class=\"codespan\">dispatchAction</code> can be used to render select-box programatically. For example:</p>\n<pre><code class=\"lang-javascript\">myChart.dispatchAction({\n    type: &#39;brush&#39;,\n    areas: [\n        {\n            geoIndex: 0,\n            // Assign select-box type\n            brushType: &#39;polygon&#39;,\n            // Assign select-box shape\n            coordRange: [[119.72,34.85],[119.68,34.85],[119.5,34.84],[119.19,34.77]]\n        }\n    ]\n});\n</code></pre>\n<p>Please refer to <a href=\"api.html#action.brush\" target=\"_blank\">action.brush</a> for more information.</p>\n<p><br></p>\n<hr>\n<p><strong>brushLink</strong></p>\n<p>Links interaction between selected items in different series.</p>\n<p>Following is an example of enabling selected effect for <code class=\"codespan\">scatter</code> and <code class=\"codespan\">parallel</code> charts once a scatter chart is selected.</p>\n<p><code class=\"codespan\">brushLink</code> is an array of <code class=\"codespan\">seriesIndex</code>es, which assignes the series that can be interacted. For example, it can be:</p>\n<ul>\n<li><code class=\"codespan\">[3, 4, 5]</code> for interacting series with seriesIndex as <code class=\"codespan\">3</code>, <code class=\"codespan\">4</code>, or <code class=\"codespan\">5</code>;</li>\n<li><code class=\"codespan\">&#39;all&#39;</code> for interacting all series;</li>\n<li><code class=\"codespan\">&#39;none&#39;</code>, or <code class=\"codespan\">null</code>, or <code class=\"codespan\">undefined</code> for disabling <code class=\"codespan\">brushLink</code>.</li>\n</ul>\n<p><strong>Attention</strong></p>\n<p><code class=\"codespan\">brushLink</code> is a mapping of <code class=\"codespan\">dataIndex</code>. So <strong><code class=\"codespan\">data</code> of every series with <code class=\"codespan\">brushLink</code> should be guaranteed to correspond to the other</strong>.</p>\n<p>Example:</p>\n<pre><code class=\"lang-javascript\">option = {\n    brush: {\n        brushLink: [0, 1]\n    },\n    series: [\n        {\n            type: &#39;bar&#39;\n            data: [232,    4434,    545,      654]     // data has 4 items\n        },\n        {\n            type: &#39;parallel&#39;,\n            data: [[4, 5], [3, 5], [66, 33], [99, 66]] // data also has 4 items, which correspond to the data above\n        }\n    ]\n};\n</code></pre>\n<p>Please refer to <a href=\"#brush.brushLink\">brush.brushLink</a>.</p>\n<p><br></p>\n<hr>\n<p><strong>throttle / debounce</strong></p>\n<p>By default, <code class=\"codespan\">brushSelected</code> is always triggered when selection-box is selected or moved, to tell the outside about the event.</p>\n<p>But efficiency problems may occur when events are triggered too frequently, or the animation result may be affected. So brush components provides <a href=\"#brush.throttleType\">brush.throttleType</a> and <a href=\"#brush.throttleDelay\">brush.throttleDelay</a> to solve this problem.</p>\n<p>Valid <code class=\"codespan\">throttleType</code> values can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;debounce&#39;</code>: for triggering events only when the action has been stopped (no action after some duration). Time threshold can be assigned with <a href=\"#brush.throttleDelay\">brush.throttleDelay</a>;</li>\n<li><code class=\"codespan\">&#39;fixRate&#39;</code>: for triggering event with a certain frequency. The frequency can be assigned with <a href=\"#brush.throttleDelay\">brush.throttleDelay</a>.</li>\n</ul>\n<p>In this <a href=\"https://echarts.apache.org/examples/zh/view.html?c=scatter-map-brush&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>, <code class=\"codespan\">debounce</code> is used to make sure the bar chart is updated only when the user has stopped action. In other cases, the animation result may not be so good.</p>\n<p><br></p>\n<hr>\n<p><strong>Visual configurations of selected and unselected items</strong></p>\n<p>Refer to <a href=\"#brush.inBrush\">brush.inBrush</a> and <a href=\"#brush.outOfBrush\">brush.outOfBrush</a>.</p>\n<p><br></p>\n<hr>\n<p>Here is the configuration in detail.</p>\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"toolbox":{"type":["Array"],"description":"<p>Use the buttons in toolbox.</p>\n<p>Buttons in toolbox that is related to brush includes:</p>\n<ul>\n<li><code class=\"codespan\">&#39;rect&#39;</code>: for selection-box in rectangle shape;</li>\n<li><code class=\"codespan\">&#39;polygon&#39;</code>: for selection-box in polygon shape;</li>\n<li><code class=\"codespan\">&#39;lineX&#39;</code>: for horizontal selection-box;</li>\n<li><code class=\"codespan\">&#39;lineY&#39;</code>: for vertical selection-box;</li>\n<li><code class=\"codespan\">&#39;keep&#39;</code>: for setting mode between <code class=\"codespan\">single</code> and <code class=\"codespan\">multiple</code> selection, the former of which supports clearing selection on click, and the latter selecting multiple areas;</li>\n<li><code class=\"codespan\">&#39;clear&#39;</code>: for clearing all selections.</li>\n</ul>\n","default":"['rect', 'polygon', 'keep', 'clear']"},"brushLink":{"type":["Array","string"],"description":"<p>Links interaction between selected items in different series.</p>\n<p>Following is an example of enabling selected effect for <code class=\"codespan\">scatter</code> and <code class=\"codespan\">parallel</code> charts once a scatter chart is selected.</p>\n<p><code class=\"codespan\">brushLink</code> is an array of <code class=\"codespan\">seriesIndex</code>es, which assignes the series that can be interacted. For example, it can be:</p>\n<ul>\n<li><code class=\"codespan\">[3, 4, 5]</code> for interacting series with seriesIndex as <code class=\"codespan\">3</code>, <code class=\"codespan\">4</code>, or <code class=\"codespan\">5</code>;</li>\n<li><code class=\"codespan\">&#39;all&#39;</code> for interacting all series;</li>\n<li><code class=\"codespan\">&#39;none&#39;</code>, or <code class=\"codespan\">null</code>, or <code class=\"codespan\">undefined</code> for disabling <code class=\"codespan\">brushLink</code>.</li>\n</ul>\n<p><strong>Attention</strong></p>\n<p><code class=\"codespan\">brushLink</code> is a mapping of <code class=\"codespan\">dataIndex</code>. So <strong><code class=\"codespan\">data</code> of every series with <code class=\"codespan\">brushLink</code> should be guaranteed to correspond to the other</strong>.</p>\n<p>Example:</p>\n<pre><code class=\"lang-javascript\">option = {\n    brush: {\n        brushLink: [0, 1]\n    },\n    series: [\n        {\n            type: &#39;bar&#39;\n            data: [232,    4434,    545,      654]     // data has 4 items\n        },\n        {\n            type: &#39;parallel&#39;,\n            data: [[4, 5], [3, 5], [66, 33], [99, 66]] // data also has 4 items, which correspond to the data above\n        }\n    ]\n};\n</code></pre>\n","default":null},"seriesIndex":{"type":["Array","number","string"],"description":"<p>Assigns which of the series can use brush selecting, whose value can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;all&#39;</code>: all series;</li>\n<li><code class=\"codespan\">&#39;Array&#39;</code>: series index array;</li>\n<li><code class=\"codespan\">&#39;number&#39;</code>: certain series index.</li>\n</ul>\n","default":"'all'"},"geoIndex":{"type":["Array","number","string"],"description":"<p>Assigns which of the geo can use brush selecting.</p>\n<p><code class=\"codespan\">brush</code> can be set to be <em>global</em>, or <em>belonging to a particular coordinate</em>.</p>\n<p><strong>Global brushes</strong></p>\n<p>Selecting is enabled for everywhere in ECharts&#39;s instance in this case. This is the default situation, when brush is not set to be global.</p>\n<p><strong>Coordinate brushes</strong></p>\n<p>Selecting is enabled only in the assigned coordinates in this case. Selecting-box will be altered according to scaling and translating of coordinate (see <code class=\"codespan\">roam</code> and <code class=\"codespan\">dataZoom</code>).</p>\n<p>In practice, you may often find coordinate brush to be a more frequently made choice, particularly in <code class=\"codespan\">geo</code> charts.</p>\n<p>By assigning <a href=\"#brush.geoIndex\">brush.geoIndex</a>, or <a href=\"#brush.xAxisIndex\">brush.xAxisIndex</a>, or <a href=\"#brush.yAxisIndex\">brush.yAxisIndex</a>, brush selecting axes can be assigned, whose value can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;all&#39;</code>: for all axes;</li>\n<li><code class=\"codespan\">number</code>: like <code class=\"codespan\">0</code>, for a particular coordinate with that index;</li>\n<li><code class=\"codespan\">Array</code>: like <code class=\"codespan\">[0, 4, 2]</code>, for coordinates with those indexes;</li>\n<li><code class=\"codespan\">&#39;none&#39;</code>, or <code class=\"codespan\">null</code>, or <code class=\"codespan\">undefined</code>: for not assigning.</li>\n</ul>\n<p>Example:</p>\n<pre><code class=\"lang-javascript\">option = {\n    geo: {\n        ...\n    },\n    brush: {\n        geoIndex: &#39;all&#39;, // brush selecting is enabled only in all geo charts above\n        ...\n    }\n};\n</code></pre>\n<p>Example:</p>\n<pre><code class=\"lang-javascript\">option = {\n    grid: [\n        {...}, // grid 0\n        {...}  // grid 1\n    ],\n    xAxis: [\n        {gridIndex: 1, ...}, // xAxis 0 for grid 1\n        {gridIndex: 0, ...}  // xAxis 1 for grid 0\n    ],\n    yAxis: [\n        {gridIndex: 1, ...}, // yAxis 0 for grid 1\n        {gridIndex: 0, ...}  // yAxis 1 for grid 0\n    ],\n    brush: {\n        xAxisIndex: [0, 1], // brush selecting is enabled only in coordinates with xAxisIndex as `0` or `1`\n        ...\n    }\n};\n</code></pre>\n","default":null},"xAxisIndex":{"type":["Array","number","string"],"description":"<p>Assigns which of the xAxisIndex can use brush selecting.</p>\n<p><code class=\"codespan\">brush</code> can be set to be <em>global</em>, or <em>belonging to a particular coordinate</em>.</p>\n<p><strong>Global brushes</strong></p>\n<p>Selecting is enabled for everywhere in ECharts&#39;s instance in this case. This is the default situation, when brush is not set to be global.</p>\n<p><strong>Coordinate brushes</strong></p>\n<p>Selecting is enabled only in the assigned coordinates in this case. Selecting-box will be altered according to scaling and translating of coordinate (see <code class=\"codespan\">roam</code> and <code class=\"codespan\">dataZoom</code>).</p>\n<p>In practice, you may often find coordinate brush to be a more frequently made choice, particularly in <code class=\"codespan\">geo</code> charts.</p>\n<p>By assigning <a href=\"#brush.geoIndex\">brush.geoIndex</a>, or <a href=\"#brush.xAxisIndex\">brush.xAxisIndex</a>, or <a href=\"#brush.yAxisIndex\">brush.yAxisIndex</a>, brush selecting axes can be assigned, whose value can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;all&#39;</code>: for all axes;</li>\n<li><code class=\"codespan\">number</code>: like <code class=\"codespan\">0</code>, for a particular coordinate with that index;</li>\n<li><code class=\"codespan\">Array</code>: like <code class=\"codespan\">[0, 4, 2]</code>, for coordinates with those indexes;</li>\n<li><code class=\"codespan\">&#39;none&#39;</code>, or <code class=\"codespan\">null</code>, or <code class=\"codespan\">undefined</code>: for not assigning.</li>\n</ul>\n<p>Example:</p>\n<pre><code class=\"lang-javascript\">option = {\n    geo: {\n        ...\n    },\n    brush: {\n        geoIndex: &#39;all&#39;, // brush selecting is enabled only in all geo charts above\n        ...\n    }\n};\n</code></pre>\n<p>Example:</p>\n<pre><code class=\"lang-javascript\">option = {\n    grid: [\n        {...}, // grid 0\n        {...}  // grid 1\n    ],\n    xAxis: [\n        {gridIndex: 1, ...}, // xAxis 0 for grid 1\n        {gridIndex: 0, ...}  // xAxis 1 for grid 0\n    ],\n    yAxis: [\n        {gridIndex: 1, ...}, // yAxis 0 for grid 1\n        {gridIndex: 0, ...}  // yAxis 1 for grid 0\n    ],\n    brush: {\n        xAxisIndex: [0, 1], // brush selecting is enabled only in coordinates with xAxisIndex as `0` or `1`\n        ...\n    }\n};\n</code></pre>\n","default":null},"yAxisIndex":{"type":["Array","number","string"],"description":"<p>Assigns which of the yAxisIndex can use brush selecting.</p>\n<p><code class=\"codespan\">brush</code> can be set to be <em>global</em>, or <em>belonging to a particular coordinate</em>.</p>\n<p><strong>Global brushes</strong></p>\n<p>Selecting is enabled for everywhere in ECharts&#39;s instance in this case. This is the default situation, when brush is not set to be global.</p>\n<p><strong>Coordinate brushes</strong></p>\n<p>Selecting is enabled only in the assigned coordinates in this case. Selecting-box will be altered according to scaling and translating of coordinate (see <code class=\"codespan\">roam</code> and <code class=\"codespan\">dataZoom</code>).</p>\n<p>In practice, you may often find coordinate brush to be a more frequently made choice, particularly in <code class=\"codespan\">geo</code> charts.</p>\n<p>By assigning <a href=\"#brush.geoIndex\">brush.geoIndex</a>, or <a href=\"#brush.xAxisIndex\">brush.xAxisIndex</a>, or <a href=\"#brush.yAxisIndex\">brush.yAxisIndex</a>, brush selecting axes can be assigned, whose value can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;all&#39;</code>: for all axes;</li>\n<li><code class=\"codespan\">number</code>: like <code class=\"codespan\">0</code>, for a particular coordinate with that index;</li>\n<li><code class=\"codespan\">Array</code>: like <code class=\"codespan\">[0, 4, 2]</code>, for coordinates with those indexes;</li>\n<li><code class=\"codespan\">&#39;none&#39;</code>, or <code class=\"codespan\">null</code>, or <code class=\"codespan\">undefined</code>: for not assigning.</li>\n</ul>\n<p>Example:</p>\n<pre><code class=\"lang-javascript\">option = {\n    geo: {\n        ...\n    },\n    brush: {\n        geoIndex: &#39;all&#39;, // brush selecting is enabled only in all geo charts above\n        ...\n    }\n};\n</code></pre>\n<p>Example:</p>\n<pre><code class=\"lang-javascript\">option = {\n    grid: [\n        {...}, // grid 0\n        {...}  // grid 1\n    ],\n    xAxis: [\n        {gridIndex: 1, ...}, // xAxis 0 for grid 1\n        {gridIndex: 0, ...}  // xAxis 1 for grid 0\n    ],\n    yAxis: [\n        {gridIndex: 1, ...}, // yAxis 0 for grid 1\n        {gridIndex: 0, ...}  // yAxis 1 for grid 0\n    ],\n    brush: {\n        xAxisIndex: [0, 1], // brush selecting is enabled only in coordinates with xAxisIndex as `0` or `1`\n        ...\n    }\n};\n</code></pre>\n","default":null},"brushType":{"type":["string"],"description":"<p>Default type of brush.</p>\n<ul>\n<li><code class=\"codespan\">&#39;rect&#39;</code>: for selection-box in rectangle shape;</li>\n<li><code class=\"codespan\">&#39;polygon&#39;</code>: for selection-box in polygon shape;</li>\n<li><code class=\"codespan\">&#39;lineX&#39;</code>: for horizontal selection-box;</li>\n<li><code class=\"codespan\">&#39;lineY&#39;</code>: for vertical selection-box;</li>\n</ul>\n","default":"'rect'"},"brushMode":{"type":["string"],"description":"<p>Default brush mode, whose value can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;single&#39;</code>: for single selection;</li>\n<li><code class=\"codespan\">&#39;multiple&#39;</code>: for multiple selection.</li>\n</ul>\n","default":"'single'"},"transformable":{"type":["boolean"],"description":"<p>Determines whether a selected box can be changed in shape or translated.</p>\n","default":true},"brushStyle":{"type":["Object"],"description":"<p>Default brush style, whose value is:</p>\n<pre><code class=\"lang-javascript\">{\n    borderWidth: 1,\n    color: &#39;rgba(120,140,180,0.3)&#39;,\n    borderColor: &#39;rgba(120,140,180,0.8)&#39;\n},\n</code></pre>\n"},"throttleType":{"type":["string"],"description":"<p>By default, <code class=\"codespan\">brushSelected</code> is always triggered when selection-box is selected or moved, to tell the outside about the event.</p>\n<p>But efficiency problems may occur when events are triggered too frequently, or the animation result may be affected. So brush components provides <a href=\"#brush.throttleType\">brush.throttleType</a> and <a href=\"#brush.throttleDelay\">brush.throttleDelay</a> to solve this problem.</p>\n<p>Valid <code class=\"codespan\">throttleType</code> values can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;debounce&#39;</code>: for triggering events only when the action has been stopped (no action after some duration). Time threshold can be assigned with <a href=\"#brush.throttleDelay\">brush.throttleDelay</a>;</li>\n<li><code class=\"codespan\">&#39;fixRate&#39;</code>: for triggering event with a certain frequency. The frequency can be assigned with <a href=\"#brush.throttleDelay\">brush.throttleDelay</a>.</li>\n</ul>\n<p>In this <a href=\"https://echarts.apache.org/examples/zh/view.html?c=scatter-map-brush&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>, <code class=\"codespan\">debounce</code> is used to make sure the bar chart is updated only when the user has stopped action. In other cases, the animation result may not be so good.</p>\n","default":"'fixRate'"},"throttleDelay":{"type":["number"],"description":"<p><code class=\"codespan\">0</code> for disabling throttle.</p>\n<p>By default, <code class=\"codespan\">brushSelected</code> is always triggered when selection-box is selected or moved, to tell the outside about the event.</p>\n<p>But efficiency problems may occur when events are triggered too frequently, or the animation result may be affected. So brush components provides <a href=\"#brush.throttleType\">brush.throttleType</a> and <a href=\"#brush.throttleDelay\">brush.throttleDelay</a> to solve this problem.</p>\n<p>Valid <code class=\"codespan\">throttleType</code> values can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;debounce&#39;</code>: for triggering events only when the action has been stopped (no action after some duration). Time threshold can be assigned with <a href=\"#brush.throttleDelay\">brush.throttleDelay</a>;</li>\n<li><code class=\"codespan\">&#39;fixRate&#39;</code>: for triggering event with a certain frequency. The frequency can be assigned with <a href=\"#brush.throttleDelay\">brush.throttleDelay</a>.</li>\n</ul>\n<p>In this <a href=\"https://echarts.apache.org/examples/zh/view.html?c=scatter-map-brush&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>, <code class=\"codespan\">debounce</code> is used to make sure the bar chart is updated only when the user has stopped action. In other cases, the animation result may not be so good.</p>\n","default":0},"removeOnClick":{"type":["boolean"],"description":"<p>Defined whether <em>clearing all select-boxes on click</em> is enabled when <a href=\"#brush.brushMode\">brush.brushMode</a> is <code class=\"codespan\">&#39;single&#39;</code>.</p>\n","default":true},"inBrush":{"type":["Object"],"description":"<p>Defines visual effects of items in selection.</p>\n<p>Available visual effects include:</p>\n<ul>\n<li><code class=\"codespan\">symbol</code>: Type of symbol.</li>\n<li><code class=\"codespan\">symbolSize</code>: Symbol size.</li>\n<li><code class=\"codespan\">color</code>: Symbol color.</li>\n<li><code class=\"codespan\">colorAlpha</code>: Symbol alpha channel.</li>\n<li><code class=\"codespan\">opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code class=\"codespan\">colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<p>In most cases, inBrush can be left unassigned, in which case default visual configuration remains.</p>\n"},"outOfBrush":{"type":["Object"],"description":"<p>Defines visual effects of items out of selection.</p>\n<p>Available visual effects include:</p>\n<ul>\n<li><code class=\"codespan\">symbol</code>: Type of symbol.</li>\n<li><code class=\"codespan\">symbolSize</code>: Symbol size.</li>\n<li><code class=\"codespan\">color</code>: Symbol color.</li>\n<li><code class=\"codespan\">colorAlpha</code>: Symbol alpha channel.</li>\n<li><code class=\"codespan\">opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code class=\"codespan\">colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<p><strong>Note:</strong> If <code class=\"codespan\">outOfBrush</code> is not assigned, <code class=\"codespan\">color</code> will be set to be <code class=\"codespan\">&#39;#ddd&#39;</code> by default. If the color is not desired, you can use:</p>\n<pre><code class=\"lang-javascript\">brush: {\n    ...,\n    outOfBrush: {\n        colorAlpha: 0.1\n    }\n}\n</code></pre>\n"},"z":{"type":["number"],"description":"<p>z-index of brush cover box. It can be adjust when incorrect overlap occurs.</p>\n","default":10000}}},"geo":{"type":["Object"],"description":"<p>Geographic coorinate system component.</p>\n<p>Geographic coorinate system component is used to draw maps, which also supports <a href=\"#series-scatter\">scatter series</a>, and <a href=\"#series-lines\">line series</a>.</p>\n<p>From <code class=\"codespan\">3.1.10</code>, geo component also supports mouse events, whose parameters are:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;geo&#39;,\n    // geo component&#39;s index in option\n    geoIndex: number,\n    // name of clicking area, e.g., Shanghai\n    name: string,\n    // clicking region object as input, see geo.regions\n    region: Object\n}\n</code></pre>\n<p><strong>Tip:</strong>\nThe region color can also be controlled by map series. See <a href=\"#series-map.geoIndex\">series-map.geoIndex</a>.</p>\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"show":{"type":["boolean"],"description":"<p>Whether to show the geo component.</p>\n","default":true},"map":{"type":["string"],"description":"<p>Map charts.</p>\n<p>Due to the increase of fineness of map, ECharts 3 doesn&#39;t include map data by default for package size consideration. You may find map files you need on <a href=\"http://ecomfe.github.io/echarts-builder-web/map3.html\" target=\"_blank\">map download page</a> and then include and register them in ECharts.</p>\n<p>Two formats of map data are provided in ECharts, one of which can be included in <code class=\"codespan\">&lt;script&gt;</code> tag as JavaScript file, and the other of is in JSON format and should be loaded using AJAX. Map name and data will be loaded automatically once the JavaScript file is loaded, while in the JSON form, you have to assign name explicitly.</p>\n<p>Here are examples of these two types:</p>\n<p><strong> JavaScript importing example </strong></p>\n<pre><code class=\"lang-html\">&lt;script src=&quot;echarts.js&quot;&gt;&lt;/script&gt;\n&lt;script src=&quot;map/js/china.js&quot;&gt;&lt;/script&gt;\n&lt;script&gt;\nvar chart = echarts.init(document.getElmentById(&#39;main&#39;));\nchart.setOption({\n    series: [{\n        type: &#39;map&#39;,\n        map: &#39;china&#39;\n    }]\n});\n&lt;/script&gt;\n</code></pre>\n<p><strong> JSON importing example </strong></p>\n<pre><code class=\"lang-js\">$.get(&#39;map/json/china.json&#39;, function (chinaJson) {\n    echarts.registerMap(&#39;china&#39;, chinaJson);\n    var chart = echarts.init(document.getElmentById(&#39;main&#39;));\n    chart.setOption({\n        series: [{\n            type: &#39;map&#39;,\n            map: &#39;china&#39;\n        }]\n    });\n});\n</code></pre>\n<p>ECharts uses <a href=\"http://geojson.org/\" target=\"_blank\">geoJSON</a> format as map outline. Besides the methods introduced above, you can also get <a href=\"http://geojson.org/\" target=\"_blank\">geoJSON</a> data through in other methods if you like and register it in ECharts. Reference to <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=map-usa\" target=\"_blank\">USA Population Estimates</a> for more information.</p>\n","default":"''"},"roam":{"type":["boolean","string"],"description":"<p>Whether to enable mouse zooming and translating. <code class=\"codespan\">false</code> by default. If either zooming or translating is wanted, it can be set to <code class=\"codespan\">&#39;scale&#39;</code> or <code class=\"codespan\">&#39;move&#39;</code>. Otherwise, set it to be <code class=\"codespan\">true</code> to enable both.</p>\n","default":false},"center":{"type":["Array"],"description":"<p>Center of current view-port, in longitude and latitude.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">center: [115.97, 29.71]\n</code></pre>\n"},"aspectScale":{"type":["number"],"description":"<p>Used to scale aspect of geo.</p>\n<p>The final aspect is calculated by: <code class=\"codespan\">geoBoundingRect.width / geoBoundingRect.height * aspectScale</code>.</p>\n","default":0.75},"boundingCoords":{"type":["Array"],"description":"<p>Two dimension array. Define coord of left-top, right-bottom in layout box.</p>\n<pre><code class=\"lang-js\">// A complete world map\nmap: &#39;world&#39;,\nleft: 0, top: 0, right: 0, bottom: 0,\nboundingCoords: [\n    // [lng, lat] of left-top corner\n    [-180, 90],\n    // [lng, lat] of right-bottom corner\n    [180, -90]\n],\n</code></pre>\n","default":null},"zoom":{"type":["number"],"description":"<p>Zoom rate of current view-port.</p>\n","default":1},"scaleLimit":{"type":["Object"],"description":"<p>Limit of scaling, with <code class=\"codespan\">min</code> and <code class=\"codespan\">max</code>. <code class=\"codespan\">1</code> by default.</p>\n","properties":{"min":{"type":["number"],"description":"<p>Minimum scaling</p>\n"},"max":{"type":["number"],"description":"<p>Maximum scaling</p>\n"}}},"nameMap":{"type":["Object"],"description":"<p>Name mapping for customized areas. For example:</p>\n<pre><code class=\"lang-js\">{\n    &#39;China&#39; : &#39;中国&#39;\n}\n</code></pre>\n"},"nameProperty":{"type":["string"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.8.0</code></p>\n</blockquote>\n<p>customized property key for GeoJSON feature. By default, &#39;name&#39; is used as primary key to identify GeoJSON feature.\nFor example:</p>\n<pre><code class=\"lang-js\">{\n    nameProperty: &#39;NAME&#39;, // key to connect following data point to GeoJSON region {&quot;type&quot;:&quot;Feature&quot;,&quot;id&quot;:&quot;01&quot;,&quot;properties&quot;:{&quot;NAME&quot;:&quot;Alabama&quot;}, &quot;geometry&quot;: { ... }}\n    data:[\n        {name: &#39;Alabama&#39;, value: 4822023},\n        {name: &#39;Alaska&#39;, value: 731449},\n    ]\n}\n</code></pre>\n","default":"'name'"},"selectedMode":{"type":["boolean","string"],"description":"<p>Selected mode decides whether multiple selecting is supported. By default, <code class=\"codespan\">false</code> is used for disabling selection. Its value can also be <code class=\"codespan\">&#39;single&#39;</code> for selecting single area, or <code class=\"codespan\">&#39;multiple&#39;</code> for selecting multiple areas.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of Map Area Border, <code class=\"codespan\">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"areaColor":{"type":["Color"],"description":"<p>Area filling color.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#eee'"},"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"<p>Map area style in highlighted state.</p>\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"areaColor":{"type":["Color"],"description":"<p>Area filling color.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#eee'"},"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between  component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"top":{"type":["string","number"],"description":"<p>Distance between  component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"right":{"type":["string","number"],"description":"<p>Distance between  component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"<p>Distance between  component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"layoutCenter":{"type":["Array"],"description":"<p><code class=\"codespan\">layoutCenter</code> and <code class=\"codespan\">layoutSize</code> provides layout strategy other than <code class=\"codespan\">left/right/top/bottom/width/height</code>.</p>\n<p>When using <code class=\"codespan\">left/right/top/bottom/width/height</code>, it is hard to put the map inside a box area with a fixed width-height ratio. In this case, <code class=\"codespan\">layoutCenter</code> attribute can be used to define the center position of map, and <code class=\"codespan\">layoutSize</code> can be used to define the size of map. For example:</p>\n<pre><code class=\"lang-js\">layoutCenter: [&#39;30%&#39;, &#39;30%&#39;],\n// If width-height ratio is larger than 1, then width is set to be 100.\n// Otherwise, height is set to be 100.\n// This makes sure that it will not exceed the area of 100x100\nlayoutSize: 100\n</code></pre>\n<p>After setting these two values, <code class=\"codespan\">left/right/top/bottom/width/height</code> becomes invalid.</p>\n","default":null},"layoutSize":{"type":["number","string"],"description":"<p>Size of map, see <code class=\"codespan\">layoutCenter</code> for more information. Percentage relative to screen width, and absolute pixel values are supported.</p>\n"},"regions":{"type":["Array"],"description":"<p>Configure style for specified regions.\nFor example:</p>\n<pre><code class=\"lang-js\">regions: [{\n    name: &#39;Guangdong&#39;,\n    itemStyle: {\n        areaColor: &#39;red&#39;,\n        color: &#39;red&#39;\n    }\n}]\n</code></pre>\n<p>The region color can also be controlled by map series. See <a href=\"#series-map.geoIndex\">series-map.geoIndex</a>.</p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Name of area in map, like <code class=\"codespan\">&#39;Guangdong&#39;</code>, or <code class=\"codespan\">&#39;Zhejiang&#39;</code>.</p>\n"},"selected":{"type":["boolean"],"description":"<p>Whether this area is selected.</p>\n","default":false},"itemStyle":{"type":["Object"],"description":"<p>Item style of this area.</p>\n","properties":{"areaColor":{"type":["Color"],"description":"<p>Area color in the map.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"areaColor":{"type":["Color"],"description":"<p>Area color in the map.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false}}},"parallel":{"type":["Object"],"description":"<p><br></p>\n<hr>\n<p><strong>Introduction about Parallel coordinates</strong></p>\n<p><a href=\"https://en.wikipedia.org/wiki/Parallel_coordinates\" target=\"_blank\">Parallel Coordinates</a> is a common way of visualizing high-dimensional geometry and analyzing multivariate data.</p>\n<p>For example, <a href=\"#series-parallel.data\">series-parallel.data</a> is the following data:</p>\n<pre><code class=\"lang-javascript\">[\n    [1,  55,  9,   56,  0.46,  18,  6,  &#39;good&#39;],\n    [2,  25,  11,  21,  0.65,  34,  9,  &#39;excellent&#39;],\n    [3,  56,  7,   63,  0.3,   14,  5,  &#39;good&#39;],\n    [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],\n    { // Data item can also be an Object, so that perticular settings of its line can be set here.\n        value: [5,  42,  24,  44,  0.76,  40,  16, &#39;excellent&#39;]\n        lineStyle: {...},\n    }\n    ...\n]\n</code></pre>\n<p>In data above, each row is a &quot;data item&quot;, and each column represents a &quot;dimension&quot;. For example, the meanings of columns above are: &quot;data&quot;, &quot;AQI&quot;, &quot;PM2.5&quot;, &quot;PM10&quot;, &quot;carbon monoxide level&quot;, &quot;nitrogen dioxide level&quot;, and &quot;sulfur dioxide level&quot;.</p>\n<p>Parallel coordinates are often used to visualize multi-dimension data shown above. Each axis represents a dimension (namely, a column), and each line represents a data item. Data can be brush-selected on axes. For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/parallel-all&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n<hr>\n<p><strong>Brief about Configuration</strong></p>\n<p>Basic configuration parallel coordinates is shown as follow:</p>\n<pre><code class=\"lang-javascript\">option = {\n    parallelAxis: [                     // Definitions of axes.\n        {dim: 0, name: schema[0].text}, // Each axis has a &#39;dim&#39; attribute, representing dimension index in data.\n        {dim: 1, name: schema[1].text},\n        {dim: 2, name: schema[2].text},\n        {dim: 3, name: schema[3].text},\n        {dim: 4, name: schema[4].text},\n        {dim: 5, name: schema[5].text},\n        {dim: 6, name: schema[6].text},\n        {dim: 7, name: schema[7].text,\n            type: &#39;category&#39;,           // Also supports category data.\n            data: [&#39;Excellent&#39;, &#39;good&#39;, &#39;light pollution&#39;, &#39;moderate pollution&#39;, &#39;heavy pollution&#39;, &#39;severe pollution&#39;]\n        }\n    ],\n    parallel: {                         // Definition of a parallel coordinate system.\n        left: &#39;5%&#39;,                     // Location of parallel coordinate system.\n        right: &#39;13%&#39;,\n        bottom: &#39;10%&#39;,\n        top: &#39;20%&#39;,\n        parallelAxisDefault: {          // A pattern for axis definition, which can avoid repeating in `parallelAxis`.\n            type: &#39;value&#39;,\n            nameLocation: &#39;end&#39;,\n            nameGap: 20\n        }\n    },\n    series: [                           // Here the three series sharing the same parallel coordinate system.\n        {\n            name: &#39;Beijing&#39;,\n            type: &#39;parallel&#39;,           // The type of this series is &#39;parallel&#39;\n            data: [\n                [1,  55,  9,   56,  0.46,  18,  6,  &#39;good&#39;],\n                [2,  25,  11,  21,  0.65,  34,  9,  &#39;excellent&#39;],\n                ...\n            ]\n        },\n        {\n            name: &#39;Shanghai&#39;,\n            type: &#39;parallel&#39;,\n            data: [\n                [3,  56,  7,   63,  0.3,   14,  5,  &#39;good&#39;],\n                [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],\n                ...\n            ]\n        },\n        {\n            name: &#39;Guangzhou&#39;,\n            type: &#39;parallel&#39;,\n            data: [\n                [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],\n                [5,  42,  24,  44,  0.76,  40,  16, &#39;excellent&#39;],\n                ...\n            ]\n        }\n    ]\n};\n</code></pre>\n<p>Three components are involved here: <a href=\"#parallel\">parallel</a>, <a href=\"#parallelAxis\">parallelAxis</a>, <a href=\"#series-parallel\">series-parallel</a></p>\n<ul>\n<li><p><a href=\"#parallel\">parallel</a></p>\n<p>  This component is the coordinate system. One or more series (like &quot;Beijing&quot;, &quot;Shanghai&quot;, and &quot;Guangzhou&quot; in the above example) can share one coordinate system.</p>\n<p>  Like other coordinate systems, multiple parallel coordinate systems can be created in one echarts instance.</p>\n<p>  Position setting is also carried out here.</p>\n</li>\n<li><p><a href=\"#parallelAxis\">parallelAxis</a></p>\n<p>  This is axis configuration. Multiple axes are needed in parallel coordinates.</p>\n<p>  <a href=\"#parallelAxis.parallelIndex\">parallelAxis.parallelIndex</a> is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.</p>\n</li>\n<li><p><a href=\"#series-parallel\">series-parallel</a></p>\n<p>  This is the definition of parallel series, which will be drawn on parallel coordinate system.</p>\n<p>  <a href=\"#parallelAxis.parallelIndex\">parallelAxis.parallelIndex</a> is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>Notes and Best Practices</strong></p>\n<p>When configuring multiple <a href=\"#parallelAxis\">parallelAxis</a>, there might be some common attributes in each axis configuration. To avoid writing them repeatly, they can be put under <a href=\"#parallel.parallelAxisDefault\">parallel.parallelAxisDefault</a>. Before initializing axis, configurations in <a href=\"#parallel.parallelAxisDefault\">parallel.parallelAxisDefault</a> will be merged into <a href=\"#parallelAxis\">parallelAxis</a> to generate the final axis configuration.</p>\n<p><strong>If data is too large and cause bad performance</strong></p>\n<p>It is suggested to set <a href=\"#series-parallel.lineStyle.width\">series-parallel.lineStyle.width</a> to be <code class=\"codespan\">0.5</code> (or less), which may improve performance significantly.</p>\n<p><br></p>\n<hr>\n<p><strong>Display High-Dimension Data</strong></p>\n<p>When dimension number is extremely large, say, more than 50 dimensions, there will be more than 50 axes, which may hardly display in a page.</p>\n<p>In this case, you may use <a href=\"#parallel.axisExpandable\">parallel.axisExpandable</a> to improve the display. See this example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=map-parallel-prices&edit=1&reset=1\" width=\"600\" height=\"460\"><iframe />\n\n\n\n\n\n\n\n<p><br>\n<br></p>\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between parallel  component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":80},"top":{"type":["string","number"],"description":"<p>Distance between parallel  component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":60},"right":{"type":["string","number"],"description":"<p>Distance between parallel  component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n","default":80},"bottom":{"type":["string","number"],"description":"<p>Distance between parallel  component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n","default":60},"width":{"type":["string","number"],"description":"<p>Width of parallel  component. Adaptive by default.</p>\n","default":"'auto'"},"height":{"type":["string","number"],"description":"<p>Height of parallel  component. Adaptive by default.</p>\n","default":"'auto'"},"layout":{"type":["string"],"description":"<p>Layout modes, whose optional values are:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;horizontal&#39;</code>: place each axis horizontally.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;vertical&#39;</code>: place each axis vertically.</p>\n</li>\n</ul>\n","default":"'horizontal'"},"axisExpandable":{"type":["boolean"],"description":"<p>When dimension number is extremely large, say, more than 50 dimensions, there will be more than 50 axes, which may hardly display in a page.</p>\n<p>In this case, you may use <a href=\"#parallel.axisExpandable\">parallel.axisExpandable</a> to improve the display. See this example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=map-parallel-prices&edit=1&reset=1\" width=\"600\" height=\"460\"><iframe />\n\n\n\n\n<p>Whether to enable toggling axis on clicking.</p>\n","default":false},"axisExpandCenter":{"type":["number"],"description":"<p>Index of the axis which is used as the center of expanding initially. It doesn&#39;t have a default value, and needs to be assigned manually.</p>\n<p>Please refer to <a href=\"parallel.axisExpandable\" target=\"_blank\">parallel.axisExpandable</a> for more information.</p>\n","default":null},"axisExpandCount":{"type":["number"],"description":"<p>Defines how many axes are at expanding state initially. We&#39;d suggest you assign this value manually according to dimensions.</p>\n<p>Please refer to <a href=\"parallel.axisExpandCenter\" target=\"_blank\">parallel.axisExpandCenter</a> and <a href=\"parallel.axisExpandable\" target=\"_blank\">parallel.axisExpandable</a>.</p>\n","default":0},"axisExpandWidth":{"type":["number"],"description":"<p>Distance between two axes when at expanding state, in pixels.</p>\n<p>Please refer to <a href=\"parallel.axisExpandable\" target=\"_blank\">parallel.axisExpandable</a> for more information.</p>\n","default":50},"axisExpandTriggerOn":{"type":["string"],"description":"<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;click&#39;</code>: Trigger expanding when mouse clicking.</li>\n<li><code class=\"codespan\">&#39;mousemove&#39;</code>: Trigger expanding when mouse hovering.</li>\n</ul>\n","default":"'click'"},"parallelAxisDefault":{"type":["Object"],"description":"<p>When configuring multiple <a href=\"#parallelAxis\">parallelAxis</a>, there might be some common attributes in each axis configuration. To avoid writing them repeatly, they can be put under <a href=\"#parallel.parallelAxisDefault\">parallel.parallelAxisDefault</a>. Before initializing axis, configurations in <a href=\"#parallel.parallelAxisDefault\">parallel.parallelAxisDefault</a> will be merged into <a href=\"#parallelAxis\">parallelAxis</a> to generate the final axis configuration.</p>\n<p><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/parallel-all&amp;edit=1&amp;reset=1\" target=\"_blank\">See the sample</a>.</p>\n<p><br></p>\n","properties":{"type":{"type":["string"],"description":"<p>Type of axis.</p>\n<p>Option:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;value&#39;</code>\n  Numerical axis, suitable for continuous data.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;category&#39;</code>\n  Category axis, suitable for discrete category data. Category data can be auto retrieved from <a href=\"#series.data\">series.data</a> or <a href=\"#dataset.source\">dataset.source</a>, or can be specified via <a href=\"#parallelAxis.data\">parallelAxis.data</a>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;time&#39;</code>\n  Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;log&#39;</code>\n  Log axis, suitable for log data.</p>\n</li>\n</ul>\n","default":"value"},"name":{"type":["string"],"description":"<p>Name of axis.</p>\n"},"nameLocation":{"type":["string"],"description":"<p>Location of axis name.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> or <code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;end&#39;</code></li>\n</ul>\n","default":"'end'"},"nameTextStyle":{"type":["Object"],"description":"<p>Text style of axis name.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Color of axis name uses <a href=\"#parallelAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"fontStyle":{"type":["string"],"description":"<p>axis name font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p>axis name font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>axis name font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>axis name font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n\n","default":0}}}}}}},"nameGap":{"type":["number"],"description":"<p>Gap between axis name and axis line.</p>\n","default":15},"nameRotate":{"type":["number"],"description":"<p>Rotation of axis name.</p>\n","default":null},"inverse":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to invert the axis.\nThis is a new option available from Echarts 3 and newer.</p>\n","default":false},"boundaryGap":{"type":["boolean","Array"],"description":"<p>The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different.</p>\n<p>The <code class=\"codespan\">boundaryGap</code> of category axis can be set to either <code class=\"codespan\">true</code> or <code class=\"codespan\">false</code>. Default value is set to be <code class=\"codespan\">true</code>, in which case <a href=\"#parallelAxis.axisTick\">axisTick</a> is served only as a separation line, and labels and data appear only in the center part of two <a href=\"#parallelAxis.axisTick\">axis ticks</a>, which is called <em>band</em>.</p>\n<p>For non-category axis, including time, numerical value, and log axes, <code class=\"codespan\">boundaryGap</code> is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting <a href=\"#parallelAxis.min\">min</a> and <a href=\"#parallelAxis.max\">max</a>.\n<strong>Example: </strong></p>\n<pre><code class=\"lang-js\">boundaryGap: [&#39;20%&#39;, &#39;20%&#39;]\n</code></pre>\n"},"min":{"type":["number","string","Function"],"description":"<p>The minimun value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">&#39;dataMin&#39;</code> so that the minimum value on this axis is set to be the minimum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class=\"codespan\">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class=\"codespan\">2</code> represents <code class=\"codespan\">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class=\"codespan\">-3</code>.</p>\n<p>If <code class=\"codespan\">min</code> is specified as a function, it should return a min value, like:</p>\n<pre><code class=\"lang-js\">min: function (value) {\n    return value.min - 20;\n}\n</code></pre>\n<p><code class=\"codespan\">value</code> is an object, containing the <code class=\"codespan\">min</code> value and <code class=\"codespan\">max</code> value of the data. This function should return the min value of axis, or return <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> to make echarts use the auto calculated min value (<code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> return is only supported since <code class=\"codespan\">v4.8.0</code>).</p>\n","default":null},"max":{"type":["number","string","Function"],"description":"<p>The maximum value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">&#39;dataMax&#39;</code> so that the minimum value on this axis is set to be the maximum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class=\"codespan\">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class=\"codespan\">2</code> represents <code class=\"codespan\">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class=\"codespan\">-3</code>.</p>\n<p>If <code class=\"codespan\">max</code> is specified as a function, it should return a max value, like:</p>\n<pre><code class=\"lang-js\">max: function (value) {\n    return value.max - 20;\n}\n</code></pre>\n<p><code class=\"codespan\">value</code> is an object, containing the <code class=\"codespan\">min</code> value and <code class=\"codespan\">max</code> value of the data. This function should return the max value of axis, or return <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> to make echarts use the auto calculated max value (<code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> return is only supported since <code class=\"codespan\">v4.8.0</code>).</p>\n","default":null},"scale":{"type":["boolean"],"description":"<p>It is available only in numerical axis, i.e., <a href=\"#parallelAxis.type\">type</a>: &#39;value&#39;.</p>\n<p>It specifies whether not to contain zero position of axis compulsively. When it is set to be <code class=\"codespan\">true</code>, the axis may not contain zero position, which is useful in the scatter chart for both value axes.</p>\n<p>This configuration item is unavailable when the <a href=\"#parallelAxis.min\">min</a> and <a href=\"#parallelAxis.max\">max</a> are set.</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.</p>\n<p>This is unavailable for category axis.</p>\n","default":5},"minInterval":{"type":["number"],"description":"<p>Minimum gap between split lines.</p>\n<p>For example, it can be set to be <code class=\"codespan\">1</code> to make sure axis label is show as integer.</p>\n<pre><code class=\"lang-js\">{\n    minInterval: 1\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#parallelAxis.type\">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n","default":0},"maxInterval":{"type":["number"],"description":"<p>Maximum gap between split lines.</p>\n<p>For example, in time axis (<a href=\"#parallelAxis.type\">type</a> is &#39;time&#39;), it can be set to be <code class=\"codespan\">3600 * 24 * 1000</code> to make sure that the gap between axis labels is less than or equal to one day.</p>\n<pre><code class=\"lang-js\">{\n    maxInterval: 3600 * 1000 * 24\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#parallelAxis.type\">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n"},"interval":{"type":["number"],"description":"<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href=\"#parallelAxis.splitNumber\">splitNumber</a> is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with <a href=\"#parallelAxis.min\">min</a> and <a href=\"#parallelAxis.max\">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situations.</p>\n<p>This is unavailable for category axis. Timestamp should be passed for <a href=\"#parallelAxis.type\">type</a>: &#39;time&#39; axis. Logged value should be passed for <a href=\"#parallelAxis.type\">type</a>: &#39;log&#39; axis.</p>\n"},"logBase":{"type":["number"],"description":"<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#parallelAxis.type\">type</a>: &#39;log&#39;.</p>\n","default":10},"silent":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code>, to prevent interaction with the axis.</p>\n","default":false},"triggerEvent":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to enable triggering events.</p>\n<p>Parameters of the event include:</p>\n<pre><code class=\"lang-js\">{\n    // Component type: xAxis, yAxis, radiusAxis, angleAxis\n    // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n    componentType: string,\n    // Value on axis before being formatted.\n    // Click on value label to trigger event.\n    value: &#39;&#39;,\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: &#39;&#39;\n}\n</code></pre>\n","default":false},"axisLine":{"type":["Object"],"description":"<p>Settings related to axis line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n","default":true},"symbol":{"type":["string","Array"],"description":"<p>Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It&#39;s set to be <code class=\"codespan\">&#39;none&#39;</code> by default, meaning no arrow for either end. If it is set to be <code class=\"codespan\">&#39;arrow&#39;</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code class=\"codespan\">[&#39;none&#39;, &#39;arrow&#39;]</code>.</p>\n","default":"'none'"},"symbolSize":{"type":["Array"],"description":"<p>Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.</p>\n","default":"[10, 15]"},"symbolOffset":{"type":["Array","number"],"description":"<p>Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>line styleLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#333'"},"width":{"type":["number"],"description":"<p>line style line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>line style line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"axisTick":{"type":["Object"],"description":"<p>Settings related to axis tick.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis tick from showing.</p>\n","default":true},"alignWithLabel":{"type":["boolean"],"description":"<p>Align axis tick with label, which is available only when <code class=\"codespan\">boundaryGap</code> is set to be <code class=\"codespan\">true</code> in category axis. See the following picture:</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/axis-align-with-label.png\"></p>\n","default":false},"interval":{"type":["number","Function"],"description":"<p>Interval of axisTick, which is available in category axis.  is set to be the same as <a href=\"#parallelAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> so the axis labels face the <code class=\"codespan\">inside</code> direction.</p>\n","default":false},"length":{"type":["number"],"description":"<p>The length of the axis tick.</p>\n","default":5},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Color of axis label is set to be <a href=\"#parallelAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"width":{"type":["number"],"description":"<p>axisTick line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>axisTick line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"minorTick":{"type":["Object"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.6.0</code></p>\n</blockquote>\n<p>Settings related minor ticks.</p>\n<p>Note: <code class=\"codespan\">minorTick</code> is not available in the <code class=\"codespan\">category</code> type axis.</p>\n<p>Examples:</p>\n<p>1) Using minor ticks in function plotting.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-function&edit=1&reset=1\" width=\"600\" height=\"350\"><iframe />\n\n\n<p>2) Using minor ticks in log axis.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-log&edit=1&reset=1\" width=\"600\" height=\"350\"><iframe />\n\n\n","properties":{"show":{"type":["boolean"],"description":"<p>If show minor ticks.</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>Number of interval splited by minor ticks.</p>\n","default":5},"length":{"type":["number"],"description":"<p>Length of minor ticks lines。</p>\n","default":3},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Style configuration of minor ticks lines <a href=\"#parallelAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。</p>\n"},"width":{"type":["number"],"description":"<p>minorTick line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>minorTick line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"axisLabel":{"type":["Object"],"description":"<p>Settings related to axis label.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis label from appearing.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>Interval of Axis label, which is available in category axis. </p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> so the axis labels face the <code class=\"codespan\">inside</code> direction.</p>\n","default":false},"rotate":{"type":["number"],"description":"<p>Rotation degree of axis label, which is especially useful when there is no enough space for category axis.</p>\n<p>Rotation degree is from -90 to 90.</p>\n","default":0},"margin":{"type":["number"],"description":"<p>The margin between the axis label and the axis line.</p>\n","default":8},"formatter":{"type":["string","Function"],"description":"<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Use string template; template variable is the default label of axis {value}\nformatter: &#39;{value} kg&#39;\n\n// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (idx === 0) {\n        texts.unshift(date.getYear());\n    }\n    return texts.join(&#39;/&#39;);\n}\n</code></pre>\n","default":null},"showMinLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the min tick. Optional values: <code class=\"codespan\">true</code>, <code class=\"codespan\">false</code>, <code class=\"codespan\">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.</p>\n","default":null},"showMaxLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the max tick. Optional values: <code class=\"codespan\">true</code>, <code class=\"codespan\">false</code>, <code class=\"codespan\">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.</p>\n","default":null},"color":{"type":["Color","Function"],"description":"<p>Color of axis label is set to be <a href=\"#parallelAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class=\"lang-js\">(val: string) =&gt; Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class=\"lang-js\">textStyle: {\n    color: function (value, index) {\n        return value &gt;= 0 ? &#39;green&#39; : &#39;red&#39;;\n    }\n}\n</code></pre>\n"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n\n","default":0}}}}}}},"data":{"type":["Array"],"description":"<p>Category data, available in <a href=\"#parallelAxis.type\">type</a>: &#39;category&#39; axis.</p>\n<p>If <a href=\"#parallelAxis.type\">type</a> is not specified, but <code class=\"codespan\">axis.data</code> is specified, the <a href=\"#parallelAxis.type\">type</a> is auto set as <code class=\"codespan\">&#39;category&#39;</code>.</p>\n<p>If <a href=\"#parallelAxis.type\">type</a> is specified as <code class=\"codespan\">&#39;category&#39;</code>, but <code class=\"codespan\">axis.data</code> is not specified, <code class=\"codespan\">axis.data</code> will be auto collected from <a href=\"#series.data\">series.data</a>. It brings convenience, but we should notice that <code class=\"codespan\">axis.data</code> provides then value range of the <code class=\"codespan\">&#39;category&#39;</code> axis. If  it is auto collected from <a href=\"#series.data\">series.data</a>, Only the values appearing in <a href=\"#series.data\">series.data</a> can be collected. For example, if <a href=\"#series.data\">series.data</a> is empty, nothing will be collected.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Name list of all categories\ndata: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n// Each item could also be a specific configuration item.\n// In this case, `value` is used as the category name.\ndata: [{\n    value: &#39;Monday&#39;,\n    // Highlight Monday\n    textStyle: {\n        fontSize: 20,\n        color: &#39;red&#39;\n    }\n}, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n</code></pre>\n","items":{"type":"Object","properties":{"value":{"type":["string"],"description":"<p>Name of a category.</p>\n"},"textStyle":{"type":["Object"],"description":"<p>Text style of the category.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}}},"parallelAxis":{"type":["Object"],"description":"<p>This component is the coordinate axis for parallel coordinate.</p>\n<p><br></p>\n<hr>\n<p><strong>Introduction about Parallel coordinates</strong></p>\n<p><a href=\"https://en.wikipedia.org/wiki/Parallel_coordinates\" target=\"_blank\">Parallel Coordinates</a> is a common way of visualizing high-dimensional geometry and analyzing multivariate data.</p>\n<p>For example, <a href=\"#series-parallel.data\">series-parallel.data</a> is the following data:</p>\n<pre><code class=\"lang-javascript\">[\n    [1,  55,  9,   56,  0.46,  18,  6,  &#39;good&#39;],\n    [2,  25,  11,  21,  0.65,  34,  9,  &#39;excellent&#39;],\n    [3,  56,  7,   63,  0.3,   14,  5,  &#39;good&#39;],\n    [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],\n    { // Data item can also be an Object, so that perticular settings of its line can be set here.\n        value: [5,  42,  24,  44,  0.76,  40,  16, &#39;excellent&#39;]\n        lineStyle: {...},\n    }\n    ...\n]\n</code></pre>\n<p>In data above, each row is a &quot;data item&quot;, and each column represents a &quot;dimension&quot;. For example, the meanings of columns above are: &quot;data&quot;, &quot;AQI&quot;, &quot;PM2.5&quot;, &quot;PM10&quot;, &quot;carbon monoxide level&quot;, &quot;nitrogen dioxide level&quot;, and &quot;sulfur dioxide level&quot;.</p>\n<p>Parallel coordinates are often used to visualize multi-dimension data shown above. Each axis represents a dimension (namely, a column), and each line represents a data item. Data can be brush-selected on axes. For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/parallel-all&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n<hr>\n<p><strong>Brief about Configuration</strong></p>\n<p>Basic configuration parallel coordinates is shown as follow:</p>\n<pre><code class=\"lang-javascript\">option = {\n    parallelAxis: [                     // Definitions of axes.\n        {dim: 0, name: schema[0].text}, // Each axis has a &#39;dim&#39; attribute, representing dimension index in data.\n        {dim: 1, name: schema[1].text},\n        {dim: 2, name: schema[2].text},\n        {dim: 3, name: schema[3].text},\n        {dim: 4, name: schema[4].text},\n        {dim: 5, name: schema[5].text},\n        {dim: 6, name: schema[6].text},\n        {dim: 7, name: schema[7].text,\n            type: &#39;category&#39;,           // Also supports category data.\n            data: [&#39;Excellent&#39;, &#39;good&#39;, &#39;light pollution&#39;, &#39;moderate pollution&#39;, &#39;heavy pollution&#39;, &#39;severe pollution&#39;]\n        }\n    ],\n    parallel: {                         // Definition of a parallel coordinate system.\n        left: &#39;5%&#39;,                     // Location of parallel coordinate system.\n        right: &#39;13%&#39;,\n        bottom: &#39;10%&#39;,\n        top: &#39;20%&#39;,\n        parallelAxisDefault: {          // A pattern for axis definition, which can avoid repeating in `parallelAxis`.\n            type: &#39;value&#39;,\n            nameLocation: &#39;end&#39;,\n            nameGap: 20\n        }\n    },\n    series: [                           // Here the three series sharing the same parallel coordinate system.\n        {\n            name: &#39;Beijing&#39;,\n            type: &#39;parallel&#39;,           // The type of this series is &#39;parallel&#39;\n            data: [\n                [1,  55,  9,   56,  0.46,  18,  6,  &#39;good&#39;],\n                [2,  25,  11,  21,  0.65,  34,  9,  &#39;excellent&#39;],\n                ...\n            ]\n        },\n        {\n            name: &#39;Shanghai&#39;,\n            type: &#39;parallel&#39;,\n            data: [\n                [3,  56,  7,   63,  0.3,   14,  5,  &#39;good&#39;],\n                [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],\n                ...\n            ]\n        },\n        {\n            name: &#39;Guangzhou&#39;,\n            type: &#39;parallel&#39;,\n            data: [\n                [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],\n                [5,  42,  24,  44,  0.76,  40,  16, &#39;excellent&#39;],\n                ...\n            ]\n        }\n    ]\n};\n</code></pre>\n<p>Three components are involved here: <a href=\"#parallel\">parallel</a>, <a href=\"#parallelAxis\">parallelAxis</a>, <a href=\"#series-parallel\">series-parallel</a></p>\n<ul>\n<li><p><a href=\"#parallel\">parallel</a></p>\n<p>  This component is the coordinate system. One or more series (like &quot;Beijing&quot;, &quot;Shanghai&quot;, and &quot;Guangzhou&quot; in the above example) can share one coordinate system.</p>\n<p>  Like other coordinate systems, multiple parallel coordinate systems can be created in one echarts instance.</p>\n<p>  Position setting is also carried out here.</p>\n</li>\n<li><p><a href=\"#parallelAxis\">parallelAxis</a></p>\n<p>  This is axis configuration. Multiple axes are needed in parallel coordinates.</p>\n<p>  <a href=\"#parallelAxis.parallelIndex\">parallelAxis.parallelIndex</a> is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.</p>\n</li>\n<li><p><a href=\"#series-parallel\">series-parallel</a></p>\n<p>  This is the definition of parallel series, which will be drawn on parallel coordinate system.</p>\n<p>  <a href=\"#parallelAxis.parallelIndex\">parallelAxis.parallelIndex</a> is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>Notes and Best Practices</strong></p>\n<p>When configuring multiple <a href=\"#parallelAxis\">parallelAxis</a>, there might be some common attributes in each axis configuration. To avoid writing them repeatly, they can be put under <a href=\"#parallel.parallelAxisDefault\">parallel.parallelAxisDefault</a>. Before initializing axis, configurations in <a href=\"#parallel.parallelAxisDefault\">parallel.parallelAxisDefault</a> will be merged into <a href=\"#parallelAxis\">parallelAxis</a> to generate the final axis configuration.</p>\n<p><strong>If data is too large and cause bad performance</strong></p>\n<p>It is suggested to set <a href=\"#series-parallel.lineStyle.width\">series-parallel.lineStyle.width</a> to be <code class=\"codespan\">0.5</code> (or less), which may improve performance significantly.</p>\n<p><br></p>\n<hr>\n<p><strong>Display High-Dimension Data</strong></p>\n<p>When dimension number is extremely large, say, more than 50 dimensions, there will be more than 50 axes, which may hardly display in a page.</p>\n<p>In this case, you may use <a href=\"#parallel.axisExpandable\">parallel.axisExpandable</a> to improve the display. See this example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=map-parallel-prices&edit=1&reset=1\" width=\"600\" height=\"460\"><iframe />\n\n\n\n\n\n\n\n\n<p><br>\n<br></p>\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"dim":{"type":["number"],"description":"<p>Dimension index of coordinate axis.</p>\n<p>For example, <a href=\"#series-parallel.data\">series-parallel.data</a> is the following data:</p>\n<pre><code class=\"lang-javascript\">[\n    [1,  55,  9,   56,  0.46,  18,  6,  &#39;good&#39;],\n    [2,  25,  11,  21,  0.65,  34,  9,  &#39;excellent&#39;],\n    [3,  56,  7,   63,  0.3,   14,  5,  &#39;good&#39;],\n    [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],\n    { // Data item can also be an Object, so that perticular settings of its line can be set here.\n        value: [5,  42,  24,  44,  0.76,  40,  16, &#39;excellent&#39;]\n        lineStyle: {...},\n    }\n    ...\n]\n</code></pre>\n<p>In data above, each row is a &quot;data item&quot;, and each column represents a &quot;dimension&quot;. For example, the meanings of columns above are: &quot;data&quot;, &quot;AQI&quot;, &quot;PM2.5&quot;, &quot;PM10&quot;, &quot;carbon monoxide level&quot;, &quot;nitrogen dioxide level&quot;, and &quot;sulfur dioxide level&quot;.</p>\n<p><code class=\"codespan\">dim</code> defines which dimension (which <em>row</em>) of data would map to this axis.</p>\n<p>Started from <code class=\"codespan\">0</code>. For example, if the <code class=\"codespan\">dim</code> of coordinate axis is <code class=\"codespan\">1</code>, it indicates that the second row of data would map to this axis.</p>\n"},"parallelIndex":{"type":["number"],"description":"<p>It is used to define which <em>coordinate</em> the <em>axis</em> should map to.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">myChart.setOption({\n    parallel: [\n        {...},                      // the first parallel coordinate\n        {...}                       // the second parallel coordinate\n    ],\n    parallelAxis: [\n        {parallelIndex: 1, ...},    // the first coordinate axis, mapping to the second parallel coordinate\n        {parallelIndex: 0, ...},    //  the second coordinate axis, mapping to the first parallel coordinate\n        {parallelIndex: 1, ...},    //  the third coordinate axis, mapping to the second parallel coordinate\n        {parallelIndex: 0, ...}     //  the fourth coordinate axis, mapping to the first parallel coordinate\n    ],\n    ...\n});\n</code></pre>\n<p>If there is only one parallel coordinate, you don&#39;t have to configure it, whose default value is <code class=\"codespan\">0</code>.</p>\n","default":0},"realtime":{"type":["boolean"],"description":"<p>Whether to refresh view when brush-selecting axis. If is set to be <code class=\"codespan\">false</code>, view is updated after brush-selecting action ends.</p>\n<p>When data amount is large, it is suggested to set to be <code class=\"codespan\">false</code> to avoid efficiency problems.</p>\n","default":true},"areaSelectStyle":{"type":["Object"],"description":"<p>Area selecting is available on axes. Here is some configurations.</p>\n<p><br></p>\n","properties":{"width":{"type":["number"],"description":"<p>Width of selecting box.</p>\n","default":20},"borderWidth":{"type":["number"],"description":"<p>Border width of the select box.</p>\n","default":1},"borderColor":{"type":["Color"],"description":"<p>Border color of the select box.</p>\n","default":"'rgba(160,197,232)'"},"color":{"type":["Color"],"description":"<p>Border fill color of the select box.</p>\n","default":"'rgba(160,197,232)'"},"opacity":{"type":["number"],"description":"<p>Opacity of the select box.</p>\n","default":0.3}}},"type":{"type":["string"],"description":"<p>Type of axis.</p>\n<p>Option:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;value&#39;</code>\n  Numerical axis, suitable for continuous data.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;category&#39;</code>\n  Category axis, suitable for discrete category data. Category data can be auto retrieved from <a href=\"#series.data\">series.data</a> or <a href=\"#dataset.source\">dataset.source</a>, or can be specified via <a href=\"#parallelAxis.data\">parallelAxis.data</a>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;time&#39;</code>\n  Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;log&#39;</code>\n  Log axis, suitable for log data.</p>\n</li>\n</ul>\n","default":"value"},"name":{"type":["string"],"description":"<p>Name of axis.</p>\n"},"nameLocation":{"type":["string"],"description":"<p>Location of axis name.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> or <code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;end&#39;</code></li>\n</ul>\n","default":"'end'"},"nameTextStyle":{"type":["Object"],"description":"<p>Text style of axis name.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Color of axis name uses <a href=\"#parallelAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"fontStyle":{"type":["string"],"description":"<p>axis name font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p>axis name font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>axis name font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>axis name font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n\n","default":0}}}}}}},"nameGap":{"type":["number"],"description":"<p>Gap between axis name and axis line.</p>\n","default":15},"nameRotate":{"type":["number"],"description":"<p>Rotation of axis name.</p>\n","default":null},"inverse":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to invert the axis.\nThis is a new option available from Echarts 3 and newer.</p>\n","default":false},"boundaryGap":{"type":["boolean","Array"],"description":"<p>The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different.</p>\n<p>The <code class=\"codespan\">boundaryGap</code> of category axis can be set to either <code class=\"codespan\">true</code> or <code class=\"codespan\">false</code>. Default value is set to be <code class=\"codespan\">true</code>, in which case <a href=\"#parallelAxis.axisTick\">axisTick</a> is served only as a separation line, and labels and data appear only in the center part of two <a href=\"#parallelAxis.axisTick\">axis ticks</a>, which is called <em>band</em>.</p>\n<p>For non-category axis, including time, numerical value, and log axes, <code class=\"codespan\">boundaryGap</code> is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting <a href=\"#parallelAxis.min\">min</a> and <a href=\"#parallelAxis.max\">max</a>.\n<strong>Example: </strong></p>\n<pre><code class=\"lang-js\">boundaryGap: [&#39;20%&#39;, &#39;20%&#39;]\n</code></pre>\n"},"min":{"type":["number","string","Function"],"description":"<p>The minimun value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">&#39;dataMin&#39;</code> so that the minimum value on this axis is set to be the minimum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class=\"codespan\">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class=\"codespan\">2</code> represents <code class=\"codespan\">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class=\"codespan\">-3</code>.</p>\n<p>If <code class=\"codespan\">min</code> is specified as a function, it should return a min value, like:</p>\n<pre><code class=\"lang-js\">min: function (value) {\n    return value.min - 20;\n}\n</code></pre>\n<p><code class=\"codespan\">value</code> is an object, containing the <code class=\"codespan\">min</code> value and <code class=\"codespan\">max</code> value of the data. This function should return the min value of axis, or return <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> to make echarts use the auto calculated min value (<code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> return is only supported since <code class=\"codespan\">v4.8.0</code>).</p>\n","default":null},"max":{"type":["number","string","Function"],"description":"<p>The maximum value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">&#39;dataMax&#39;</code> so that the minimum value on this axis is set to be the maximum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class=\"codespan\">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class=\"codespan\">2</code> represents <code class=\"codespan\">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class=\"codespan\">-3</code>.</p>\n<p>If <code class=\"codespan\">max</code> is specified as a function, it should return a max value, like:</p>\n<pre><code class=\"lang-js\">max: function (value) {\n    return value.max - 20;\n}\n</code></pre>\n<p><code class=\"codespan\">value</code> is an object, containing the <code class=\"codespan\">min</code> value and <code class=\"codespan\">max</code> value of the data. This function should return the max value of axis, or return <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> to make echarts use the auto calculated max value (<code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> return is only supported since <code class=\"codespan\">v4.8.0</code>).</p>\n","default":null},"scale":{"type":["boolean"],"description":"<p>It is available only in numerical axis, i.e., <a href=\"#parallelAxis.type\">type</a>: &#39;value&#39;.</p>\n<p>It specifies whether not to contain zero position of axis compulsively. When it is set to be <code class=\"codespan\">true</code>, the axis may not contain zero position, which is useful in the scatter chart for both value axes.</p>\n<p>This configuration item is unavailable when the <a href=\"#parallelAxis.min\">min</a> and <a href=\"#parallelAxis.max\">max</a> are set.</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.</p>\n<p>This is unavailable for category axis.</p>\n","default":5},"minInterval":{"type":["number"],"description":"<p>Minimum gap between split lines.</p>\n<p>For example, it can be set to be <code class=\"codespan\">1</code> to make sure axis label is show as integer.</p>\n<pre><code class=\"lang-js\">{\n    minInterval: 1\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#parallelAxis.type\">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n","default":0},"maxInterval":{"type":["number"],"description":"<p>Maximum gap between split lines.</p>\n<p>For example, in time axis (<a href=\"#parallelAxis.type\">type</a> is &#39;time&#39;), it can be set to be <code class=\"codespan\">3600 * 24 * 1000</code> to make sure that the gap between axis labels is less than or equal to one day.</p>\n<pre><code class=\"lang-js\">{\n    maxInterval: 3600 * 1000 * 24\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#parallelAxis.type\">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n"},"interval":{"type":["number"],"description":"<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href=\"#parallelAxis.splitNumber\">splitNumber</a> is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with <a href=\"#parallelAxis.min\">min</a> and <a href=\"#parallelAxis.max\">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situations.</p>\n<p>This is unavailable for category axis. Timestamp should be passed for <a href=\"#parallelAxis.type\">type</a>: &#39;time&#39; axis. Logged value should be passed for <a href=\"#parallelAxis.type\">type</a>: &#39;log&#39; axis.</p>\n"},"logBase":{"type":["number"],"description":"<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#parallelAxis.type\">type</a>: &#39;log&#39;.</p>\n","default":10},"silent":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code>, to prevent interaction with the axis.</p>\n","default":false},"triggerEvent":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to enable triggering events.</p>\n<p>Parameters of the event include:</p>\n<pre><code class=\"lang-js\">{\n    // Component type: xAxis, yAxis, radiusAxis, angleAxis\n    // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n    componentType: string,\n    // Value on axis before being formatted.\n    // Click on value label to trigger event.\n    value: &#39;&#39;,\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: &#39;&#39;\n}\n</code></pre>\n","default":false},"axisLine":{"type":["Object"],"description":"<p>Settings related to axis line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n","default":true},"symbol":{"type":["string","Array"],"description":"<p>Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It&#39;s set to be <code class=\"codespan\">&#39;none&#39;</code> by default, meaning no arrow for either end. If it is set to be <code class=\"codespan\">&#39;arrow&#39;</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code class=\"codespan\">[&#39;none&#39;, &#39;arrow&#39;]</code>.</p>\n","default":"'none'"},"symbolSize":{"type":["Array"],"description":"<p>Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.</p>\n","default":"[10, 15]"},"symbolOffset":{"type":["Array","number"],"description":"<p>Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>line styleLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#333'"},"width":{"type":["number"],"description":"<p>line style line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>line style line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"axisTick":{"type":["Object"],"description":"<p>Settings related to axis tick.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis tick from showing.</p>\n","default":true},"alignWithLabel":{"type":["boolean"],"description":"<p>Align axis tick with label, which is available only when <code class=\"codespan\">boundaryGap</code> is set to be <code class=\"codespan\">true</code> in category axis. See the following picture:</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/axis-align-with-label.png\"></p>\n","default":false},"interval":{"type":["number","Function"],"description":"<p>Interval of axisTick, which is available in category axis.  is set to be the same as <a href=\"#parallelAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> so the axis labels face the <code class=\"codespan\">inside</code> direction.</p>\n","default":false},"length":{"type":["number"],"description":"<p>The length of the axis tick.</p>\n","default":5},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Color of axis label is set to be <a href=\"#parallelAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"width":{"type":["number"],"description":"<p>axisTick line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>axisTick line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"minorTick":{"type":["Object"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.6.0</code></p>\n</blockquote>\n<p>Settings related minor ticks.</p>\n<p>Note: <code class=\"codespan\">minorTick</code> is not available in the <code class=\"codespan\">category</code> type axis.</p>\n<p>Examples:</p>\n<p>1) Using minor ticks in function plotting.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-function&edit=1&reset=1\" width=\"600\" height=\"350\"><iframe />\n\n\n<p>2) Using minor ticks in log axis.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-log&edit=1&reset=1\" width=\"600\" height=\"350\"><iframe />\n\n\n","properties":{"show":{"type":["boolean"],"description":"<p>If show minor ticks.</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>Number of interval splited by minor ticks.</p>\n","default":5},"length":{"type":["number"],"description":"<p>Length of minor ticks lines。</p>\n","default":3},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Style configuration of minor ticks lines <a href=\"#parallelAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。</p>\n"},"width":{"type":["number"],"description":"<p>minorTick line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>minorTick line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"axisLabel":{"type":["Object"],"description":"<p>Settings related to axis label.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis label from appearing.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>Interval of Axis label, which is available in category axis. </p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> so the axis labels face the <code class=\"codespan\">inside</code> direction.</p>\n","default":false},"rotate":{"type":["number"],"description":"<p>Rotation degree of axis label, which is especially useful when there is no enough space for category axis.</p>\n<p>Rotation degree is from -90 to 90.</p>\n","default":0},"margin":{"type":["number"],"description":"<p>The margin between the axis label and the axis line.</p>\n","default":8},"formatter":{"type":["string","Function"],"description":"<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Use string template; template variable is the default label of axis {value}\nformatter: &#39;{value} kg&#39;\n\n// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (idx === 0) {\n        texts.unshift(date.getYear());\n    }\n    return texts.join(&#39;/&#39;);\n}\n</code></pre>\n","default":null},"showMinLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the min tick. Optional values: <code class=\"codespan\">true</code>, <code class=\"codespan\">false</code>, <code class=\"codespan\">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.</p>\n","default":null},"showMaxLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the max tick. Optional values: <code class=\"codespan\">true</code>, <code class=\"codespan\">false</code>, <code class=\"codespan\">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.</p>\n","default":null},"color":{"type":["Color","Function"],"description":"<p>Color of axis label is set to be <a href=\"#parallelAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class=\"lang-js\">(val: string) =&gt; Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class=\"lang-js\">textStyle: {\n    color: function (value, index) {\n        return value &gt;= 0 ? &#39;green&#39; : &#39;red&#39;;\n    }\n}\n</code></pre>\n"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n\n","default":0}}}}}}},"data":{"type":["Array"],"description":"<p>Category data, available in <a href=\"#parallelAxis.type\">type</a>: &#39;category&#39; axis.</p>\n<p>If <a href=\"#parallelAxis.type\">type</a> is not specified, but <code class=\"codespan\">axis.data</code> is specified, the <a href=\"#parallelAxis.type\">type</a> is auto set as <code class=\"codespan\">&#39;category&#39;</code>.</p>\n<p>If <a href=\"#parallelAxis.type\">type</a> is specified as <code class=\"codespan\">&#39;category&#39;</code>, but <code class=\"codespan\">axis.data</code> is not specified, <code class=\"codespan\">axis.data</code> will be auto collected from <a href=\"#series.data\">series.data</a>. It brings convenience, but we should notice that <code class=\"codespan\">axis.data</code> provides then value range of the <code class=\"codespan\">&#39;category&#39;</code> axis. If  it is auto collected from <a href=\"#series.data\">series.data</a>, Only the values appearing in <a href=\"#series.data\">series.data</a> can be collected. For example, if <a href=\"#series.data\">series.data</a> is empty, nothing will be collected.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Name list of all categories\ndata: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n// Each item could also be a specific configuration item.\n// In this case, `value` is used as the category name.\ndata: [{\n    value: &#39;Monday&#39;,\n    // Highlight Monday\n    textStyle: {\n        fontSize: 20,\n        color: &#39;red&#39;\n    }\n}, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n</code></pre>\n","items":{"type":"Object","properties":{"value":{"type":["string"],"description":"<p>Name of a category.</p>\n"},"textStyle":{"type":["Object"],"description":"<p>Text style of the category.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"singleAxis":{"type":["Object"],"description":"<p>An axis with a single dimension. It can be used to display data in one dimension. For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=scatter-single-axis&edit=1&reset=1\" width=\"700\" height=\"500\"><iframe />\n\n\n\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between grid  component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'5%'"},"top":{"type":["string","number"],"description":"<p>Distance between grid  component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'5%'"},"right":{"type":["string","number"],"description":"<p>Distance between grid  component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n","default":"'5%'"},"bottom":{"type":["string","number"],"description":"<p>Distance between grid  component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n","default":"'5%'"},"width":{"type":["string","number"],"description":"<p>Width of grid  component. Adaptive by default.</p>\n","default":"'auto'"},"height":{"type":["string","number"],"description":"<p>Height of grid  component. Adaptive by default.</p>\n","default":"'auto'"},"orient":{"type":["string"],"description":"<p>Orientation of the axis. By default, it&#39;s <code class=\"codespan\">&#39;horizontal&#39;</code>. You can set it to be <code class=\"codespan\">&#39;vertical&#39;</code> to make a vertical axis.</p>\n","default":"'horizontal'"},"type":{"type":["string"],"description":"<p>Type of axis.</p>\n<p>Option:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;value&#39;</code>\n  Numerical axis, suitable for continuous data.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;category&#39;</code>\n  Category axis, suitable for discrete category data. Category data can be auto retrieved from <a href=\"#series.data\">series.data</a> or <a href=\"#dataset.source\">dataset.source</a>, or can be specified via <a href=\"#singleAxis.data\">singleAxis.data</a>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;time&#39;</code>\n  Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;log&#39;</code>\n  Log axis, suitable for log data.</p>\n</li>\n</ul>\n","default":"'value'"},"name":{"type":["string"],"description":"<p>Name of axis.</p>\n"},"nameLocation":{"type":["string"],"description":"<p>Location of axis name.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> or <code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;end&#39;</code></li>\n</ul>\n","default":"'end'"},"nameTextStyle":{"type":["Object"],"description":"<p>Text style of axis name.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Color of axis name uses <a href=\"#singleAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"fontStyle":{"type":["string"],"description":"<p>axis name font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p>axis name font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>axis name font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>axis name font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n\n","default":0}}}}}}},"nameGap":{"type":["number"],"description":"<p>Gap between axis name and axis line.</p>\n","default":15},"nameRotate":{"type":["number"],"description":"<p>Rotation of axis name.</p>\n","default":null},"inverse":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to invert the axis.\nThis is a new option available from Echarts 3 and newer.</p>\n","default":false},"boundaryGap":{"type":["boolean","Array"],"description":"<p>The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different.</p>\n<p>The <code class=\"codespan\">boundaryGap</code> of category axis can be set to either <code class=\"codespan\">true</code> or <code class=\"codespan\">false</code>. Default value is set to be <code class=\"codespan\">true</code>, in which case <a href=\"#singleAxis.axisTick\">axisTick</a> is served only as a separation line, and labels and data appear only in the center part of two <a href=\"#singleAxis.axisTick\">axis ticks</a>, which is called <em>band</em>.</p>\n<p>For non-category axis, including time, numerical value, and log axes, <code class=\"codespan\">boundaryGap</code> is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting <a href=\"#singleAxis.min\">min</a> and <a href=\"#singleAxis.max\">max</a>.\n<strong>Example: </strong></p>\n<pre><code class=\"lang-js\">boundaryGap: [&#39;20%&#39;, &#39;20%&#39;]\n</code></pre>\n"},"min":{"type":["number","string","Function"],"description":"<p>The minimun value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">&#39;dataMin&#39;</code> so that the minimum value on this axis is set to be the minimum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class=\"codespan\">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class=\"codespan\">2</code> represents <code class=\"codespan\">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class=\"codespan\">-3</code>.</p>\n<p>If <code class=\"codespan\">min</code> is specified as a function, it should return a min value, like:</p>\n<pre><code class=\"lang-js\">min: function (value) {\n    return value.min - 20;\n}\n</code></pre>\n<p><code class=\"codespan\">value</code> is an object, containing the <code class=\"codespan\">min</code> value and <code class=\"codespan\">max</code> value of the data. This function should return the min value of axis, or return <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> to make echarts use the auto calculated min value (<code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> return is only supported since <code class=\"codespan\">v4.8.0</code>).</p>\n","default":null},"max":{"type":["number","string","Function"],"description":"<p>The maximum value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">&#39;dataMax&#39;</code> so that the minimum value on this axis is set to be the maximum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class=\"codespan\">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class=\"codespan\">2</code> represents <code class=\"codespan\">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class=\"codespan\">-3</code>.</p>\n<p>If <code class=\"codespan\">max</code> is specified as a function, it should return a max value, like:</p>\n<pre><code class=\"lang-js\">max: function (value) {\n    return value.max - 20;\n}\n</code></pre>\n<p><code class=\"codespan\">value</code> is an object, containing the <code class=\"codespan\">min</code> value and <code class=\"codespan\">max</code> value of the data. This function should return the max value of axis, or return <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> to make echarts use the auto calculated max value (<code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> return is only supported since <code class=\"codespan\">v4.8.0</code>).</p>\n","default":null},"scale":{"type":["boolean"],"description":"<p>It is available only in numerical axis, i.e., <a href=\"#singleAxis.type\">type</a>: &#39;value&#39;.</p>\n<p>It specifies whether not to contain zero position of axis compulsively. When it is set to be <code class=\"codespan\">true</code>, the axis may not contain zero position, which is useful in the scatter chart for both value axes.</p>\n<p>This configuration item is unavailable when the <a href=\"#singleAxis.min\">min</a> and <a href=\"#singleAxis.max\">max</a> are set.</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.</p>\n<p>This is unavailable for category axis.</p>\n","default":5},"minInterval":{"type":["number"],"description":"<p>Minimum gap between split lines.</p>\n<p>For example, it can be set to be <code class=\"codespan\">1</code> to make sure axis label is show as integer.</p>\n<pre><code class=\"lang-js\">{\n    minInterval: 1\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#singleAxis.type\">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n","default":0},"maxInterval":{"type":["number"],"description":"<p>Maximum gap between split lines.</p>\n<p>For example, in time axis (<a href=\"#singleAxis.type\">type</a> is &#39;time&#39;), it can be set to be <code class=\"codespan\">3600 * 24 * 1000</code> to make sure that the gap between axis labels is less than or equal to one day.</p>\n<pre><code class=\"lang-js\">{\n    maxInterval: 3600 * 1000 * 24\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#singleAxis.type\">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n"},"interval":{"type":["number"],"description":"<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href=\"#singleAxis.splitNumber\">splitNumber</a> is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with <a href=\"#singleAxis.min\">min</a> and <a href=\"#singleAxis.max\">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situations.</p>\n<p>This is unavailable for category axis. Timestamp should be passed for <a href=\"#singleAxis.type\">type</a>: &#39;time&#39; axis. Logged value should be passed for <a href=\"#singleAxis.type\">type</a>: &#39;log&#39; axis.</p>\n"},"logBase":{"type":["number"],"description":"<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#singleAxis.type\">type</a>: &#39;log&#39;.</p>\n","default":10},"silent":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code>, to prevent interaction with the axis.</p>\n","default":false},"triggerEvent":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to enable triggering events.</p>\n<p>Parameters of the event include:</p>\n<pre><code class=\"lang-js\">{\n    // Component type: xAxis, yAxis, radiusAxis, angleAxis\n    // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n    componentType: string,\n    // Value on axis before being formatted.\n    // Click on value label to trigger event.\n    value: &#39;&#39;,\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: &#39;&#39;\n}\n</code></pre>\n","default":false},"axisLine":{"type":["Object"],"description":"<p>Settings related to axis line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n","default":true},"symbol":{"type":["string","Array"],"description":"<p>Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It&#39;s set to be <code class=\"codespan\">&#39;none&#39;</code> by default, meaning no arrow for either end. If it is set to be <code class=\"codespan\">&#39;arrow&#39;</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code class=\"codespan\">[&#39;none&#39;, &#39;arrow&#39;]</code>.</p>\n","default":"'none'"},"symbolSize":{"type":["Array"],"description":"<p>Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.</p>\n","default":"[10, 15]"},"symbolOffset":{"type":["Array","number"],"description":"<p>Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>line styleLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#333'"},"width":{"type":["number"],"description":"<p>line style line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>line style line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"axisTick":{"type":["Object"],"description":"<p>Settings related to axis tick.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis tick from showing.</p>\n","default":true},"alignWithLabel":{"type":["boolean"],"description":"<p>Align axis tick with label, which is available only when <code class=\"codespan\">boundaryGap</code> is set to be <code class=\"codespan\">true</code> in category axis. See the following picture:</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/axis-align-with-label.png\"></p>\n","default":false},"interval":{"type":["number","Function"],"description":"<p>Interval of axisTick, which is available in category axis.  is set to be the same as <a href=\"#singleAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> so the axis labels face the <code class=\"codespan\">inside</code> direction.</p>\n","default":false},"length":{"type":["number"],"description":"<p>The length of the axis tick.</p>\n","default":5},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Color of axis label is set to be <a href=\"#singleAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"width":{"type":["number"],"description":"<p>axisTick line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>axisTick line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"minorTick":{"type":["Object"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.6.0</code></p>\n</blockquote>\n<p>Settings related minor ticks.</p>\n<p>Note: <code class=\"codespan\">minorTick</code> is not available in the <code class=\"codespan\">category</code> type axis.</p>\n<p>Examples:</p>\n<p>1) Using minor ticks in function plotting.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-function&edit=1&reset=1\" width=\"600\" height=\"350\"><iframe />\n\n\n<p>2) Using minor ticks in log axis.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-log&edit=1&reset=1\" width=\"600\" height=\"350\"><iframe />\n\n\n","properties":{"show":{"type":["boolean"],"description":"<p>If show minor ticks.</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>Number of interval splited by minor ticks.</p>\n","default":5},"length":{"type":["number"],"description":"<p>Length of minor ticks lines。</p>\n","default":3},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Style configuration of minor ticks lines <a href=\"#singleAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。</p>\n"},"width":{"type":["number"],"description":"<p>minorTick line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>minorTick line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"axisLabel":{"type":["Object"],"description":"<p>Settings related to axis label.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis label from appearing.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>Interval of Axis label, which is available in category axis. </p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> so the axis labels face the <code class=\"codespan\">inside</code> direction.</p>\n","default":false},"rotate":{"type":["number"],"description":"<p>Rotation degree of axis label, which is especially useful when there is no enough space for category axis.</p>\n<p>Rotation degree is from -90 to 90.</p>\n","default":0},"margin":{"type":["number"],"description":"<p>The margin between the axis label and the axis line.</p>\n","default":8},"formatter":{"type":["string","Function"],"description":"<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Use string template; template variable is the default label of axis {value}\nformatter: &#39;{value} kg&#39;\n\n// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (idx === 0) {\n        texts.unshift(date.getYear());\n    }\n    return texts.join(&#39;/&#39;);\n}\n</code></pre>\n","default":null},"showMinLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the min tick. Optional values: <code class=\"codespan\">true</code>, <code class=\"codespan\">false</code>, <code class=\"codespan\">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.</p>\n","default":null},"showMaxLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the max tick. Optional values: <code class=\"codespan\">true</code>, <code class=\"codespan\">false</code>, <code class=\"codespan\">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.</p>\n","default":null},"color":{"type":["Color","Function"],"description":"<p>Color of axis label is set to be <a href=\"#singleAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class=\"lang-js\">(val: string) =&gt; Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class=\"lang-js\">textStyle: {\n    color: function (value, index) {\n        return value &gt;= 0 ? &#39;green&#39; : &#39;red&#39;;\n    }\n}\n</code></pre>\n"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n\n","default":0}}}}}}},"splitLine":{"type":["Object"],"description":"<p>Split line of axis in <a href=\"#grid\">grid</a> area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the splitLine from showing.\n<code class=\"codespan\">value</code> type axes are shown by default, while <code class=\"codespan\">category</code> type axes are hidden.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>Interval of Axis splitLine, which is available in category axis.  is set to be the same as <a href=\"#singleAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Array","string"],"description":"<p>The color of the splitLine, which could be set separately.</p>\n<p>SplitLine color could also be set in color array, which the split lines would take as their colors in turns.</p>\n<p>Example:</p>\n<pre><code>splitLine: {\n    lineStyle: {\n        // Dark and light colors will be used in turns\n        color: [&#39;#aaa&#39;, &#39;#ddd&#39;]\n    }\n}\n</code></pre>","default":"['#ccc']"},"width":{"type":["number"],"description":"<p>splitLine line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>splitLine line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"minorSplitLine":{"type":["Object"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.6.0</code></p>\n</blockquote>\n<p>Minor split lines of axis in the <a href=\"#grid\">grid</a> area。It will align to the <a href=\"#singleAxis.minorTick\">minorTick</a></p>\n","properties":{"show":{"type":["boolean"],"description":"<p>If show minor split lines.</p>\n","default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>minorSplitLineLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#eee'"},"width":{"type":["number"],"description":"<p>minorSplitLine line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>minorSplitLine line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"splitArea":{"type":["Object"],"description":"<p>Split area of axis in <a href=\"#grid\">grid</a> area, not shown by default.</p>\n","properties":{"interval":{"type":["number","Function"],"description":"<p>Interval of Axis splitArea, which is available in category axis.  is set to be the same as <a href=\"#singleAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to show the splitArea.</p>\n","default":false},"areaStyle":{"type":["Object"],"description":"<p>Split area style.</p>\n","properties":{"color":{"type":["Array"],"description":"<p>Color of split area.\nSplitArea color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.</p>\n","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Category data, available in <a href=\"#singleAxis.type\">type</a>: &#39;category&#39; axis.</p>\n<p>If <a href=\"#singleAxis.type\">type</a> is not specified, but <code class=\"codespan\">axis.data</code> is specified, the <a href=\"#singleAxis.type\">type</a> is auto set as <code class=\"codespan\">&#39;category&#39;</code>.</p>\n<p>If <a href=\"#singleAxis.type\">type</a> is specified as <code class=\"codespan\">&#39;category&#39;</code>, but <code class=\"codespan\">axis.data</code> is not specified, <code class=\"codespan\">axis.data</code> will be auto collected from <a href=\"#series.data\">series.data</a>. It brings convenience, but we should notice that <code class=\"codespan\">axis.data</code> provides then value range of the <code class=\"codespan\">&#39;category&#39;</code> axis. If  it is auto collected from <a href=\"#series.data\">series.data</a>, Only the values appearing in <a href=\"#series.data\">series.data</a> can be collected. For example, if <a href=\"#series.data\">series.data</a> is empty, nothing will be collected.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Name list of all categories\ndata: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n// Each item could also be a specific configuration item.\n// In this case, `value` is used as the category name.\ndata: [{\n    value: &#39;Monday&#39;,\n    // Highlight Monday\n    textStyle: {\n        fontSize: 20,\n        color: &#39;red&#39;\n    }\n}, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n</code></pre>\n","items":{"type":"Object","properties":{"value":{"type":["string"],"description":"<p>Name of a category.</p>\n"},"textStyle":{"type":["Object"],"description":"<p>Text style of the category.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}},"axisPointer":{"type":["Object"],"description":"<p>axisPointer settings on the axis.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>axisPointer will not be displayed by default. But if <a href=\"#tooltip.trigger\">tooltip.trigger</a> is set as <code class=\"codespan\">&#39;axis&#39;</code> or <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as  <code class=\"codespan\">&#39;cross&#39;</code>, axisPointer will be displayed automatically. Each coordinate system will automatically chose the axes whose will display its axisPointer. <a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> can be used to change the choice.</p>\n","default":false},"type":{"type":["string"],"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;line&#39;</code> line indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;shadow&#39;</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;none&#39;</code> no indicator displayed.</p>\n</li>\n</ul>\n","default":"'line'"},"snap":{"type":["boolean"],"description":"<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n"},"z":{"type":["number"],"description":"<p>z value, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n"},"label":{"type":["Object"],"description":"<p>label of axisPointer</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label. Label will not show by default. But if <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as  <code class=\"codespan\">&#39;cross&#39;</code>, label will be displayed automatically.</p>\n","default":false},"precision":{"type":["number","string"],"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code class=\"codespan\">&#39;2&#39;</code>, which indicates that two decimal fractions are reserved.</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"<p>The formatter of label.</p>\n<p>If set as <code class=\"codespan\">string</code>, for example it can be: <code class=\"codespan\">formatter: &#39;some text {value} some text</code>, where <code class=\"codespan\">{value}</code> will be replaced by axis value automatically.</p>\n<p>If set as <code class=\"codespan\">function</code>:</p>\n<p><strong>Parameters:</strong></p>\n<p><code class=\"codespan\">{Object}</code> params: Including fields as follows:</p>\n<p><code class=\"codespan\">{Object}</code> params.value: current value of this axis. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;category&#39;</code>, it is one of the value in <code class=\"codespan\">axis.data</code>. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;time&#39;</code>, it is a timestamp.</p>\n<p><code class=\"codespan\">{Array.&lt;Object&gt;}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<p><code class=\"codespan\">{string}</code> params.axisDimension: The dimension name of the axis. For example, in catesian it will be <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, and in polar it will be <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code>.</p>\n<p><code class=\"codespan\">{number}</code> params.axisIndex: The index of the axis, for example, <code class=\"codespan\">0</code>,<code class=\"codespan\">1</code>, <code class=\"codespan\">2</code>, ...</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n    axisDim: &#39;x&#39;, // &#39;x&#39;, &#39;y&#39;, &#39;angle&#39;, &#39;radius&#39;, &#39;single&#39;\n    axisId: &#39;xxx&#39;,\n    axisName: &#39;xxx&#39;,\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: &#39;text of value&#39;\n}\n</code></pre>\n<p><strong>Return:</strong></p>\n<p>The string to be displayed.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n    // If axis.type is &#39;time&#39;\n    return &#39;some text&#39; + echarts.format.formatTime(params.value);\n}\n</code></pre>\n","default":null},"margin":{"type":["boolean"],"description":"<p>Distance between label and axis.</p>\n","default":3},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"padding":{"type":["string","Array"],"description":"<p>axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"<p>Border color of label.</p>\n","default":null},"borderWidth":{"type":["string"],"description":"<p>Border width of label.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"lineStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;line&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"shadowStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;shadow&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"triggerTooltip":{"type":["boolean"],"description":"<p>Whether to trigger tooltip.</p>\n","default":true},"value":{"type":["number"],"description":"<p>current value. When using <a href=\"xAxisPointer.handle\" target=\"_blank\">axisPointer.handle</a>, <code class=\"codespan\">value</code> can be set to define the initail position of axisPointer.</p>\n","default":null},"status":{"type":["boolean"],"description":"<p>Current status, can be <code class=\"codespan\">&#39;show&#39;</code> 和 <code class=\"codespan\">&#39;hide&#39;</code>.</p>\n"},"handle":{"type":["Object"],"description":"<p>A button used to drag axisPointer. This feature is applicable in touch device. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set to <code class=\"codespan\">true</code> to use handle.</p>\n","default":false},"icon":{"type":["*"],"description":"<p>The icon of the handle.</p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/axisPointer-handle-image&amp;edit=1&amp;reset=1\" target=\"_blank\">example of using image</a></p>\n"},"size":{"type":["number","Array"],"description":"<p>The size of the handle, which can be set as a single value or an array (<code class=\"codespan\">[width, height]</code>).</p>\n","default":45},"margin":{"type":["number"],"description":"<p>Distance from handle center to axis.</p>\n","default":50},"color":{"type":["string"],"description":"<p>The color of the handle.</p>\n","default":"'#333'"},"throttle":{"type":["number"],"description":"<p>Throttle rate of trigger view update when dragging handle, in ms. Increase the value to improve performance, but decrease the experience.</p>\n","default":40},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":2},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}}}},"tooltip":{"type":["Object"],"description":"<p>tooltip settings in the coordinate system component.</p>\n<hr>\n<p><strong>General Introduction:</strong></p>\n<p>tooltip can be configured on different places:</p>\n<ul>\n<li><p>Configured on global: <a href=\"#tooltip\">tooltip</a></p>\n</li>\n<li><p>Configured in a coordinate system: <a href=\"#grid.tooltip\">grid.tooltip</a>, <a href=\"#polar.tooltip\">polar.tooltip</a>, <a href=\"#single.tooltip\">single.tooltip</a></p>\n</li>\n<li><p>Configured in a series: <a href=\"#series.tooltip\">series.tooltip</a></p>\n</li>\n<li><p>Configured in each item of <code class=\"codespan\">series.data</code>: <a href=\"#series.data.tooltip\">series.data.tooltip</a></p>\n</li>\n</ul>\n<hr>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the tooltip component, including tooltip floating layer and <a href=\"#tooltip.axisPointer\">axisPointer</a>.</p>\n","default":true},"trigger":{"type":["string"],"description":"<p>Type of triggering.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;item&#39;</code></p>\n<p>  Triggered by data item, which is mainly used for charts that don&#39;t have a category axis like scatter charts or pie charts.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;axis&#39;</code></p>\n<p>  Triggered by axes, which is mainly used for charts that have category axes, like bar charts or line charts.</p>\n<p> ECharts 2.x only supports axis trigger for category axis. In ECharts 3, it is supported for all types of axes in <a href=\"#grid\">grid</a> or <a href=\"#polar\">polar</a>. Also, you may assign axis with <a href=\"#tooltip.axisPointer.axis\">axisPointer.axis</a>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;none&#39;</code></p>\n<p>  Trigger nothing.</p>\n</li>\n</ul>\n","default":"'item'"},"axisPointer":{"type":["Object"],"description":"<p>Configuration item for axisPointer.</p>\n<p><code class=\"codespan\">tooltip.axisPointer</code> is like syntactic sugar of axisPointer settings on axes (for example, <a href=\"#xAxis.axisPointer\">xAxis.axisPointer</a> or <a href=\"#angleAxis.axisPointer\">angleAxis.axisPointer</a>). More detailed features can be configured on <code class=\"codespan\">someAxis.axisPointer</code>. But in common cases, using <code class=\"codespan\">tooltip.axisPointer</code> is more convenient.</p>\n<blockquote>\n<p><strong>Notice:</strong> configurations of <code class=\"codespan\">tooltip.axisPointer</code> has lower priority than that of <code class=\"codespan\">someAxis.axisPointer</code>.</p>\n</blockquote>\n<hr>\n<p><code class=\"codespan\">axisPointer</code> is a tool for displaying reference line and axis value under mouse pointer.</p>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/candlestick-axisPointer&edit=1&reset=1\" width=\"600\" height=\"450\"><iframe />\n\n\n<p>In the demo above, <a href=\"#axisPointer.link\">axisPointer.link</a> is used to link axisPointer from different coordinate systems.</p>\n<p><code class=\"codespan\">axisPointer</code> can also be used on touch device, where user can drag the button to move the reference line and label.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-tooltip-touch&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n<p>In the cases that more than one axis exist, axisPointer helps to look inside the data.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=multiple-y-axis&edit=1&reset=1\" width=\"600\" height=\"300\"><iframe />\n\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=multiple-x-axis&edit=1&reset=1\" width=\"600\" height=\"300\"><iframe />\n\n\n\n<hr>\n<blockquote>\n<p><strong>Notice:</strong>\nGenerally, axisPointers is configured in each axes who need them (for example <a href=\"#xAxis.axisPointer\">xAxis.axisPointer</a>), or configured in <code class=\"codespan\">tooltip</code> (for example <a href=\"#tooltip.axisPointer\">tooltip.axisPointer</a>).</p>\n</blockquote>\n<blockquote>\n<p>But these configurations can only be configured in global axisPointer:\n<a href=\"#axisPointer.triggerOn\">axisPointer.triggerOn</a>, <a href=\"#axisPointer.link\">axisPointer.link</a>.</p>\n</blockquote>\n<hr>\n<hr>\n<p><strong>How to display axisPointer:</strong></p>\n<p>In <a href=\"#grid\">cartesian (grid)</a> and <a href=\"#single\">polar](~polar) and (single axis</a>, each axis has its own axisPointer.</p>\n<p>Those axisPointer will not be displayed by default, utill configured as follows:</p>\n<ul>\n<li><p>Set <code class=\"codespan\">someAxis.axisPointer.show</code> (like <a href=\"#xAxis.axisPointer.show\">xAxis.axisPointer.show</a>) as <code class=\"codespan\">true</code>. Then axisPointer of this axis will be displayed.</p>\n</li>\n<li><p>Set <a href=\"#tooltip.trigger\">tooltip.trigger</a> as <code class=\"codespan\">&#39;axis&#39;</code>, or set <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> as <code class=\"codespan\">&#39;cross&#39;</code>. Then coordinate system will automatically chose the axes who will display their axisPointers. (<a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> can be used to change the choice.) Notice, <code class=\"codespan\">axis.axisPointer</code> will override <code class=\"codespan\">tooltip.axisPointer</code> settings.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to display the label of axisPointer:</strong></p>\n<p>The label of axisPointer will not be displayed by default(namely, only reference line will be displayed by default), utill configured as follows:</p>\n<ul>\n<li><p>Set <code class=\"codespan\">someAxis.axisPointer.label.show</code> (for example <a href=\"#xAxis.axisPointer.show\">xAxis.axisPointer.label.show</a>) as <code class=\"codespan\">true</code>. Then the label of the axisPointer will be displayed.</p>\n</li>\n<li><p>Set <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> as  <code class=\"codespan\">&#39;cross&#39;</code>. Then the label of the crossed axisPointers will be displayed.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to configure axisPointer on touch device:</strong></p>\n<p>Set <code class=\"codespan\">someAxis.axisPointer.handle.show</code> (for example <a href=\"#xAxis.axisPointer.handle.show\">xAxis.axisPointer.handle.show</a> as <code class=\"codespan\">true</code>. Then the button for dragging will be displayed. (This feature is not supported on polar).</p>\n<p><strong>Notice:</strong>\nIf tooltip does not work well in this case, try to set<a href=\"#tooltip.triggerOn\">tooltip.triggerOn</a> as <code class=\"codespan\">&#39;none&#39;</code> (for the effect: show tooltip when finger holding on the button, and hide tooltip after finger left the button), or set <a href=\"#tooltip.alwaysShowContent\">tooltip.alwaysShowContent</a> as <code class=\"codespan\">true</code> (then tooltip will always be displayed).</p>\n<p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>.</p>\n<hr>\n<p><strong>Snap to point</strong></p>\n<p>In value axis and time axis, if <a href=\"#xAxis.axisPointer.snap\">snap</a> is set as true, axisPointer will snap to point automatically.</p>\n<hr>\n","properties":{"type":{"type":["string"],"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;line&#39;</code> line indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;shadow&#39;</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;none&#39;</code> no indicator displayed.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;cross&#39;</code> crosshair indicator, which is actually the shortcut of enable two axisPointers of two orthometric axes.</p>\n</li>\n</ul>\n","default":"'line'"},"axis":{"type":["string"],"description":"<p>The coordinate axis, which could be <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, <code class=\"codespan\">&#39;radius&#39;</code>, or <code class=\"codespan\">&#39;angle&#39;</code>. By default, each coordinate system will automatically chose the axes whose will display its axisPointer (category axis or time axis is used by default).</p>\n","default":"'auto'"},"snap":{"type":["boolean"],"description":"<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n"},"z":{"type":["number"],"description":"<p>z value, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n"},"label":{"type":["Object"],"description":"<p>label of axisPointer</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label. Label will not show by default. But if <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as  <code class=\"codespan\">&#39;cross&#39;</code>, label will be displayed automatically.</p>\n","default":false},"precision":{"type":["number","string"],"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code class=\"codespan\">&#39;2&#39;</code>, which indicates that two decimal fractions are reserved.</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"<p>The formatter of label.</p>\n<p>If set as <code class=\"codespan\">string</code>, for example it can be: <code class=\"codespan\">formatter: &#39;some text {value} some text</code>, where <code class=\"codespan\">{value}</code> will be replaced by axis value automatically.</p>\n<p>If set as <code class=\"codespan\">function</code>:</p>\n<p><strong>Parameters:</strong></p>\n<p><code class=\"codespan\">{Object}</code> params: Including fields as follows:</p>\n<p><code class=\"codespan\">{Object}</code> params.value: current value of this axis. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;category&#39;</code>, it is one of the value in <code class=\"codespan\">axis.data</code>. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;time&#39;</code>, it is a timestamp.</p>\n<p><code class=\"codespan\">{Array.&lt;Object&gt;}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<p><code class=\"codespan\">{string}</code> params.axisDimension: The dimension name of the axis. For example, in catesian it will be <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, and in polar it will be <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code>.</p>\n<p><code class=\"codespan\">{number}</code> params.axisIndex: The index of the axis, for example, <code class=\"codespan\">0</code>,<code class=\"codespan\">1</code>, <code class=\"codespan\">2</code>, ...</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n    axisDim: &#39;x&#39;, // &#39;x&#39;, &#39;y&#39;, &#39;angle&#39;, &#39;radius&#39;, &#39;single&#39;\n    axisId: &#39;xxx&#39;,\n    axisName: &#39;xxx&#39;,\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: &#39;text of value&#39;\n}\n</code></pre>\n<p><strong>Return:</strong></p>\n<p>The string to be displayed.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n    // If axis.type is &#39;time&#39;\n    return &#39;some text&#39; + echarts.format.formatTime(params.value);\n}\n</code></pre>\n","default":null},"margin":{"type":["boolean"],"description":"<p>Distance between label and axis.</p>\n","default":3},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"padding":{"type":["string","Array"],"description":"<p>axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"<p>Border color of label.</p>\n","default":null},"borderWidth":{"type":["string"],"description":"<p>Border width of label.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"lineStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;line&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"shadowStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;shadow&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"crossStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;cross&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"dashed"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":200},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"exponentialOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"position":{"type":["string","Array"],"description":"<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},"timeline":{"type":["Object"],"description":"<p><code class=\"codespan\">timeline</code> component, which provides functions like switching and playing between multiple ECharts <code class=\"codespan\">options</code>.</p>\n<p>Here is an example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/mix-timeline-all&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n<p>Different from other components, <code class=\"codespan\">timeline</code> component requires multiple options. If the traditional way of ECharts option is called <em>atomic option</em>, then, the option used along with timeline should be call a <em>compound option</em> composed with multiple atomic options. For example:</p>\n<pre><code class=\"lang-javascript\">// In the following example, baseOption is an *atomic option*, so as each item in options array.\n// Each of the atomic option follows configuration introduced in this document.\nmyChart.setOption(\n    {\n        baseOption: {\n            timeline: {\n                ...,\n                data: [&#39;2002-01-01&#39;, &#39;2003-01-01&#39;, &#39;2004-01-01&#39;]\n            },\n            title: {\n                subtext: &#39; Data is from National Bureau of Statistics &#39;\n            },\n            grid: {...},\n            xAxis: [...],\n            yAxis: [...],\n            series: [\n                { // other configurations of series 1\n                    type: &#39;bar&#39;,\n                    ...\n                },\n                { // other configurations of series 2\n                    type: &#39;line&#39;,\n                    ...\n                },\n                { // other configurations of series 3\n                    type: &#39;pie&#39;,\n                    ...\n                }\n            ]\n        },\n        options: [\n            { // it is an option corresponding to &#39;2002-01-01&#39;\n                title: {\n                text: &#39;the statistics of the year 2002&#39;\n                },\n                series: [\n                    {data: []}, // the data of series 1\n                    {data: []}, // the data of series 2\n                    {data: []}  // the data of series 3\n                ]\n            },\n            { // it is an option corresponding to &#39;2003-01-01&#39;\n                title: {\n                    text: &#39;the statistics of the year 2003&#39;\n                },\n                series: [\n                    {data: []},\n                    {data: []},\n                    {data: []}\n                ]\n            },\n            { // it is an option corresponding to &#39;2004-01-01&#39;\n                title: {\n                    text: &#39;the statistics of the year 2004&#39;\n                },\n                series: [\n                    {data: []},\n                    {data: []},\n                    {data: []}\n                ]\n            }\n        ]\n    }\n);\n</code></pre>\n<p>In the above example, each item in <code class=\"codespan\">timeline.data</code> corresponds to each <code class=\"codespan\">option</code> of <code class=\"codespan\">options</code> array.</p>\n<p><br>\n<strong>Attention and Best Practice: </strong></p>\n<ul>\n<li><p>Shared configuration items are recommended to be set in <code class=\"codespan\">baseOption</code>. When switching in <code class=\"codespan\">timeline</code>, <code class=\"codespan\">option</code> in corresponding <code class=\"codespan\">options</code> array will be merged with <code class=\"codespan\">baseOption</code> to form the final <code class=\"codespan\">option</code>.</p>\n</li>\n<li><p>In <code class=\"codespan\">options</code> array, if an attribute is configured in one of the options, then, it should also be configured in other options. Otherwise, this attribute will be ignored.</p>\n</li>\n<li><p><code class=\"codespan\">options</code> in <em>compound option</em> doesn&#39;t support merge.</p>\n<p>  That is to say, when calling <code class=\"codespan\">chart.setOption(rawOption)</code> after the first time, if <code class=\"codespan\">rawOption</code> is a <em>compound option</em> (meaning that it contains an array of <code class=\"codespan\">options</code>), then the new <code class=\"codespan\">rawOption.options</code> will replace the old one, instead of merging with it. Of course, <code class=\"codespan\">rawOption.baseOption</code> will be merged with that of old option normally.</p>\n</li>\n</ul>\n<p><br>\n<strong>Compatibility with ECharts 2: </strong></p>\n<ul>\n<li><p>ECharts3 doesn&#39;t support <code class=\"codespan\">timeline.notMerge</code> parameter any more, which implies <em>notMerge mode</em> is no longer supported. If you need this function, you may manage the option in your own program before passing to <code class=\"codespan\">setOption(option, true)</code>.</p>\n</li>\n<li><p>Comparing ECharts 3 with ECharts 2, the definition location of timeline attributes are different. The one in ECharts 3 is moved to  <code class=\"codespan\">baseOption</code> and is regarded as a seperate component, which is also compatible with the timeline definition location of ECharts 2. But it is not recommended to do so.</p>\n</li>\n</ul>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the <code class=\"codespan\">timeline</code> component. It would not show with a setting of <code class=\"codespan\">false</code>, but its functions still remain.</p>\n","default":true},"type":{"type":["string"],"description":"<p>This attribute has only one valid value as <code class=\"codespan\">slider</code> by now. You don&#39;t have to change it.</p>\n","default":"'slider'"},"axisType":{"type":["string"],"description":"<p>Type of axis, whose values may be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;value&#39;</code>\n  Numeric axis, which is suitable for continuous data.</li>\n<li><code class=\"codespan\">&#39;category&#39;</code>\n  Category axis, which is suitable for category data.</li>\n<li><code class=\"codespan\">&#39;time&#39;</code>\n  Time axis, which is suitable for continuous time data. Compared with value axis, time axis is equipped with time formatting function and has a different method when calculating axis ticks. For example, for time axis, axis ticks may vary in choosing unit as month, week, date, or hour based on the range of data.</li>\n</ul>\n","default":"'time'"},"currentIndex":{"type":["number"],"description":"<p>Indicates which is the currently selected item. For instance, if <code class=\"codespan\">currentIndex</code> is <code class=\"codespan\">0</code>, it indicates that the currently selected item is <code class=\"codespan\">timeline.data[0]</code> (namely, using <code class=\"codespan\">options[0]</code>).</p>\n","default":0},"autoPlay":{"type":["boolean"],"description":"<p>Whether to play automatically.</p>\n","default":false},"rewind":{"type":["boolean"],"description":"<p>Whether supports playing reversely.</p>\n","default":false},"loop":{"type":["boolean"],"description":"<p>Whether to loop playing.</p>\n","default":true},"playInterval":{"type":["number"],"description":"<p>Indicates play speed (gap time between two state), whose unit is millisecond.</p>\n","default":2000},"realtime":{"type":["boolean"],"description":"<p>Whether the view updates in real time during dragging the control dot.</p>\n","default":true},"controlPosition":{"type":["string"],"description":"<p>Position of the play button, whose valid values are <code class=\"codespan\">&#39;left&#39;</code> and <code class=\"codespan\">&#39;right&#39;</code>.</p>\n","default":"'left'"},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between timeline component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"top":{"type":["string","number"],"description":"<p>Distance between timeline component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"right":{"type":["string","number"],"description":"<p>Distance between timeline component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"<p>Distance between timeline component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"padding":{"type":["number","Array"],"description":"<p>timeline space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"orient":{"type":["string"],"description":"<p>Orientation of the component, whose valid values are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;vertical&#39;</code>: vertical layout.</li>\n<li><code class=\"codespan\">&#39;horizontal&#39;</code>: horizontal layout.</li>\n</ul>\n","default":"'horizontal'"},"inverse":{"type":["boolean"],"description":"<ul>\n<li>Whether to put the <code class=\"codespan\">timeline</code> component reversely, which makes the elements in the front to be at the end.</li>\n</ul>\n","default":false},"symbol":{"type":["string"],"description":"<p>Symbol of timeline.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>","default":"'emptyCircle'"},"symbolSize":{"type":["number","Array"],"description":"<p>timeline symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n","default":10},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of timeline symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of timeline symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the axis. It can be set to be <code class=\"codespan\">false</code> to hide the axis line to make a different style.</p>\n","default":true},"color":{"type":["Color"],"description":"<p>timeline Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#304654'"},"width":{"type":["number"],"description":"<p>timeline  line width.</p>\n","default":2},"type":{"type":["string"],"description":"<p>timeline  line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"<p>Label axis, <code class=\"codespan\">emphasis</code> is the highlighted style of text. For instance, text style in <code class=\"codespan\">emphasis</code> would be used when mouse hovers or legend connects.</p>\n","properties":{"position":{"type":["string","number"],"description":"<p>Configurations:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;auto&#39;</code>:\n  Automatic layout.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code>:\n  Put it along the left margin.\n  It is valid when <a href=\"#timeline.orient\">timline.orient</a> is set as <code class=\"codespan\">&#39;horizontal&#39;</code> .</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code>:\n  Put it along the right margin.\n  It is valid when <a href=\"#timeline.orient\">timline.orient</a> is set as <code class=\"codespan\">&#39;horizontal&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code>:\n  Put it along the margin of the top.\n  It is valid when <a href=\"#timeline.orient\">timline.orient</a> is set as <code class=\"codespan\">&#39;vertical&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code>:\n  Put it along the margin of the bottom.\n  It is valid when <a href=\"#timeline.orient\">timline.orient</a> is set as <code class=\"codespan\">&#39;vertical&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">number</code>:\n  When it is assigned to be a a number value, it indicates the distance between <code class=\"codespan\">label</code> and axis. If it is set to be <code class=\"codespan\">0</code> , <code class=\"codespan\">label</code> would be at the same position with axis. Negative value is valid for the other side of the axis.</p>\n</li>\n</ul>\n","default":"'auto'"},"show":{"type":["boolean"],"description":"<p>Whether to show the label.</p>\n","default":true},"interval":{"type":["string","number"],"description":"<p>Interval of <code class=\"codespan\">label</code>. When it is assigned with a numerical value, such as  <code class=\"codespan\">2</code>, a label would show every 2 items.</p>\n","default":"'auto'"},"rotate":{"type":["prefix"],"description":"<p>Rotation angle of <code class=\"codespan\">label</code>, in which positive values refer to counter clockwise rotation.</p>\n","default":0},"formatter":{"type":["string","Function"],"description":"<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Use string template; template variable is the default label of axis {value}\nformatter: &#39;{value} kg&#39;\n\n// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (idx === 0) {\n        texts.unshift(date.getYear());\n    }\n    return texts.join(&#39;/&#39;);\n}\n</code></pre>\n","default":null},"color":{"type":["Color"],"description":"<p>timeline.lable.normal text color.</p>\n","default":"'#304654'"},"fontStyle":{"type":["string"],"description":"<p>timeline.lable.normal font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p>timeline.lable.normal font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>timeline.lable.normal font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>timeline.lable.normal font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the label.</p>\n","default":true},"interval":{"type":["string","number"],"description":"<p>Interval of <code class=\"codespan\">label</code>. When it is assigned with a numerical value, such as  <code class=\"codespan\">2</code>, a label would show every 2 items.</p>\n","default":"'auto'"},"rotate":{"type":["prefix"],"description":"<p>Rotation angle of <code class=\"codespan\">label</code>, in which positive values refer to counter clockwise rotation.</p>\n","default":0},"formatter":{"type":["string","Function"],"description":"<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Use string template; template variable is the default label of axis {value}\nformatter: &#39;{value} kg&#39;\n\n// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (idx === 0) {\n        texts.unshift(date.getYear());\n    }\n    return texts.join(&#39;/&#39;);\n}\n</code></pre>\n","default":null},"color":{"type":["Color"],"description":"<p>timeline.lable.emphasis text color.</p>\n","default":"'#c23531'"},"fontStyle":{"type":["string"],"description":"<p>timeline.lable.emphasis font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p>timeline.lable.emphasis font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>timeline.lable.emphasis font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>timeline.lable.emphasis font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of timeline , <code class=\"codespan\">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>timeline  color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#304654'"},"borderColor":{"type":["Color"],"description":"<p>timeline  border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p>timeline  border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>timeline  color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#c23531'"},"borderColor":{"type":["Color"],"description":"<p>timeline  border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p>timeline  border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"checkpointStyle":{"type":["Object"],"description":"<p>Style of the selected item (<code class=\"codespan\">checkpoint</code>).</p>\n","properties":{"symbol":{"type":["string"],"description":"<p>Symbol of timeline.checkpointStyle .</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>","default":"'circle'"},"symbolSize":{"type":["number","Array"],"description":"<p>timeline.checkpointStyle  symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n","default":13},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of timeline.checkpointStyle  symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of timeline.checkpointStyle  symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"color":{"type":["Color"],"description":"<p>Color of <code class=\"codespan\">checkpoint</code> in <code class=\"codespan\">timeline</code> component.</p>\n","default":"'#c23531'"},"borderWidth":{"type":["number"],"description":"<p>The border-width of <code class=\"codespan\">checkpoint</code> in <code class=\"codespan\">timeline</code> component.</p>\n","default":5},"borderColor":{"type":["Color"],"description":"<p>The border-color of <code class=\"codespan\">checkpoint</code> in <code class=\"codespan\">timeline</code> component.</p>\n","default":"'rgba(194,53,49, 0.5)'"},"animation":{"type":["boolean"],"description":"<p>In <code class=\"codespan\">timeline</code> component, whether there is animation in <code class=\"codespan\">checkpoint</code> moving during the process of <code class=\"codespan\">timeline</code> playing and switching.</p>\n","default":true},"animationDuration":{"type":["number"],"description":"<p>The animation duration of <code class=\"codespan\">checkpoint</code> in <code class=\"codespan\">timeline</code> component.</p>\n","default":300},"animationEasing":{"type":["string"],"description":"<p>The easing effect of animation of <code class=\"codespan\">checkpoint</code> in <code class=\"codespan\">timeline</code> component. Refers to <a href=\"https://echarts.apache.org/examples/zh/view.html?c=line-easing\" target=\"_blank\">easing sample</a> for different easing effects.</p>\n","default":"'quinticInOut'"}}},"controlStyle":{"type":["Object"],"description":"<p>The style of <em>control button</em>, which includes: <em>play button</em>, <em>previous button</em>, and <em>next button</em>.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show control button. <code class=\"codespan\">false</code> for hide all.</p>\n","default":true},"showPlayBtn":{"type":["boolean"],"description":"<p>Whether to show play button.</p>\n","default":true},"showPrevBtn":{"type":["boolean"],"description":"<p>Whether to show previous button.</p>\n","default":true},"showNextBtn":{"type":["boolean"],"description":"<p>Whether to show next button.</p>\n","default":true},"itemSize":{"type":["number"],"description":"<p>Size of <em>control button</em>, in pixels (px).</p>\n","default":22},"itemGap":{"type":["number"],"description":"<p>Interval between <em>control button</em>, in pixels (px).</p>\n","default":12},"position":{"type":["string"],"description":"<p>the location of <em>control button</em>.</p>\n<ul>\n<li><p>When <a href=\"#timeline.orient\">timeline.orient</a> is set to be <code class=\"codespan\">&#39;horizontal&#39;</code>, <code class=\"codespan\">&#39;left&#39;</code> and <code class=\"codespan\">&#39;right&#39;</code>are valid.</p>\n</li>\n<li><p>When <a href=\"#timeline.orient\">timeline.orient</a> is set to be <code class=\"codespan\">&#39;vertical&#39;</code>, <code class=\"codespan\">&#39;top&#39;</code> and <code class=\"codespan\">&#39;bottom&#39;</code>are valid.</p>\n</li>\n</ul>\n","default":"'left'"},"playIcon":{"type":["string"],"description":"<p>Icon of <em>play status</em> for <em>play button</em>.</p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"stopIcon":{"type":["string"],"description":"<p>Icon of <em>stop status</em> for <em>play button</em>.</p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"prevIcon":{"type":["string"],"description":"<p>Icon of <em>previous button</em>.</p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"nextIcon":{"type":["string"],"description":"<p>Icon of <em>next button</em>.</p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"color":{"type":["Color"],"description":"<p>Button color.</p>\n","default":"'#304654'"},"borderColor":{"type":["Color"],"description":"<p>Color of button border.</p>\n","default":"'#304654'"},"borderWidth":{"type":["number"],"description":"<p>Border width of button.</p>\n","default":1},"emphasis":{"type":["Object"],"description":"<p>Button style in <em>highlighted state</em> (when it&#39;s hovered by mouse).</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Button color.</p>\n","default":"'#c23531'"},"borderColor":{"type":["Color"],"description":"<p>Color of button border.</p>\n","default":"'#c23531'"},"borderWidth":{"type":["number"],"description":"<p>Width of button border.</p>\n","default":2}}}}},"data":{"type":["Array"],"description":"<p><code class=\"codespan\">timeline</code> data. Each item of <code class=\"codespan\">Array</code> can be a instant value. If you need to set style individually for a data item, the <code class=\"codespan\">data</code> item should be written as <code class=\"codespan\">Object</code>. In then <code class=\"codespan\">Object</code>, the attribute of <code class=\"codespan\">value</code> is numerical value. Other attributes, such as shown the examples below, could cover the attribute configurations in <code class=\"codespan\">timeline</code>.</p>\n<p>as follows:</p>\n<pre><code class=\"lang-javascript\">[\n    &#39;2002-01-01&#39;,\n    &#39;2003-01-01&#39;,\n    &#39;2004-01-01&#39;,\n    {\n        value: &#39;2005-01-01&#39;,\n        tooltip: {          // enables `tooltip` to be displayed as mouse hovering to this item.\n            formatter: &#39;{b} xxxx&#39;\n        },\n        symbol: &#39;diamond&#39;,  // the special setting of this item&#39;s symbol.\n        symbolSize: 16      // the special setting of this item&#39;s size.\n    },\n    &#39;2006-01-01&#39;,\n    &#39;2007-01-01&#39;,\n    &#39;2008-01-01&#39;,\n    &#39;2009-01-01&#39;,\n    &#39;2010-01-01&#39;,\n    {\n        value: &#39;2011-01-01&#39;,\n        tooltip: {          // enables `tooltip` to be displayed as mouse hovering to this item.\n            formatter: function (params) {\n                return params.name + &#39;xxxx&#39;;\n            }\n        },\n        symbol: &#39;diamond&#39;,\n        symbolSize: 18\n    },\n]\n</code></pre>\n"}}},"graphic":{"type":["*"],"description":"<p><code class=\"codespan\">graphic</code> component enables creating graphic elements in ECharts.</p>\n<p>Those graphic type are supported.</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n<p>This example shows how to make a watermark and text block:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-graphic&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n<p>This example use hidden graphic elements to implement dragging:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-draggable&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n\n\n<p><br></p>\n<hr>\n<p><strong>Graphic Component Configuration</strong></p>\n<p>A simple way to define a graphic element:</p>\n<pre><code class=\"lang-javascript\">myChart.setOption({\n    ...,\n    graphic: {\n        type: &#39;image&#39;,\n        ...\n    }\n});\n</code></pre>\n<p>Define multiple graphic elements:</p>\n<pre><code class=\"lang-javascript\">myChart.setOption({\n    ...,\n    graphic: [\n        { // A &#39;image&#39; element.\n            type: &#39;image&#39;,\n            ...\n        },\n        { // A &#39;text&#39; element, with id specified.\n            type: &#39;text&#39;,\n            id: &#39;text1&#39;,\n            ...\n        },\n        { // A &#39;group&#39; element, in which children can be defined.\n            type: &#39;group&#39;,\n            children: [\n                {\n                    type: &#39;rect&#39;,\n                    id: &#39;rect1&#39;,\n                    ...\n                },\n                {\n                    type: &#39;image&#39;,\n                    ...\n                },\n                ...\n            ]\n        }\n        ...\n    ]\n});\n\n</code></pre>\n<p>How to remove or replace existing elements by <code class=\"codespan\">setOption</code>:</p>\n<pre><code class=\"lang-javascript\">myChart.setOption({\n    ...,\n    graphic: [\n        { // Remove the element &#39;text1&#39; defined above.\n            id: &#39;text1&#39;,\n            $action: &#39;remove&#39;,\n            ...\n        },\n        { // Replace the element &#39;rect1&#39; to a new circle element.\n          // Note, although in the sample above &#39;rect1&#39; is a children of a group,\n          // it is not necessary to consider level relationship when setOption\n          // again if you use id to specify them.\n            id: &#39;rect1&#39;,\n            $action: &#39;replace&#39;,\n            type: &#39;circle&#39;,\n            ...\n        }\n    ]\n});\n</code></pre>\n<p>Notice, when using <code class=\"codespan\">setOption</code> to modify existing elements, if id is not specified, new options will be mapped to existing elements by their order, which might bring unexpected result sometimes. So, generally, using id is recommended.</p>\n<p><br></p>\n<hr>\n<p><strong>Graphic Element Configuration</strong></p>\n<p>Different types of graphic elements has their own configuration respectively, but they have these common configuration below:</p>\n<pre><code class=\"lang-javascript\">{\n    // id is used to specifying element when willing to update it.\n    // id can be ignored if you do not need it.\n    id: &#39;xxx&#39;,\n\n    // Specify element type. Can not be ignored when define a element at the first time.\n    type: &#39;image&#39;,\n\n    // All of the properties below can be ignored and a default value will be assigned.\n\n    // Specify the operation should be performed to the element when calling `setOption`.\n    // Default value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.\n    $action: &#39;replace&#39;,\n\n    // These four properties is used to locating the element. Each property can be absolute\n    // value (like 10, means 10 pixel) or precent (like &#39;12%&#39;) or &#39;center&#39;/&#39;middle&#39;.\n    left: 10,\n    // right: 10,\n    top: &#39;center&#39;,\n    // bottom: &#39;10%&#39;,\n\n    shape: {\n        // Here are configurations for shape, like `x`, `y`, `cx`, `cy`, `width`,\n        // `height`, `r`, `points`, ...\n        // Note, if `left`/`right`/`top`/`bottom` has been set, `x`/`y`/`cx`/`cy`\n        // do not work here.\n    },\n\n    style: {\n        // Here are configurations for style of the element, like `fill`, `stroke`,\n        // `lineWidth`, `shadowBlur`, ...\n    },\n\n    // z value of the elements.\n    z: 10,\n    // Whether response to mouse events / touch events.\n    silent: true,\n    // Whether the element is visible.\n    invisible: false,\n    // Used to specify whether the entire transformed element (containing children if is group)\n    // is confined in its container. Optional values: &#39;raw&#39;, &#39;all&#39;.\n    bounding: &#39;raw&#39;,\n    // Can be dragged or not.\n    draggable: false,\n    // Event handler, can also be onmousemove, ondrag, ... (listed below)\n    onclick: function () {...}\n}\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>Event Handlers of Graphic Element</strong></p>\n<p>These events are supported:\n<code class=\"codespan\">onclick</code>, <code class=\"codespan\">onmouseover</code>, <code class=\"codespan\">onmouseout</code>, <code class=\"codespan\">onmousemove</code>, <code class=\"codespan\">onmousewheel</code>, <code class=\"codespan\">onmousedown</code>, <code class=\"codespan\">onmouseup</code>, <code class=\"codespan\">ondrag</code>, <code class=\"codespan\">ondragstart</code>, <code class=\"codespan\">ondragend</code>, <code class=\"codespan\">ondragenter</code>, <code class=\"codespan\">ondragleave</code>, <code class=\"codespan\">ondragover</code>, <code class=\"codespan\">ondrop</code>.</p>\n<p><br></p>\n<hr>\n<p><strong>Hierarchy of Graphic Elements</strong></p>\n<p>Only <code class=\"codespan\">group</code> element has children, which enable a group of elements to be positioned and transformed together.</p>\n<p><br></p>\n<hr>\n<p><strong>Shape Configuration of Graphic Element</strong></p>\n<p>Elements with different types have different shape setting repectively. For example:</p>\n<pre><code class=\"lang-javascript\">{\n    type: &#39;rect&#39;,\n    shape: {\n        x: 10,\n        y: 10,\n        width: 100,\n        height: 200\n    }\n},\n{\n    type: &#39;circle&#39;,\n    shape: {\n        cx: 20,\n        cy: 30,\n        r: 100\n    }\n},\n{\n    type: &#39;image&#39;,\n    style: {\n        image: &#39;http://xxx.xxx.xxx/a.png&#39;,\n        x: 100,\n        y: 200,\n        width: 230,\n        height: 400\n    }\n},\n{\n    type: &#39;text&#39;,\n    style: {\n        text: &#39;This text&#39;,\n        x: 100,\n        y: 200\n    }\n\n}\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>Transforming and Absolutely Positioning of Graphic Element</strong></p>\n<p>Element can be transformed (translation, rotation, scale). See <a href=\"#graphic.elements.position\">position</a>, <a href=\"#graphic.elements.rotation\">rotation</a>, <a href=\"#graphic.elements.scale\">scale</a>, <a href=\"#graphic.elements.origin\">origin</a></p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    type: &#39;rect&#39;, // or any other types.\n\n    // Translation, using [0, 0] by default.\n    position: [100, 200],\n\n    // Scale, using [1, 1] by default.\n    scale: [2, 4],\n\n    // Rotation, using 0 by default. Negative value means rotating clockwise.\n    rotation: Math.PI / 4,\n\n    // Origin point of rotation and scale, using [0, 0] by default.\n    origin: [10, 20],\n\n    shape: {\n        // ...\n    }\n}\n</code></pre>\n<ul>\n<li><p>Each element is transformed in the coordinate system of its parent, namely, transform of a element and its parent can be &quot;stacked&quot;.</p>\n</li>\n<li><p>Transformation is performed by this order:</p>\n<ol>\n<li>Translate [-el.origin[0], -el.origin[1]].</li>\n<li>Scale according to el.scale.</li>\n<li>Rotate according to el.rotation.</li>\n<li>Translate back according to el.origin.</li>\n<li>Translate according to el.position.</li>\n</ol>\n</li>\n<li>Namely, scaling and rotating firstly, and then translate. By this mechanism, translation does not affect origin of scale and rotation.</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>Relatively Positioning</strong></p>\n<p>In real application, size of a container is always not fixed. So mechanism of relative position is required. In <code class=\"codespan\">graphic</code> component, <a href=\"#graphic.elements.left\">left</a> / <a href=\"#graphic.elements.right\">right</a> / <a href=\"#graphic.elements.top\">top</a> / <a href=\"#graphic.elements.bottom\">bottom</a> / <a href=\"#graphic.elements.width\">width</a> / <a href=\"#graphic.elements.height\">height</a> are used to position element relatively.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{ // Position the image at the bottom center of its container.\n    type: &#39;image&#39;,\n    left: &#39;center&#39;, // Position at the center horizontally.\n    bottom: &#39;10%&#39;,  // Position beyond the bottom boundary 10%.\n    style: {\n        image: &#39;http://xxx.xxx.xxx/a.png&#39;,\n        width: 45,\n        height: 45\n    }\n},\n{ // Position the entire rotated group at the right-bottom corner of its container.\n    type: &#39;group&#39;,\n    right: 0,  // Position at the right boundary.\n    bottom: 0, // Position at the bottom boundary.\n    rotation: Math.PI / 4,\n    children: [\n        {\n            type: &#39;rect&#39;,\n            left: &#39;center&#39;, // Position at horizontal center according to its parent.\n            top: &#39;middle&#39;,  // Position at vertical center according to its parent.\n            shape: {\n                width: 190,\n                height: 90\n            },\n            style: {\n                fill: &#39;#fff&#39;,\n                stroke: &#39;#999&#39;,\n                lineWidth: 2,\n                shadowBlur: 8,\n                shadowOffsetX: 3,\n                shadowOffsetY: 3,\n                shadowColor: &#39;rgba(0,0,0,0.3)&#39;\n            }\n        },\n        {\n            type: &#39;text&#39;,\n            left: &#39;center&#39;, // Position at horizontal center according to its parent.\n            top: &#39;middle&#39;,  // Position at vertical center according to its parent.\n            style: {\n                fill: &#39;#777&#39;,\n                text: [\n                    &#39;This is text&#39;,\n                    &#39;This is text&#39;,\n                    &#39;Print some text&#39;\n                ].join(&#39;\\n&#39;),\n                font: &#39;14px Microsoft YaHei&#39;\n            }\n        }\n    ]\n}\n</code></pre>\n<p>Note, <a href=\"graphic.elements.bounding\" target=\"_blank\">bounding</a> can be used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"elements":{"type":"Array","items":{"anyOf":[{"type":["Object"],"description":"<p><code class=\"codespan\">group</code> is the only type that can contain children, so that a group of elements can be positioned and transformed together.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n","default":"group"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"$action":{"type":["string"],"description":"<p>Specify the operation should be performed to the element when calling <code class=\"codespan\">setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class=\"codespan\">&#39;replace&#39;</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code class=\"codespan\">&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n","default":"'merge'"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"left":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"right":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"top":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bounding":{"type":["strin"],"description":"<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;all&#39;</code>: (default)\n  Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;raw&#39;</code>:\n  Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n","default":"'all'"},"z":{"type":["number"],"description":"<p>z value of the elements, determine the overlap order.</p>\n","default":0},"zlevel":{"type":["number"],"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n","default":0},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n","default":"'pointer'"},"draggable":{"type":["boolean"],"description":"<p>Can be dragged or not.</p>\n","default":false},"progressive":{"type":["boolean"],"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n","default":false},"width":{"type":["number"],"description":"<p>Specify width of this <code class=\"codespan\">group</code>.</p>\n<p>This width is only used for the positioning of its children.</p>\n<p>When width is <code class=\"codespan\">0</code>, children can also be positioned according to its parent using <code class=\"codespan\">left: &#39;center&#39;</code>.</p>\n","default":0},"height":{"type":["number"],"description":"<p>Specify height of this <code class=\"codespan\">group</code>.</p>\n<p>This height is only used for the positioning of its children.</p>\n<p>When height is <code class=\"codespan\">0</code>, children can also be positioned according to its parent using <code class=\"codespan\">top: &#39;middle&#39;</code>.</p>\n","default":0},"diffChildrenByName":{"type":["boolean"],"description":"<p>In <a href=\"#series-custom\">custom series</a>, when <code class=\"codespan\">diffChildrenByName</code> is set as <code class=\"codespan\">true</code>, for each <a href=\"#graphic.elements-group\">group</a> returned from <a href=\"#series-custom.renderItem\">renderItem</a>, &quot;diff&quot; will be performed to its <a href=\"#graphic.elements-group.children\">children</a> according to the <a href=\"#graphic.elements-polygon.name\">name</a> attribute of each graphic elements. Here &quot;diff&quot; means that map the coming graphic elements to the existing graphic elements when repainting according to <code class=\"codespan\">name</code>, which enables the transition animation if data is modified.</p>\n<p>But notice that the operation is performance consuming, do not use it for large data amount.</p>\n","default":false},"children":{"type":["Array"],"description":"<p>A list of children, each item is a declaration of an element.</p>\n"},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n","default":"image"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"$action":{"type":["string"],"description":"<p>Specify the operation should be performed to the element when calling <code class=\"codespan\">setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class=\"codespan\">&#39;replace&#39;</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code class=\"codespan\">&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n","default":"'merge'"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"left":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"right":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"top":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bounding":{"type":["strin"],"description":"<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;all&#39;</code>: (default)\n  Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;raw&#39;</code>:\n  Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n","default":"'all'"},"z":{"type":["number"],"description":"<p>z value of the elements, determine the overlap order.</p>\n","default":0},"zlevel":{"type":["number"],"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n","default":0},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n","default":"'pointer'"},"draggable":{"type":["boolean"],"description":"<p>Can be dragged or not.</p>\n","default":false},"progressive":{"type":["boolean"],"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n","default":false},"style":{"type":["Object"],"description":"","properties":{"image":{"type":["string"],"description":"<p>Specify contant of the image, can be a URL, or <a href=\"https://tools.ietf.org/html/rfc2397\" target=\"_blank\">dataURI</a>.</p>\n"},"x":{"type":["number"],"description":"<p>The x value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"y":{"type":["numbr"],"description":"<p>The y value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"width":{"type":["number"],"description":"<p>The width of the shape of the element.</p>\n","default":0},"height":{"type":["numbr"],"description":"<p>The height of the shape of the element.</p>\n<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","default":0},"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"<p>Text block.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n","default":"text"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"$action":{"type":["string"],"description":"<p>Specify the operation should be performed to the element when calling <code class=\"codespan\">setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class=\"codespan\">&#39;replace&#39;</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code class=\"codespan\">&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n","default":"'merge'"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"left":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"right":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"top":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bounding":{"type":["strin"],"description":"<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;all&#39;</code>: (default)\n  Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;raw&#39;</code>:\n  Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n","default":"'all'"},"z":{"type":["number"],"description":"<p>z value of the elements, determine the overlap order.</p>\n","default":0},"zlevel":{"type":["number"],"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n","default":0},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n","default":"'pointer'"},"draggable":{"type":["boolean"],"description":"<p>Can be dragged or not.</p>\n","default":false},"progressive":{"type":["boolean"],"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n","default":false},"style":{"type":["Object"],"description":"","properties":{"text":{"type":["string"],"description":"<p>Text content. <code class=\"codespan\">\\n</code> can be used as a line break.</p>\n","default":"''"},"x":{"type":["number"],"description":"<p>The x value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"y":{"type":["numbr"],"description":"<p>The y value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"font":{"type":["string"],"description":"<p>Font size, font type, font weight, font color, follow the form of <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font\" target=\"_blank\">css font</a>.</p>\n<p>For example:</p>\n<pre><code>// size | family\nfont: &#39;2em &quot;STHeiti&quot;, sans-serif&#39;\n\n// style | weight | size | family\nfont: &#39;italic bolder 16px cursive&#39;\n\n// weight | size | family\nfont: &#39;bolder 2em &quot;Microsoft YaHei&quot;, sans-serif&#39;\n</code></pre>"},"textAlign":{"type":["string"],"description":"<p>Text horizontal alignment. Optional values: <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;left&#39;</code> means the left side of the text block is specified by the <a href=\"#graphic.elements-text.style.x\">style.x</a>, while <code class=\"codespan\">&#39;right&#39;</code> means the right side of the text block is specified by <a href=\"#graphic.elements-text.style.y\">style.y</a>.</p>\n","default":"'left'"},"textVerticalAlign":{"type":["string"],"description":"<p>Text vertical alignment. Optional values: <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n"},"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"<p>Rectangle element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n","default":"rect"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"$action":{"type":["string"],"description":"<p>Specify the operation should be performed to the element when calling <code class=\"codespan\">setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class=\"codespan\">&#39;replace&#39;</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code class=\"codespan\">&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n","default":"'merge'"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"left":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"right":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"top":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bounding":{"type":["strin"],"description":"<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;all&#39;</code>: (default)\n  Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;raw&#39;</code>:\n  Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n","default":"'all'"},"z":{"type":["number"],"description":"<p>z value of the elements, determine the overlap order.</p>\n","default":0},"zlevel":{"type":["number"],"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n","default":0},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n","default":"'pointer'"},"draggable":{"type":["boolean"],"description":"<p>Can be dragged or not.</p>\n","default":false},"progressive":{"type":["boolean"],"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"x":{"type":["number"],"description":"<p>The x value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"y":{"type":["numbr"],"description":"<p>The y value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"width":{"type":["number"],"description":"<p>The width of the shape of the element.</p>\n","default":0},"height":{"type":["numbr"],"description":"<p>The height of the shape of the element.</p>\n","default":0},"r":{"type":["Array"],"description":"<p>Specify border radius of the rectangular here. Generally, <code class=\"codespan\">r</code> should be <code class=\"codespan\">[topLeftRadius, topRightRadius, BottomRightRadius, bottomLeftRadius]</code>, where each item is a number.</p>\n<p>Abbreviation is enabled, for example:</p>\n<ul>\n<li><code class=\"codespan\">r</code>: <code class=\"codespan\">1</code>         means <code class=\"codespan\">[1, 1, 1, 1]</code></li>\n<li><code class=\"codespan\">r</code>: <code class=\"codespan\">[1]</code>       means <code class=\"codespan\">[1, 1, 1, 1]</code></li>\n<li><code class=\"codespan\">r</code>: <code class=\"codespan\">[1, 2]</code>    means <code class=\"codespan\">[1, 2, 1, 2]</code></li>\n<li><code class=\"codespan\">r</code>: <code class=\"codespan\">[1, 2, 3]</code> means <code class=\"codespan\">[1, 2, 3, 2]</code></li>\n</ul>\n"}}},"style":{"type":["Object"],"description":"<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"<p>Circle element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n","default":"circle"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"$action":{"type":["string"],"description":"<p>Specify the operation should be performed to the element when calling <code class=\"codespan\">setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class=\"codespan\">&#39;replace&#39;</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code class=\"codespan\">&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n","default":"'merge'"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"left":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"right":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"top":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bounding":{"type":["strin"],"description":"<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;all&#39;</code>: (default)\n  Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;raw&#39;</code>:\n  Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n","default":"'all'"},"z":{"type":["number"],"description":"<p>z value of the elements, determine the overlap order.</p>\n","default":0},"zlevel":{"type":["number"],"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n","default":0},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n","default":"'pointer'"},"draggable":{"type":["boolean"],"description":"<p>Can be dragged or not.</p>\n","default":false},"progressive":{"type":["boolean"],"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"cx":{"type":["number"],"description":"<p>The x value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"cy":{"type":["numbr"],"description":"<p>The y value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"r":{"type":["number"],"description":"<p>Outside radius.</p>\n","default":0}}},"style":{"type":["Object"],"description":"<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"<p>Ring element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n","default":"ring"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"$action":{"type":["string"],"description":"<p>Specify the operation should be performed to the element when calling <code class=\"codespan\">setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class=\"codespan\">&#39;replace&#39;</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code class=\"codespan\">&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n","default":"'merge'"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"left":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"right":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"top":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bounding":{"type":["strin"],"description":"<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;all&#39;</code>: (default)\n  Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;raw&#39;</code>:\n  Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n","default":"'all'"},"z":{"type":["number"],"description":"<p>z value of the elements, determine the overlap order.</p>\n","default":0},"zlevel":{"type":["number"],"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n","default":0},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n","default":"'pointer'"},"draggable":{"type":["boolean"],"description":"<p>Can be dragged or not.</p>\n","default":false},"progressive":{"type":["boolean"],"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"cx":{"type":["number"],"description":"<p>The x value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"cy":{"type":["numbr"],"description":"<p>The y value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"r":{"type":["number"],"description":"<p>Outside radius.</p>\n","default":0},"r0":{"type":["number"],"description":"<p>Inside radius.</p>\n","default":0}}},"style":{"type":["Object"],"description":"<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"<p>Sector element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n","default":"sector"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"$action":{"type":["string"],"description":"<p>Specify the operation should be performed to the element when calling <code class=\"codespan\">setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class=\"codespan\">&#39;replace&#39;</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code class=\"codespan\">&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n","default":"'merge'"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"left":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"right":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"top":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bounding":{"type":["strin"],"description":"<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;all&#39;</code>: (default)\n  Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;raw&#39;</code>:\n  Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n","default":"'all'"},"z":{"type":["number"],"description":"<p>z value of the elements, determine the overlap order.</p>\n","default":0},"zlevel":{"type":["number"],"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n","default":0},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n","default":"'pointer'"},"draggable":{"type":["boolean"],"description":"<p>Can be dragged or not.</p>\n","default":false},"progressive":{"type":["boolean"],"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"cx":{"type":["number"],"description":"<p>The x value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"cy":{"type":["numbr"],"description":"<p>The y value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"r":{"type":["number"],"description":"<p>Outside radius.</p>\n","default":0},"r0":{"type":["number"],"description":"<p>Inside radius.</p>\n","default":0},"startAngle":{"type":["number"],"description":"<p>start angle, in radian.</p>\n","default":0},"endAngle":{"type":["number"],"description":"<p>end anble, in radian.</p>\n","default":"Math.PI * 2"},"clockwise":{"type":["boolean"],"description":"<p>Whether draw clockwise.</p>\n","default":true}}},"style":{"type":["Object"],"description":"<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"<p>Arc element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n","default":"arc"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"$action":{"type":["string"],"description":"<p>Specify the operation should be performed to the element when calling <code class=\"codespan\">setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class=\"codespan\">&#39;replace&#39;</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code class=\"codespan\">&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n","default":"'merge'"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"left":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"right":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"top":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bounding":{"type":["strin"],"description":"<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;all&#39;</code>: (default)\n  Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;raw&#39;</code>:\n  Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n","default":"'all'"},"z":{"type":["number"],"description":"<p>z value of the elements, determine the overlap order.</p>\n","default":0},"zlevel":{"type":["number"],"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n","default":0},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n","default":"'pointer'"},"draggable":{"type":["boolean"],"description":"<p>Can be dragged or not.</p>\n","default":false},"progressive":{"type":["boolean"],"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"cx":{"type":["number"],"description":"<p>The x value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"cy":{"type":["numbr"],"description":"<p>The y value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"r":{"type":["number"],"description":"<p>Outside radius.</p>\n","default":0},"r0":{"type":["number"],"description":"<p>Inside radius.</p>\n","default":0},"startAngle":{"type":["number"],"description":"<p>start angle, in radian.</p>\n","default":0},"endAngle":{"type":["number"],"description":"<p>end anble, in radian.</p>\n","default":"Math.PI * 2"},"clockwise":{"type":["boolean"],"description":"<p>Whether draw clockwise.</p>\n","default":true}}},"style":{"type":["Object"],"description":"<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":null},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":"\"#000\""},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":1},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"<p>Polygon element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n","default":"polygon"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"$action":{"type":["string"],"description":"<p>Specify the operation should be performed to the element when calling <code class=\"codespan\">setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class=\"codespan\">&#39;replace&#39;</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code class=\"codespan\">&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n","default":"'merge'"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"left":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"right":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"top":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bounding":{"type":["strin"],"description":"<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;all&#39;</code>: (default)\n  Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;raw&#39;</code>:\n  Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n","default":"'all'"},"z":{"type":["number"],"description":"<p>z value of the elements, determine the overlap order.</p>\n","default":0},"zlevel":{"type":["number"],"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n","default":0},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n","default":"'pointer'"},"draggable":{"type":["boolean"],"description":"<p>Can be dragged or not.</p>\n","default":false},"progressive":{"type":["boolean"],"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"points":{"type":["Array"],"description":"<p>A list of points, which defines the shape, like <code class=\"codespan\">[[22, 44], [44, 55], [11, 44], ...]</code>.</p>\n"},"smooth":{"type":["number","string"],"description":"<p>Whether smooth the line.</p>\n<ul>\n<li>If the value is number, bezier interpolation is used, and the value specified the level of smooth, which is in the range of <code class=\"codespan\">[0, 1]</code>.</li>\n<li>If the value is <code class=\"codespan\">&#39;spline&#39;</code>, Catmull-Rom spline interpolation is used.</li>\n</ul>\n","default":"undefined"},"smoothConstraint":{"type":["boolean"],"description":"<p>Whether prevent the smooth process cause the line out of the bounding box.</p>\n<p>Only works when <code class=\"codespan\">smooth</code> is <code class=\"codespan\">number</code> (bezier smooth).</p>\n","default":false}}},"style":{"type":["Object"],"description":"<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"<p>Polyline element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n","default":"polyline"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"$action":{"type":["string"],"description":"<p>Specify the operation should be performed to the element when calling <code class=\"codespan\">setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class=\"codespan\">&#39;replace&#39;</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code class=\"codespan\">&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n","default":"'merge'"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"left":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"right":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"top":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bounding":{"type":["strin"],"description":"<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;all&#39;</code>: (default)\n  Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;raw&#39;</code>:\n  Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n","default":"'all'"},"z":{"type":["number"],"description":"<p>z value of the elements, determine the overlap order.</p>\n","default":0},"zlevel":{"type":["number"],"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n","default":0},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n","default":"'pointer'"},"draggable":{"type":["boolean"],"description":"<p>Can be dragged or not.</p>\n","default":false},"progressive":{"type":["boolean"],"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"points":{"type":["Array"],"description":"<p>A list of points, which defines the shape, like <code class=\"codespan\">[[22, 44], [44, 55], [11, 44], ...]</code>.</p>\n"},"smooth":{"type":["number","string"],"description":"<p>Whether smooth the line.</p>\n<ul>\n<li>If the value is number, bezier interpolation is used, and the value specified the level of smooth, which is in the range of <code class=\"codespan\">[0, 1]</code>.</li>\n<li>If the value is <code class=\"codespan\">&#39;spline&#39;</code>, Catmull-Rom spline interpolation is used.</li>\n</ul>\n","default":"undefined"},"smoothConstraint":{"type":["boolean"],"description":"<p>Whether prevent the smooth process cause the line out of the bounding box.</p>\n<p>Only works when <code class=\"codespan\">smooth</code> is <code class=\"codespan\">number</code> (bezier smooth).</p>\n","default":false}}},"style":{"type":["Object"],"description":"<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":null},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":"\"#000\""},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":5},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"<p>Line element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n","default":"line"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"$action":{"type":["string"],"description":"<p>Specify the operation should be performed to the element when calling <code class=\"codespan\">setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class=\"codespan\">&#39;replace&#39;</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code class=\"codespan\">&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n","default":"'merge'"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"left":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"right":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"top":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bounding":{"type":["strin"],"description":"<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;all&#39;</code>: (default)\n  Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;raw&#39;</code>:\n  Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n","default":"'all'"},"z":{"type":["number"],"description":"<p>z value of the elements, determine the overlap order.</p>\n","default":0},"zlevel":{"type":["number"],"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n","default":0},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n","default":"'pointer'"},"draggable":{"type":["boolean"],"description":"<p>Can be dragged or not.</p>\n","default":false},"progressive":{"type":["boolean"],"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"x1":{"type":["number"],"description":"<p>x value of the start point.</p>\n","default":0},"y1":{"type":["number"],"description":"<p>y value of the start point.</p>\n","default":0},"x2":{"type":["number"],"description":"<p>x value of the end point.</p>\n","default":0},"y2":{"type":["number"],"description":"<p>y value of the end point.</p>\n","default":0},"percent":{"type":["number"],"description":"<p>Specify the percentage of drawing, useful in animation.</p>\n<p>Value range: [0, 1].</p>\n","default":1}}},"style":{"type":["Object"],"description":"<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":null},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":"\"#000\""},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":5},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"<p>Quadratic bezier curve or cubic bezier curve.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n","default":"bezierCurve"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"$action":{"type":["string"],"description":"<p>Specify the operation should be performed to the element when calling <code class=\"codespan\">setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class=\"codespan\">&#39;replace&#39;</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code class=\"codespan\">&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n","default":"'merge'"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"left":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"right":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"top":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bounding":{"type":["strin"],"description":"<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;all&#39;</code>: (default)\n  Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;raw&#39;</code>:\n  Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n","default":"'all'"},"z":{"type":["number"],"description":"<p>z value of the elements, determine the overlap order.</p>\n","default":0},"zlevel":{"type":["number"],"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n","default":0},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n","default":"'pointer'"},"draggable":{"type":["boolean"],"description":"<p>Can be dragged or not.</p>\n","default":false},"progressive":{"type":["boolean"],"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"x1":{"type":["number"],"description":"<p>x value of the start point.</p>\n","default":0},"y1":{"type":["number"],"description":"<p>y value of the start point.</p>\n","default":0},"x2":{"type":["number"],"description":"<p>x value of the end point.</p>\n","default":0},"y2":{"type":["number"],"description":"<p>y value of the end point.</p>\n","default":0},"cpx1":{"type":["number"],"description":"<p>x of control point.</p>\n","default":0},"cpy1":{"type":["number"],"description":"<p>y of control point.</p>\n","default":0},"cpx2":{"type":["number"],"description":"<p>x of the second control point. If specified, cubic bezier is used.</p>\n<p>If both <code class=\"codespan\">cpx2</code> and <code class=\"codespan\">cpy2</code> are not set, quatratic bezier is used.</p>\n","default":null},"cpy2":{"type":["number"],"description":"<p>y of the second control point. If specified, cubic bezier is used.</p>\n<p>If both <code class=\"codespan\">cpx2</code> and <code class=\"codespan\">cpy2</code> are not set, quatratic bezier is used.</p>\n","default":null},"percent":{"type":["number"],"description":"<p>Specify the percentage of drawing, useful in animation.</p>\n<p>Value range: [0, 1].</p>\n","default":1}}},"style":{"type":["Object"],"description":"<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}}]},"description":"<p>A list of all graphic elements.</p>\n<p>Note, the standard configuration of graphic component is:</p>\n<pre><code class=\"lang-javascript\">{\n    graphic: {\n        elements: [\n            {type: &#39;rect&#39;, ...}, {type: &#39;circle&#39;, ...}, ...\n        ]\n    }\n}\n</code></pre>\n<p>But we always use short patterns for convenience:</p>\n<pre><code class=\"lang-javascript\">{\n    graphic: { // Declare only one graphic element.\n        type: &#39;rect&#39;,\n        ...\n    }\n}\n</code></pre>\n<p>Or:</p>\n<pre><code class=\"lang-javascript\">{\n    graphic: [ // Declare multiple graphic elements.\n        {type: &#39;rect&#39;, ...}, {type: &#39;circle&#39;, ...}, ...\n    ]\n}\n</code></pre>\n"}}},"calendar":{"type":["Object"],"description":"<p>Calendar coordinates.</p>\n<p>In ECharts, we are very creative to achieve the calendar chart, by using the calendar coordinates to achieve the calendar chart,\nas shown in the following example, we can use calendar coordinates in heatmap, scatter, effectScatter, and graph.</p>\n<p>Example of using heatmap in calendar coordinates:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-heatmap&edit=1&reset=1\" width=\"800\" height=\"400\"><iframe />\n\n\n<p>Example of using effectScatter in calendar coordinates:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-effectscatter&edit=1&reset=1\" width=\"800\" height=\"600\"><iframe />\n\n\n<p>Example of using graph in calendar coordinates:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-graph&edit=1&reset=1\" width=\"600\" height=\"600\"><iframe />\n\n\n<p>By combining calendar coordinate system and charts, you may be able to create more wonderful effects.</p>\n<p><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=calendar-lunar&amp;edit=1&amp;reset=1\" target=\"_blank\">Display Text in Calendar</a>,\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=calendar-pie&amp;edit=1&amp;reset=1\" target=\"_blank\">Display Pies in Calendar</a></p>\n<hr>\n<p><strong>Calendar layout</strong></p>\n<p>Calendar coordinate system can be placed horizontally or vertically. By convention, the heatmap calendar is horizontal. But if we need bigger cell size in other cases, the total width may be too wide. So <a href=\"#calendar.orient\">calendar.orient</a> can help in this case.</p>\n<hr>\n<p><strong>Adapt to container size</strong></p>\n<p>Calendar coordinate system can be configured to adapt to container size, which is useful when page size is not sure. First of all, like other components, those location and size configurations can be specified on canlendar: <a href=\"#calendar.left\">left</a> <a href=\"#calendar.right\">right</a> <a href=\"#calendar.top\">top</a> <a href=\"bottom\" target=\"_blank\">bottom</a> <a href=\"#calendar.width\">width</a> <a href=\"#calendar.height\">height</a>, which make calendar possible to modify its size according to container size. Besides, <a href=\"#calendar.cellSize\">cellSize</a> can be specified to fix the size of each cell of calendar.</p>\n<hr>\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between calendar component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":80},"top":{"type":["string","number"],"description":"<p>Distance between calendar component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":60},"right":{"type":["string","number"],"description":"<p>Distance between calendar component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"<p>Distance between calendar component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"width":{"type":["number","string"],"description":"<p>The height of calendar coordinates.</p>\n<p>Note: <code class=\"codespan\">cellSize</code> is 20 by default. If <code class=\"codespan\">width</code> is set,\n  <code class=\"codespan\">cellSize[0]</code> will be forced to <code class=\"codespan\">auto</code>;</p>\n","default":"auto"},"height":{"type":["number","string"],"description":"<p>The height of calendar coordinates.</p>\n<p>Note: <code class=\"codespan\">cellSize</code> is 20 by default. If <code class=\"codespan\">height</code> is set,\n  <code class=\"codespan\">cellSize[1]</code> will be forced to <code class=\"codespan\">auto</code>;</p>\n","default":"auto"},"range":{"type":["number","string","Array"],"description":"<p>Required, range of Calendar coordinates, support multiple formats.</p>\n<p>Examples:</p>\n<pre><code class=\"lang-js\">\n// one year\nrange: 2017\n\n// one month\nrange: &#39;2017-02&#39;\n\n//  a range\nrange: [&#39;2017-01-02&#39;, &#39;2017-02-23&#39;]\n\n// note: they will be identified as [&#39;2017-01-01&#39;, &#39;2017-02-01&#39;]\nrange: [&#39;2017-01&#39;, &#39;2017-02&#39;]\n\n</code></pre>\n"},"cellSize":{"type":["number","Array"],"description":"<p>The size of each rect of calendar coordinates, can be set to a single value or array, the first element is width and the second element is height.</p>\n<p>Support setting self-adaptation: <code class=\"codespan\">auto</code>, the default width and height to be 20.</p>\n<p>Examples:</p>\n<pre><code class=\"lang-js\">\n// Set the width and height to be 20\ncellSize: 20\n\n// Set the width to be 20, and height to be 40\ncellSize: [20, 40]\n\n// Set width and height to be self-adaptation\ncellSize: [40]\n\n// Set the width and height to be 20\ncellSize: &#39;auto&#39;\n\n// Set the width to be self-adaptation, and height to be 40\ncellSize: [&#39;auto&#39;, 40]\n\n</code></pre>\n","default":20},"orient":{"type":["string"],"description":"<p>The layout orientation of calendar.</p>\n<p>Options:</p>\n<ul>\n<li>&#39;horizontal&#39;</li>\n<li>&#39;vertical&#39;</li>\n</ul>\n","default":"'horizontal'"},"splitLine":{"type":["Object"],"description":"<p>Calendar coordinates splitLine style.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the splitLine from showing</p>\n","default":true},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>splitLineLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#000"},"width":{"type":["number"],"description":"<p>splitLine line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>splitLine line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n<p>Examples:</p>\n<pre><code class=\"lang-js\">calendar: [{\n    splitLine: {\n        show: true,\n        lineStyle: {\n            color: &#39;#000&#39;,\n            width: 1,\n            type: &#39;solid&#39;\n        }\n    }\n}]\n</code></pre>\n"}}}}},"itemStyle":{"type":["Object"],"description":"<p>Every rect style in calendar coordinates.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>calendar color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#fff"},"borderColor":{"type":["Color"],"description":"<p>calendar border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"'#ccc'"},"borderWidth":{"type":["number"],"description":"<p>calendar border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n<p>Examples:</p>\n<pre><code class=\"lang-js\">calendar: [{\n    itemStyle: {\n        color: &#39;#fff&#39;,\n        borderWidth: 1,\n        borderColor: &#39;#ccc&#39;\n    }\n}]\n</code></pre>\n"}}},"dayLabel":{"type":["Object"],"description":"<p>Day style in calendar coordinates.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent dayLabel from showing.</p>\n","default":true},"firstDay":{"type":["number"],"description":"<p>A week from the beginning of the week, the default starting on Sunday.</p>\n<p>Examples:</p>\n<pre><code class=\"lang-js\">\ncalendar: [{\n    dayLabel: {\n        firstDay: 1 // start on Monday\n    }\n}]\n\n</code></pre>\n","default":0},"margin":{"type":["number"],"description":"<p>The margin between the day label and the axis line.</p>\n","default":0},"position":{"type":["string"],"description":"<p>Position of week, at the beginning or end of the range.</p>\n<p>Options:</p>\n<ul>\n<li>&#39;start&#39;</li>\n<li>&#39;end&#39;</li>\n</ul>\n","default":"'start'"},"nameMap":{"type":["string","Array"],"description":"<p>Week text content, defaults to &#39;en&#39;;\nIt supports Chinese, English, and custom;\nindex 0 always means Sunday;</p>\n<p>Examples:</p>\n<pre><code class=\"lang-js\">\n// shortcut to English  [&#39;S&#39;, &#39;M&#39;, &#39;T&#39;, &#39;W&#39;, &#39;T&#39;, &#39;F&#39;, &#39;S&#39;],\nnameMap: &#39;en&#39;\n\n// shortcut to Chinese [&#39;日&#39;, &#39;一&#39;, &#39;二&#39;, &#39;三&#39;, &#39;四&#39;, &#39;五&#39;, &#39;六&#39;]\nnameMap: &#39;cn&#39;\n\n// Custom settings: mixed in English and Chinese or not displayed\nnameMap: [&#39;S&#39;, &#39;一&#39;, &#39;T&#39;, &#39;三&#39;, &#39;&#39;, &#39;五&#39;, &#39;S&#39;],\n\ncalendar: [{\n    dayLabel: {\n        nameMap: &#39;en&#39;\n    }\n}]\n</code></pre>\n","default":"'en'"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"#000"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"monthLabel":{"type":["Object"],"description":"<p>Month label in calendar coordinates.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent monthLabel from showing.</p>\n","default":true},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"margin":{"type":["number"],"description":"<p>The margin between the month label and the axis line.</p>\n","default":5},"position":{"type":["string"],"description":"<p>Position of week, at the beginning or end of the range.</p>\n<p>Options:</p>\n<ul>\n<li>&#39;start&#39;</li>\n<li>&#39;end&#39;</li>\n</ul>\n","default":"'start'"},"nameMap":{"type":["string","Array"],"description":"<p>Month text content, defaults to &#39;en&#39;;\nIt supports Chinese, English, and custom;\nIndex 0 always means Jan;</p>\n<p>Examples:</p>\n<pre><code class=\"lang-js\">// Shortcut to English [\n                &#39;Jan&#39;, &#39;Feb&#39;, &#39;Mar&#39;,\n                &#39;Apr&#39;, &#39;May&#39;, &#39;Jun&#39;,\n                &#39;Jul&#39;, &#39;Aug&#39;, &#39;Sep&#39;,\n                &#39;Oct&#39;, &#39;Nov&#39;, &#39;Dec&#39;\n            ],\nnameMap: &#39;en&#39;\n\n// Shortcut to Chinese [\n                &#39;一月&#39;, &#39;二月&#39;, &#39;三月&#39;,\n                &#39;四月&#39;, &#39;五月&#39;, &#39;六月&#39;,\n                &#39;七月&#39;, &#39;八月&#39;, &#39;九月&#39;,\n                &#39;十月&#39;, &#39;十一月&#39;, &#39;十二月&#39;\n            ]\nnameMap: &#39;cn&#39;\n\n// Custom settings: mixed in English and Chinese or not displayed\nnameMap: [\n            &#39;一月&#39;, &#39;Feb&#39;, &#39;三月&#39;,\n            &#39;四月&#39;, &#39;May&#39;, &#39;六月&#39;,\n            &#39;七月&#39;, &#39;八月&#39;, &#39;&#39;,\n            &#39;十月&#39;, &#39;Nov&#39;, &#39;十二月&#39;\n        ],\n\n\ncalendar: [{\n    monthLabel: {\n        nameMap: &#39;en&#39;\n    }\n}]\n</code></pre>\n","default":"'en'"},"formatter":{"type":["string","Function"],"description":"<p>Formatter of month text label, which supports string template and callback function.</p>\n<p>Examples:</p>\n<pre><code class=\"lang-js\">// Use string template; eg: 2017-02\n/*\n    template variables:\n    {nameMap} default nameMap eg:&#39;Feb&#39;\n    {yyyy}   four-digit years eg: 2017\n    {yy}   two-digit years eg: 17\n    {MM}   two-digit month eg: 02\n    {M}   single-digit month eg: 2\n*/\nformatter: &#39;{yyyy}-{MM}&#39;\n\n// Use callback function;\n/*\n    function parameters:\n    param.nameMap default nameMap eg:&#39;Feb&#39;\n    param.yyyy   four-digit years eg: 2017\n    param.yy   two-digit years eg: 17\n    param.MM   two-digit month eg: 02\n    param.M   single-digit eg: 2\n*/\nformatter: function (param) {\n    // ...\n    return param.MM;\n}\n</code></pre>\n","default":null},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"#000"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"yearLabel":{"type":["Object"],"description":"<p>Year label in calendar coordinates.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to stop yearLabel from showing</p>\n","default":true},"margin":{"type":["number"],"description":"<p>The margin between the month label and the axis line.</p>\n","default":30},"position":{"type":["string"],"description":"<p>Position of year.</p>\n<p>Default:\nwhen orient is set as <code class=\"codespan\">horizontal</code>, position is <code class=\"codespan\">left</code>\nwhen orient is set as <code class=\"codespan\">vertical</code>, position is <code class=\"codespan\">top</code></p>\n<p>Options:</p>\n<ul>\n<li>&#39;top&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p>Formatter of year text label, which supports string template and callback function.</p>\n<p>By default, the current range of the year, if the interval across the year, showing the first year and the last year</p>\n<p>Examples:</p>\n<pre><code class=\"lang-js\">// Use string template; eg: [&#39;2017-10-11&#39;, &#39;2018-01-21&#39;]\n/*\n    template variables:\n    {nameMap} default nameMap eg:&#39;2017-2018&#39;\n    {start}   start year eg: 2017\n    {end}   end year eg: 2018\n*/\n\nformatter: &#39;{start}-{end}&#39;\n\n// Use callback function;\n/*\n    function parameters:\n    param.nameMap default nameMap eg:&#39;2017-2018&#39;\n    param.start   start year eg: 2017\n    param.end   end year eg: 2018\n*/\nformatter: function (param) {\n    // ...\n    return param.end;\n}\n</code></pre>\n","default":null},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false}}},"dataset":{"type":["Object"],"description":"<p><code class=\"codespan\">dataset</code> component is published since ECharts 4. <code class=\"codespan\">dataset</code> brings convenience in data management separated with styles and enables data reuse by different series. More importantly, it enables data encoding from data to visual, which brings convenience in some scenarios.</p>\n<p>More details about <code class=\"codespan\">dataset</code> can be checked in the <a href=\"tutorial.html#Dataset\" target=\"_blank\">tutorial</a>.</p>\n<hr>\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"source":{"type":["Array","Object"],"description":"<p>Source data. Generally speaking, a source data describe a table, where these format below can be applied:</p>\n<p>2d array, where <a href=\"#dataset.dimensions\">dimension names</a> can be provided in the first row/column, or do not provide, only data.</p>\n<pre><code class=\"lang-js\">[\n    [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n    [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n    [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n    [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n]\n</code></pre>\n<p>Row based key-value format (object array), where the keys indicate <a href=\"#dataset.dimensions\">dimension names</a>.</p>\n<pre><code class=\"lang-js\">[\n    {product: &#39;Matcha Latte&#39;, count: 823, score: 95.8},\n    {product: &#39;Milk Tea&#39;, count: 235, score: 81.4},\n    {product: &#39;Cheese Cocoa&#39;, count: 1042, score: 91.2},\n    {product: &#39;Walnut Brownie&#39;, count: 988, score: 76.9}\n]\n</code></pre>\n<p>Column based key-value format, where each value represents a column of a table.</p>\n<pre><code class=\"lang-js\">{\n    &#39;product&#39;: [&#39;Matcha Latte&#39;, &#39;Milk Tea&#39;, &#39;Cheese Cocoa&#39;, &#39;Walnut Brownie&#39;],\n    &#39;count&#39;: [823, 235, 1042, 988],\n    &#39;score&#39;: [95.8, 81.4, 91.2, 76.9]\n}\n</code></pre>\n<p>More details about <code class=\"codespan\">dataset</code> can be checked in the <a href=\"tutorial.html#dataset\" target=\"_blank\">tutorial</a>.</p>\n"},"dimensions":{"type":["Array"],"description":"<p><code class=\"codespan\">dimensions</code> can be used to define dimension info for <code class=\"codespan\">series.data</code> or <code class=\"codespan\">dataset.source</code>.</p>\n<p>Notice: if <a href=\"#dataset\">dataset</a> is used, we can provide dimension names in the first column/row of <a href=\"#dataset.source\">dataset.source</a>, and not need to specify <code class=\"codespan\">dimensions</code> here. But if <code class=\"codespan\">dimensions</code> is specified here, echarts will not retrieve dimension names from the first row/column of <code class=\"codespan\">dataset.source</code> any more.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\n    ]\n}\n</code></pre>\n<p>Each data item of <code class=\"codespan\">dimensions</code> can be:</p>\n<ul>\n<li><code class=\"codespan\">string</code>, for example, <code class=\"codespan\">&#39;someName&#39;</code>, which equals to <code class=\"codespan\">{name: &#39;someName&#39;}</code>.</li>\n<li><code class=\"codespan\">Object</code>, where the attributes can be:<ul>\n<li>name: <code class=\"codespan\">string</code>.</li>\n<li>type: <code class=\"codespan\">string</code>, supports:<ul>\n<li><code class=\"codespan\">number</code></li>\n<li><code class=\"codespan\">float</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array\" target=\"_blank\">Float64Array</a></li>\n<li><code class=\"codespan\">int</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array\" target=\"_blank\">Int32Array</a></li>\n<li><code class=\"codespan\">ordinal</code>, discrete value, which represents string generally.</li>\n<li><code class=\"codespan\">time</code>, time value, see <a href=\"#series.data\">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code class=\"codespan\">string</code>, generally used in tooltip for dimension display. If not specified, use <code class=\"codespan\">name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code class=\"codespan\">dimensions</code> is specified, the default <code class=\"codespan\">tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code class=\"codespan\">tooltip</code> will displayed only value horizontally.</p>\n"},"sourceHeader":{"type":["boolean"],"description":"<p>Whether the first row/column of <code class=\"codespan\">dataset.source</code> represents <a href=\"dataset.dimensions\" target=\"_blank\">dimension names</a>. Optional values:</p>\n<ul>\n<li><code class=\"codespan\">null/undefine</code>: means auto detect whether the first row/column is dimension names or data.</li>\n<li><code class=\"codespan\">true</code>: the first row/column is dimension names.</li>\n<li><code class=\"codespan\">false</code>: data start from the first row/column.</li>\n</ul>\n<p>Note: &quot;the first row/column&quot; means that if <a href=\"#series.seriesLayoutBy\">series.seriesLayoutBy</a> is set as <code class=\"codespan\">&#39;column&#39;</code>, pick the first row, otherwise, if it is set as <code class=\"codespan\">&#39;row&#39;</code>, pick the first column.</p>\n"}}},"aria":{"type":["*"],"description":"<p>W3C defined the Accessible Rich Internet Applications Suite (<a href=\"https://www.w3.org/WAI/intro/aria\" target=\"_blank\">WAI-ARIA</a>) to make Web content and Web applications more accessible to the disabled. From ECharts 4.0, we support ARIA by generating description for charts automatically.</p>\n<p>By default, ARIA is disabled. To enable it, you should set <a href=\"#aria.show\">aria.show</a> to be <code class=\"codespan\">true</code>. After enabling, it will generate descriptions based on charts, series, data, and so on. Users may change the generated description.</p>\n<p><strong>For example:</strong></p>\n<p>For config:</p>\n<pre><code class=\"lang-js\">option = {\n    aria: {\n        show: true\n    },\n    title: {\n        text: &#39;Source of user access to a site&#39;,\n        x: &#39;center&#39;\n    },\n    series: [\n        {\n             Name: &#39;access source&#39;,\n            type: &#39;pie&#39;,\n            data: [\n                { value: 335, name: &#39;direct access&#39; },\n                { value: 310, name: &#39;mail marketing&#39; },\n                { value: 234, name: &#39;union ad&#39; },\n                { value: 135, name: &#39;video ad&#39; },\n                { value: 1548, name: &#39;search engine&#39; }\n            ]\n        }\n    ]\n};\n</code></pre>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/aria-pie&edit=1&reset=1\" width=\"700\" height=\"300\"><iframe />\n\n\n<p>There should be an <code class=\"codespan\">aria-label</code> attribute on the chart DOM, which can help the disabled understand the content of charts with the help of certain devices. The value of the label is:</p>\n<pre><code>This is a chart of &quot;Source of user access to a site.&quot; The chart type is a pie chart that indicates the source of the visit. The data is - direct access data is 335, mail marketing data is 310, union ad data is 234, video ad data is 135, search engine data is 1548.\n</code></pre><p>The default language is in Chinese, but you can configure it with templates. The following document shows how to do it.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to enable ARIA. When enabled, there should be an <code class=\"codespan\">aria-label</code> label.</p>\n","default":false},"description":{"type":["string"],"description":"<p>By default, the description is generated by our algorithm based on charts. If user wants to set their own description, <code class=\"codespan\">description</code> should be set to the whole description.</p>\n<p>This is useful when single data values cannot represent what the chart means. For example, if the chart is a map containing many scatter points. Default description can only show the data, but the users may find it hard to interpret. In this case, <code class=\"codespan\">description</code> should be set to describe the meaning of chart.</p>\n","default":null},"general":{"type":["Object"],"description":"<p>General description of chart.</p>\n","properties":{"withTitle":{"type":["string"],"description":"<p>If <a href=\"#title.text\">title.text</a> exists, then this is used. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{title}</code>: will be replaced by <a href=\"#title.text\">title.text</a>.</li>\n</ul>\n","default":"'This is a chart about \"{title}\".'"},"withoutTitle":{"type":["string"],"description":"<p>If <a href=\"#title.text\">title.text</a> does not exist, then this is used.</p>\n","default":"'This is a chart'"}}},"series":{"type":["Object"],"description":"<p>Series-related configures.</p>\n","properties":{"maxCount":{"type":["number"],"description":"<p>Maximum series number.</p>\n","default":10},"single":{"type":["Object"],"description":"<p>Description used when there is only one chart.</p>\n","properties":{"prefix":{"type":["string"],"description":"<p>General description for all series. This displays before all series descriptions. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{seriesCount}</code>: will be replaced by series count, which is 1.</li>\n</ul>\n","default":"''"},"withName":{"type":["string"],"description":"<p>If chart contains <code class=\"codespan\">name</code> attribute, then this is used. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{seriesName}</code>: will be replaced by the series <code class=\"codespan\">name</code>;</li>\n<li><code class=\"codespan\">{seriesType}</code>: will be replaced by the series type name.</li>\n</ul>\n","default":"'The chart type is {seriesType}, which means {seriesName}. '"},"withoutName":{"type":["string"],"description":"<p>If chart doesn&#39;t contain <code class=\"codespan\">name</code> attribute, then this is used. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{seriesType}</code>: will be replaced by series type name.</li>\n</ul>\n","default":"'The chart type is {seriesType}.'"}}},"multiple":{"type":["Object"],"description":"<p>Description used when there are more than one chart.</p>\n","properties":{"prefix":{"type":["string"],"description":"<p>General description for all series. This displays before all series descriptions. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{seriesCount}</code>: will be replaced by series count.</li>\n</ul>\n","default":"'It consists of {seriesCount} chart series. '"},"withName":{"type":["string"],"description":"<p>If series contains <code class=\"codespan\">name</code> attribute, then this is used. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{seriesName}</code>: will be replaced by series <code class=\"codespan\">name</code>;</li>\n<li><code class=\"codespan\">{seriesType}</code>: will be replaced by series type name.</li>\n</ul>\n","default":"'The chart type is {seriesType}, which means {seriesName}. '"},"withoutName":{"type":["string"],"description":"<p>If series doesn&#39;t contain <code class=\"codespan\">name</code> attribute, then this is used. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{seriesType}</code>: will be replaced by series type name.</li>\n</ul>\n","default":"'The chart type is {seriesType}.'"},"separator":{"type":["Object"],"description":"<p>Separators between series and series.</p>\n","properties":{"middle":{"type":["string"],"description":"<p>Separators other than the last one.</p>\n","default":"';'"},"end":{"type":["string"],"description":"<p>The last series seperator.</p>\n","default":"'.'"}}}}}}},"data":{"type":["Object"],"description":"<p>Data-related configures.</p>\n","properties":{"maxCount":{"type":["number"],"description":"<p>Maximum data number.</p>\n","default":10},"allData":{"type":["string"],"description":"<p>Description used when all data is displayed. Note that this option will <strong>not</strong> set to display all data. If all data should be displayed, <a href=\"#aria.data.maxCount\">aria.data.maxCount</a> should be set to be <code class=\"codespan\">Number.MAX_VALUE</code>.</p>\n","default":"'Its data is --'"},"partialData":{"type":["string"],"description":"<p>Description used when only part of data is displayed. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{displayCnt}</code>: number of data displayed.</li>\n</ul>\n","default":"''Where the first {displayCnt} entry is -''"},"withName":{"type":["string"],"description":"<p>If data contains <code class=\"codespan\">name</code> attribute, then this is used. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{name}</code>: will be replaced by data <code class=\"codespan\">name</code>;</li>\n<li><code class=\"codespan\">{value}</code>: will be replaced by data value.</li>\n</ul>\n","default":"'{name}'s data is {value}'"},"withoutName":{"type":["string"],"description":"<p>If data doesn&#39;t contain <code class=\"codespan\">name</code> attribute, then this is used. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{value}</code>: will be replaced by data value.</li>\n</ul>\n","default":"'{value}'"},"separator":{"type":["Object"],"description":"<p>Separators between data and data.</p>\n","properties":{"middle":{"type":["string"],"description":"<p>Separators other than the last one.</p>\n","default":"','"},"end":{"type":["string"],"description":"<p>The last data separator.</p>\n<p>Note that since series <code class=\"codespan\">separator.end</code> is used after the last data, <code class=\"codespan\">data.separator.end</code> is not needed in most cases.</p>\n","default":"''"}}}}}}},"series":{"type":"Array","items":{"anyOf":[{"type":["Object"],"description":"<p><strong>broken line chart</strong></p>\n<p>Broken line chart relates all the data points <a href=\"#series-line.symbol\">symbol</a> by broken lines, which is used to show the trend of data changing. It could be used in both <a href=\"#grid\">rectangular coordinate</a> and<a href=\"#polar\">polar coordinate</a>.</p>\n<p><strong>Tip:</strong> When <a href=\"#series-line.areaStyle\">areaStyle</a> is set, area chart will be drew.</p>\n<p><strong>Tip:</strong> With <a href=\"#visualMap-piecewise\">visualMap</a> component, Broken line / area chart can have different colors on different sections, as below:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-aqi&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n","properties":{"type":{"type":["string"],"description":"","default":"'line'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;cartesian2d&#39;</code></p>\n<p>  Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-bar.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-bar.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">&#39;polar&#39;</code></p>\n<p>  Use polar coordinates, with <a href=\"#series-bar.polarIndex\">polarIndex</a> to assign the corresponding polar coordinate component.</p>\n</li>\n</ul>\n","default":"'cartesian2d'"},"xAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#xAxis\">x axis</a> to combine with, which is  useful for multiple x axes in one chart.</p>\n","default":0},"yAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#yAxis\">y axis</a> to combine with, which is  useful for multiple y axes in one chart.</p>\n","default":0},"polarIndex":{"type":["number"],"description":"<p>Index of <a href=\"#polar\">polar coordinate</a> to combine with, which is useful for multiple polar axes in one chart.</p>\n","default":0},"symbol":{"type":["string","Function"],"description":"<p>Symbol of line point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-line.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'circle'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>line point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-line.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":4},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of line point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-line.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of line point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"showSymbol":{"type":["boolean"],"description":"<p>Whether to show symbol. It would be shown during tooltip hover.</p>\n","default":true},"showAllSymbol":{"type":["boolean"],"description":"<p>Only work when main axis is <code class=\"codespan\">&#39;category&#39;</code> axis (<code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;category&#39;</code>). Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;auto&#39;</code>: Default value. Show all symbols if there is enough space. Otherwise follow the interval strategy with with <a href=\"#xAxis.axisLabel.interval\">axisLabel.interval</a>.</li>\n<li><code class=\"codespan\">true</code>: Show all symbols.</li>\n<li><code class=\"codespan\">false</code>: Follow the interval strategy with <a href=\"#xAxis.axisLabel.interval\">axisLabel.interval</a>.</li>\n</ul>\n","default":"'auto'"},"hoverAnimation":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the animation effect when the mouse is hovering over a symbol</p>\n","default":true},"legendHoverLink":{"type":["boolean"],"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n","default":true},"stack":{"type":["string"],"description":"<p>If stack the value. On the same category axis, the series with the same <code class=\"codespan\">stack</code> name would be put on top of each other.</p>\n<p>The effect of the below example could be seen through stack switching of <a href=\"#toolbox\">toolbox</a> on the top right corner:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/line-stack-tiled&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n\n","default":null},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n","default":"'pointer'"},"connectNulls":{"type":["boolean"],"description":"<p>Whether to connect the line across null points.</p>\n","default":false},"clip":{"type":["boolean"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.4.0</code></p>\n</blockquote>\n<p>If clip the overflow on the coordinate system. Clip results varies between series:</p>\n<ul>\n<li>Scatter:Ignore the symbols exceeds the coordinate system. Not clip the elements.</li>\n<li>Bar:Clip all the overflowed. With bar width kept.</li>\n<li>Line:Clip the overflowed line.</li>\n<li>Lines: Clip all the overflowed.</li>\n<li>Candlestick: Ignore the elements exceeds the coordinate system.</li>\n<li>Custom: Clip all the olverflowed.</li>\n</ul>\n<p>All these series have default value <code class=\"codespan\">true</code> except custom series. Set it to <code class=\"codespan\">false</code> if you don&#39;t want to clip.</p>\n","default":true},"step":{"type":["string","boolean"],"description":"<p>Whether to show as a step line. It can be <code class=\"codespan\">true</code>, <code class=\"codespan\">false</code>. Or <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>. Which will configure the turn point of step line.</p>\n<p>See the example using different <code class=\"codespan\">step</code> options:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-step&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n\n","default":false},"label":{"type":["Object"],"description":"<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'top'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>The style of the symbol point of broken line.</p>\n","properties":{"color":{"type":["Color","Function"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n<p>Supports callback functions, in the form of:</p>\n<pre><code class=\"lang-js\">(params: Object) =&gt; Color\n</code></pre>\n<p>Input parameters are <code class=\"codespan\">seriesIndex</code>, <code class=\"codespan\">dataIndex</code>, <code class=\"codespan\">data</code>, <code class=\"codespan\">value</code>, and etc. of data item.</p>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"lineStyle":{"type":["Object"],"description":"<p>Line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":2},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"areaStyle":{"type":["Object"],"description":"<p>The style of area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"origin":{"type":["string"],"description":"<p>Origin position of area.</p>\n<p>By default, the area between axis line and data will be the area to be filled. This config enables you to fill data to the max or min of the axis data.</p>\n<p>Valid values include: <code class=\"codespan\">&#39;auto&#39;</code> (default), <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>.</p>\n<ul>\n<li><code class=\"codespan\">&#39;auto&#39;</code> to fill between axis line to data;</li>\n<li><code class=\"codespan\">&#39;start&#39;</code> to fill between min axis value (when not <code class=\"codespan\">inverse</code>) to data;</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> to fill between max axis value (when not <code class=\"codespan\">inverse</code>) to data;</li>\n</ul>\n","default":"'auto'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"<p>Highlight style of the graphic.</p>\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"smooth":{"type":["boolean","number"],"description":"<p>Whether to show as smooth curve.</p>\n<p>If is typed in <code class=\"codespan\">boolean</code>, then it means whether to enable smoothing. If is typed in <code class=\"codespan\">number</code>, valued from 0 to 1, then it means smoothness. A smaller value makes it less smooth.</p>\n<p>Please refer to <a href=\"#series-line.smoothMonotone\">smoothMonotone</a> to change smoothing algorithm.</p>\n","default":false},"smoothMonotone":{"type":["string"],"description":"<p>Whether the broken line keep the monotonicity when it is smoothed. It can be set as <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code> to keep the monotonicity on x axis or y axis.</p>\n<p>It is usually used on dual value axis.</p>\n<p>Here are 2 examples of broken line chart with dual value axis, showing the differences when <code class=\"codespan\">smoothMonotone</code> is without any setting, and <code class=\"codespan\">smoothMonotone</code> is set as <code class=\"codespan\">&#39;x&#39;</code>.</p>\n<ul>\n<li>No setting about <code class=\"codespan\">smoothMonotone</code>:</li>\n</ul>\n<p><img width=\"300\" height=\"auto\" src=\"documents/asset/img/smooth-monotone-none.png\"></p>\n<ul>\n<li>It is set as <code class=\"codespan\">&#39;x&#39;</code>:</li>\n</ul>\n<p><img width=\"300\" height=\"auto\" src=\"documents/asset/img/smooth-monotone-x.png\"></p>\n"},"sampling":{"type":["string"],"description":"<p>The dowmsampling strategy used when the data size is much larger than pixel size. It will improve the performance when turned on. Defaults to be turned off, indicating that all the data points will be drawn.</p>\n<p>Options:</p>\n<ul>\n<li><code class=\"codespan\">&#39;average&#39;</code> Use average value of filter points</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> Use maximum value of filter points</li>\n<li><code class=\"codespan\">&#39;min&#39;</code> Use minimum value of filter points</li>\n<li><code class=\"codespan\">&#39;sum&#39;</code> Use sum of filter points</li>\n</ul>\n"},"dimensions":{"type":["Array"],"description":"<p><code class=\"codespan\">dimensions</code> can be used to define dimension info for <code class=\"codespan\">series.data</code> or <code class=\"codespan\">dataset.source</code>.</p>\n<p>Notice: if <a href=\"#dataset\">dataset</a> is used, we can provide dimension names in the first column/row of <a href=\"#dataset.source\">dataset.source</a>, and not need to specify <code class=\"codespan\">dimensions</code> here. But if <code class=\"codespan\">dimensions</code> is specified here, echarts will not retrieve dimension names from the first row/column of <code class=\"codespan\">dataset.source</code> any more.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\n    ]\n}\n</code></pre>\n<p>Each data item of <code class=\"codespan\">dimensions</code> can be:</p>\n<ul>\n<li><code class=\"codespan\">string</code>, for example, <code class=\"codespan\">&#39;someName&#39;</code>, which equals to <code class=\"codespan\">{name: &#39;someName&#39;}</code>.</li>\n<li><code class=\"codespan\">Object</code>, where the attributes can be:<ul>\n<li>name: <code class=\"codespan\">string</code>.</li>\n<li>type: <code class=\"codespan\">string</code>, supports:<ul>\n<li><code class=\"codespan\">number</code></li>\n<li><code class=\"codespan\">float</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array\" target=\"_blank\">Float64Array</a></li>\n<li><code class=\"codespan\">int</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array\" target=\"_blank\">Int32Array</a></li>\n<li><code class=\"codespan\">ordinal</code>, discrete value, which represents string generally.</li>\n<li><code class=\"codespan\">time</code>, time value, see <a href=\"#series.data\">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code class=\"codespan\">string</code>, generally used in tooltip for dimension display. If not specified, use <code class=\"codespan\">name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code class=\"codespan\">dimensions</code> is specified, the default <code class=\"codespan\">tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code class=\"codespan\">tooltip</code> will displayed only value horizontally.</p>\n"},"encode":{"type":["Object"],"description":"<p>Define what is encoded to for each dimension of <code class=\"codespan\">data</code>. For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n</code></pre>\n<p>When <a href=\"#series.dimensions\">dimensions</a> is used to defined name for a certain dimension, <code class=\"codespan\">encode</code> can refer the name directly. For example:</p>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<p>The basic structure of <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code> or some special reserved names like &quot;tooltip&quot;, &quot;itemName&quot; etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code class=\"codespan\">encode</code> listed as follows:</p>\n<pre><code class=\"lang-js\">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension &quot;product&quot; and &quot;score&quot; in the tooltip.\n    tooltip: [&#39;product&#39;, &#39;score&#39;]\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // &#39;pie&#39;, &#39;funnel&#39;, where data item name can be displayed in legend.\n    itemName: 3\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension &quot;score&quot; to the X axis.\n    x: [1, 5, &#39;score&#39;],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like &#39;pie&#39;, &#39;funnel&#39; etc.:\nencode: {\n    value: 3\n}\n</code></pre>\n<p>This is an <a href=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a> for <code class=\"codespan\">encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code class=\"codespan\">encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href=\"#dataZoom\">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class=\"lang-js\">var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            return {\n                type: &#39;circle&#39;,\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: &#39;blue&#39;\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n</code></pre>\n"},"seriesLayoutBy":{"type":["string"],"description":"<p>When <a href=\"#dataset\">dataset</a> is used, <code class=\"codespan\">seriesLayoutBy</code> specifies whether the column or the row of <code class=\"codespan\">dataset</code> is mapped to the series, namely, the series is &quot;layout&quot; on columns or rows. Optional values:</p>\n<ul>\n<li>&#39;column&#39;: by default, the columns of <code class=\"codespan\">dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>&#39;row&#39;:the rows of <code class=\"codespan\">dataset</code> are mapped to the series. In this case, each row represents a dimension.</li>\n</ul>\n<p>Check this <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=dataset-series-layout-by\" target=\"_blank\">example</a>.</p>\n","default":"'column'"},"datasetIndex":{"type":["number"],"description":"<p>If <a href=\"#series.data\">series.data</a> is not specified, and <a href=\"#dataset\">dataset</a> exists, the series will use <code class=\"codespan\">dataset</code>. <code class=\"codespan\">datasetIndex</code> specifies which dataset will be used.</p>\n","default":0},"data":{"type":["Array"],"description":"<p>Data array of series, which can be in the following forms:</p>\n<p>Notice, if no <code class=\"codespan\">data</code> specified in series, and there is <a href=\"#dataset\">dataset</a> in option, series will use the first <a href=\"#dataset\">dataset</a> as its datasource. If <code class=\"codespan\">data</code> has been specified, <a href=\"#dataset\">dataset</a> will not used.</p>\n<p><code class=\"codespan\">series.datasetIndex</code> can be used to specify other <a href=\"#dataset\">dataset</a>.</p>\n<p>Basically, data is represented by a two-dimension array, like the example below, where each column is named as a &quot;dimension&quot;.</p>\n<pre><code class=\"lang-js\">series: [{\n    data: [\n        // dimX   dimY   other dimensions ...\n        [  3.4,    4.5,   15,   43],\n        [  4.2,    2.3,   20,   91],\n        [  10.8,   9.5,   30,   18],\n        [  7.2,    8.8,   18,   57]\n    ]\n}]\n</code></pre>\n<ul>\n<li>In <a href=\"#grid\">cartesian (grid)</a>, &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href=\"#xAxis\">xAxis</a> and <a href=\"#yAxis\">yAxis</a> respectively.</li>\n<li>In <a href=\"#polar\">polar</a> &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href=\"#radiusAxis\">radiusAxis</a> 和 <a href=\"#anbleAxis\">angleAxis</a> respectively.</li>\n<li>Other dimensions are optional, which can be used in other places. For example:<ul>\n<li><a href=\"#visualMap\">visualMap</a> can map one or more dimensions to visual (color, symbol size ...).</li>\n<li><a href=\"#series.symbolSize\">series.symbolSize</a> can be set as a callback function, where symbol size can be calculated by values of a certain dimension.</li>\n<li>Values in other dimensions can be shown by <a href=\"#tooltip.formatter\">tooltip.formatter</a> or <a href=\"#series.label.formatter\">series.label.formatter</a>.</li>\n</ul>\n</li>\n</ul>\n<p>Especially, when there is one and only one category axis (axis.type is <code class=\"codespan\">&#39;category&#39;</code>), data can be simply be represented by a one-dimension array, like:</p>\n<pre><code class=\"lang-js\">xAxis: {\n    data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;]\n},\nseries: [{\n    // Each item corresponds to each item in xAxis.data.\n    data: [23,  44,  55,  19]\n    // In fact, it is the simplification of the format below:\n    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n</code></pre>\n<p><br>\n<strong>Relationship between &quot;value&quot; and <a href=\"#xAxis.type\">axis.type</a></strong></p>\n<ul>\n<li><p>When a dimension corresponds to a value axis (axis.type is <code class=\"codespan\">&#39;value&#39;</code> or <code class=\"codespan\">&#39;log&#39;</code>):</p>\n<p>  The value can be a <code class=\"codespan\">number</code> (like <code class=\"codespan\">12</code>) (can also be a number in a <code class=\"codespan\">string</code> format, like <code class=\"codespan\">&#39;12&#39;</code>).</p>\n</li>\n<li><p>When a dimension corresponds to a category axis (axis.type is <code class=\"codespan\">&#39;category&#39;</code>):</p>\n<p>  The value should be the ordinal of the axis.data (based on <code class=\"codespan\">0</code>), the string value of the axis.data. For example:</p>\n<pre><code class=\"lang-js\">  xAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;]\n  },\n  yAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;, &#39;p&#39;, &#39;q&#39;]\n  },\n  series: [{\n      data: [\n          // xAxis      yAxis\n          [  0,           0,    2  ], // This point is located at xAxis: &#39;Monday&#39;, yAxis: &#39;a&#39;.\n          [  &#39;Thursday&#39;,  2,    1  ], // This point is located at xAxis: &#39;Thursday&#39;, yAxis: &#39;m&#39;.\n          [  2,          &#39;p&#39;,   2  ], // This point is located at xAxis: &#39;Wednesday&#39;, yAxis: &#39;p&#39;.\n          [  3,           3,    5  ]\n      ]\n  }]\n</code></pre>\n<p>  There is an example of double category axes: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-punchCard\" target=\"_blank\">Github Punchcard</a>.</p>\n</li>\n<li><p>When a dimension corresponds to a time axis (type is <code class=\"codespan\">&#39;time&#39;</code>), the value can be:</p>\n<ul>\n<li>a timestamp, like <code class=\"codespan\">1484141700832</code>, which represents a UTC time.</li>\n<li>a date string, in one of the formats below:<ul>\n<li>a subset of <a href=\"http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15\" target=\"_blank\">ISO 8601</a>, only including (all of these are treated as local time unless timezone is specified, which is consistent with <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>):<ul>\n<li>only part of year/month/date/time are specified: <code class=\"codespan\">&#39;2012-03&#39;</code>, <code class=\"codespan\">&#39;2012-03-01&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 05&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 05:06&#39;</code>.</li>\n<li>separated by <code class=\"codespan\">&quot;T&quot;</code> or a space: <code class=\"codespan\">&#39;2012-03-01T12:22:33.123&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 12:22:33.123&#39;</code>.</li>\n<li>timezone specified: <code class=\"codespan\">&#39;2012-03-01T12:22:33Z&#39;</code>, <code class=\"codespan\">&#39;2012-03-01T12:22:33+8000&#39;</code>, <code class=\"codespan\">&#39;2012-03-01T12:22:33-05:00&#39;</code>.</li>\n</ul>\n</li>\n<li>other date string format (all of these are treated as local time):\n<code class=\"codespan\">&#39;2012&#39;</code>, <code class=\"codespan\">&#39;2012-3-1&#39;</code>, <code class=\"codespan\">&#39;2012/3/1&#39;</code>, <code class=\"codespan\">&#39;2012/03/01&#39;</code>,\n<code class=\"codespan\">&#39;2009/6/12 2:00&#39;</code>, <code class=\"codespan\">&#39;2009/6/12 2:05:08&#39;</code>, <code class=\"codespan\">&#39;2009/6/12 2:05:08.123&#39;</code>.</li>\n</ul>\n</li>\n<li>a JavaScript Date instance created by user:<ul>\n<li>Caution, when using a data string to create a Date instance, <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">browser differences and inconsistencies</a> should be considered.</li>\n<li>For example: In chrome, <code class=\"codespan\">new Date(&#39;2012-01-01&#39;)</code> is treated as a Jan 1st 2012 in UTC, while <code class=\"codespan\">new Date(&#39;2012-1-1&#39;)</code> and <code class=\"codespan\">new Date(&#39;2012/01/01&#39;)</code> are treated as Jan 1st 2012 in local timezone. In safari <code class=\"codespan\">new Date(&#39;2012-1-1&#39;)</code> is not supported.</li>\n<li>So if you intent to perform <code class=\"codespan\">new Date(dateString)</code>, it is strongly recommended to use a time parse library (e.g., <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>), or use <code class=\"codespan\">echarts.number.parseDate</code>, or check <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">this</a>.</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<strong>Customize a data item:</strong></p>\n<p>When needing to customize a data item, it can be set as an object, where property <code class=\"codespan\">value</code> reprensent real value. For example:</p>\n<pre><code class=\"lang-js\">[\n    12,\n    24,\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    33\n]\n// Or\n[\n    [12, 332],\n    [24, 32],\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    [33, 31]\n]\n</code></pre>\n<p><br>\n<strong>Empty value:</strong></p>\n<p><code class=\"codespan\">&#39;-&#39;</code> or <code class=\"codespan\">null</code> or <code class=\"codespan\">undefined</code> or <code class=\"codespan\">NaN</code> can be used to describe that a data item does not exist (ps:<em>not exist</em> does not means its value is <code class=\"codespan\">0</code>).</p>\n<p>For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.</p>\n<p><br><br></p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>The name of data item.</p>\n"},"value":{"type":["number"],"description":"<p>The value of a single data item.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of single data.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>","default":"'circle'"},"symbolSize":{"type":["number","Array"],"description":"<p>single data symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n","default":4},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of single data symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of single data symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"label":{"type":["Object"],"description":"<p>The style of the text of single data point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"top"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>The style of the symbol of single data point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Bar color. </p>\n","default":"auto"},"borderColor":{"type":["Color"],"description":"<p>The border color of bar.</p>\n","default":"'#000'"},"borderWidth":{"type":["number"],"description":"<p>The border width of bar. defaults to have no border.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Bar color. </p>\n","default":"auto"},"borderColor":{"type":["Color"],"description":"<p>The border color of bar.</p>\n","default":"'#000'"},"borderWidth":{"type":["number"],"description":"<p>The border width of bar. defaults to have no border.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-line.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-line.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-line.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-line.markPoint.data.x\">x</a>, <a href=\"#series-line.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-line.markPoint.data.coord\">coord</a> attribute, in which <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-line.markPoint.data.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-line.markPoint.data.valueIndex\">valueIndex</a> or <a href=\"#series-line.markPoint.data.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n    {\n        name: &#39;maximum&#39;,\n        type: &#39;max&#39;\n    }, \n    {\n        name: &#39;coordinate&#39;,\n        coord: [10, 20]\n    }, {\n        name: &#39;fixed x position&#39;,\n        yAxis: 10,\n        x: &#39;90%&#39;\n    }, \n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Available when using <a href=\"#series-line.markPoint.data.type\">type</a> it is used to assign maximum value and minimum value in dimensions, it could be <code class=\"codespan\">0</code> (xAxis, radiusAxis), <code class=\"codespan\">1</code> (yAxis, angleAxis), and use the first value axis dimension by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-line.markPoint.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["Object"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-line.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class=\"codespan\">symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-line.markLine.data.0.x\">x</a>, <a href=\"#series-line.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-line.markLine.data.0.coord\">coord</a> attribute, in which <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-line.markLine.data.0.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-line.markLine.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-line.markLine.data.0.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n<li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code class=\"codespan\">xAxis</code> or <code class=\"codespan\">yAxis</code>. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a> for example.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p>You may also set the type of mark line through <code class=\"codespan\">type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code class=\"codespan\">valueIndex</code>.</p>\n<pre><code>data: [\n    {\n        name: &#39;average line&#39;,\n        // &#39;average&#39;, &#39;min&#39;, and &#39;max&#39; are supported\n        type: &#39;average&#39;\n    },\n    {\n        name: &#39;Horizontal line with Y value at 100&#39;,\n        yAxis: 100\n    },\n    [\n        {\n            // Use the same name with starting and ending point\n            name: &#39;Minimum to Maximum&#39;,\n            type: &#39;min&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n    [\n        {\n            name: &#39;Markline between two points&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [{\n        // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n        yAxis: &#39;max&#39;,\n        x: &#39;90%&#39;\n    }, {\n        type: &#39;max&#39;\n    }],\n    [\n        {\n            name: &#39;Mark line between two points&#39;,\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n<li><code class=\"codespan\">&#39;median&#39;</code> median value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-line.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-line.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'starting point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n<li><code class=\"codespan\">&#39;median&#39;</code> median value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-line.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-line.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'ending point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code class=\"codespan\">data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li><p>Specify the coordinate in screen coordinate system using <a href=\"#series-line.markArea.data.0.x\">x</a>, <a href=\"#series-line.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code class=\"codespan\">5</code>), or percent (e.g., the value is <code class=\"codespan\">&#39;35%&#39;</code>).</p>\n</li>\n<li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using\n<a href=\"#series-line.markArea.data.0.coord\">coord</a>, which can be also set as <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> (e.g, <code class=\"codespan\">coord: [23, &#39;min&#39;]</code>, or <code class=\"codespan\">coord: [&#39;average&#39;, &#39;max&#39;]</code>).</p>\n</li>\n</ol>\n<ol start=\"3\">\n<li>Locate the point on the min value or max value of <code class=\"codespan\">series.data</code> using <a href=\"#series-line.markArea.data.0.type\">type</a>, where <a href=\"#series-line.markArea.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-line.markPoint.data.0.valueDim\">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</li>\n<li>If in cartesian, you can only specify <code class=\"codespan\">xAxis</code> or <code class=\"codespan\">yAxis</code> to define a mark area based on only X or Y axis, see sample <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a></li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n\n    [\n        {\n            name: &#39;From average to max&#39;,\n            type: &#39;average&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n\n    [\n        {\n            name: &#39;Mark area between two points in data coordiantes&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [\n        {\n            name: &#39;From 60 to 80&#39;,\n            yAxis: 60\n        },\n        {\n            yAxis: 80\n        }\n    ], [\n        {\n            name: &#39;Mark area covers all data&#39;\n            coord: [&#39;min&#39;, &#39;min&#39;]\n        },\n        {\n            coord: [&#39;max&#39;, &#39;max&#39;]\n        }\n    ],\n    [\n        {\n            name: &#39;Mark area in two screen points&#39;,\n            x: 100,\n            y: 100\n        }, {\n            x: &#39;90%&#39;,\n            y: &#39;10%&#39;\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> max value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> min value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-line.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-line.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'start'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> max value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> min value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-line.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-line.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'end'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in broken line graph.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in broken line graph, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"linear"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong>bar chart</strong></p>\n<p>Bar chart shows different data through the height of a bar, which is used in <a href=\"#grid\">rectangular coordinate</a> with at least 1 category axis.</p>\n","properties":{"type":{"type":["string"],"description":"","default":"'bar'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"legendHoverLink":{"type":["boolean"],"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n","default":true},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;cartesian2d&#39;</code></p>\n<p>  Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-bar.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-bar.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n","default":"'cartesian2d'"},"xAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#xAxis\">x axis</a> to combine with, which is  useful for multiple x axes in one chart.</p>\n","default":0},"yAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#yAxis\">y axis</a> to combine with, which is  useful for multiple y axes in one chart.</p>\n","default":0},"roundCap":{"type":["boolean"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.5.0</code></p>\n</blockquote>\n<p>If to add round caps at the end of the bar sectors. Valid only for bar series on polar coordinates.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=polar-roundCap&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":false},"label":{"type":["Object"],"description":"<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of , <code class=\"codespan\">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Bar color.  By default, colors from global palette <a href=\"#color\">option.color</a> is used. </p>\n","default":"auto"},"borderColor":{"type":["Color"],"description":"<p>The border color of bar.</p>\n","default":"'#000'"},"borderWidth":{"type":["number"],"description":"<p>The border width of bar. defaults to have no border.</p>\n","default":0},"barBorderRadius":{"type":["number","Array"],"description":"<p>The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.</p>\n<p>For example:</p>\n<pre><code>barBorderRadius: 5, // consistently set the size of 4 rounded corners\nbarBorderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n</code></pre>","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"showBackground":{"type":["boolean"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.7.0</code></p>\n</blockquote>\n<p>Whether to show background behind each bar. Use <a href=\"#series-bar.backgroundStyle\">backgroundStyle</a> to set background style.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-background&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n","default":false},"backgroundStyle":{"type":["Object"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.7.0</code></p>\n</blockquote>\n<p>Background style of each bar if <a href=\"#series-bar.showBackground\">showBackground</a> is set to be <code class=\"codespan\">true</code>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-background&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n\n","properties":{"color":{"type":["Color"],"description":"<p>Bar color. </p>\n","default":"'rgba(180, 180, 180, 0.2)'"},"borderColor":{"type":["Color"],"description":"<p>The border color of bar.</p>\n","default":"'#000'"},"borderWidth":{"type":["number"],"description":"<p>The border width of bar. defaults to have no border.</p>\n","default":0},"barBorderRadius":{"type":["number","Array"],"description":"<p>The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.</p>\n<p>For example:</p>\n<pre><code>barBorderRadius: 5, // consistently set the size of 4 rounded corners\nbarBorderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n</code></pre>","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Bar color. </p>\n","default":"auto"},"borderColor":{"type":["Color"],"description":"<p>The border color of bar.</p>\n","default":"'#000'"},"borderWidth":{"type":["number"],"description":"<p>The border width of bar. defaults to have no border.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"stack":{"type":["string"],"description":"<p>Name of stack. On the same category axis, the series with the same <code class=\"codespan\">stack</code> name would be put on top of each other.</p>\n","default":null},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n","default":"'pointer'"},"barWidth":{"type":["number","string"],"description":"<p>The width of the bar. Adaptive when not specified.</p>\n<p>Can be an absolute value like <code class=\"codespan\">40</code> or a percent value like <code class=\"codespan\">&#39;60%&#39;</code>. The percent is based on the calculated category width.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code class=\"codespan\">&#39;bar&#39;</code> series. This attribute should be set on the last <code class=\"codespan\">&#39;bar&#39;</code> series in the coodinate system, then it will be adopted by all <code class=\"codespan\">&#39;bar&#39;</code> series in the coordinate system.</p>\n","default":null},"barMaxWidth":{"type":["number","string"],"description":"<p>The maximum width of the bar.</p>\n<p>Has higer priority than <a href=\"#series-bar.barWidth\">barWidth</a>.</p>\n<p>Can be an absolute value like <code class=\"codespan\">40</code> or a percent value like <code class=\"codespan\">&#39;60%&#39;</code>. The percent is based on the calculated category width.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code class=\"codespan\">&#39;bar&#39;</code> series. This attribute should be set on the last <code class=\"codespan\">&#39;bar&#39;</code> series in the coodinate system, then it will be adopted by all <code class=\"codespan\">&#39;bar&#39;</code> series in the coordinate system.</p>\n","default":null},"barMinWidth":{"type":["number","string"],"description":"<p>The minimum width of the bar. In cartesian the default value is <code class=\"codespan\">1</code>, otherwise the default value if <code class=\"codespan\">null</code>.</p>\n<p>Has higer priority than <a href=\"#series-bar.barWidth\">barWidth</a>.</p>\n<p>Can be an absolute value like <code class=\"codespan\">40</code> or a percent value like <code class=\"codespan\">&#39;60%&#39;</code>. The percent is based on the calculated category width.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code class=\"codespan\">&#39;bar&#39;</code> series. This attribute should be set on the last <code class=\"codespan\">&#39;bar&#39;</code> series in the coodinate system, then it will be adopted by all <code class=\"codespan\">&#39;bar&#39;</code> series in the coordinate system.</p>\n"},"barMinHeight":{"type":["number"],"description":"<p>The minimum width of bar. It could be used to avoid the following situation: the interaction would be affected when the value of some data item is too small.</p>\n","default":0},"barGap":{"type":["string"],"description":"<p>The gap between bars between different series, is a percent value like <code class=\"codespan\">&#39;30%&#39;</code>, which means <code class=\"codespan\">30%</code> of the bar width.</p>\n<p>Set barGap as <code class=\"codespan\">&#39;-100%&#39;</code> can overlap bars that belong to different series, which is useful when making a series of bar be background.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code class=\"codespan\">&#39;bar&#39;</code> series. This attribute should be set on the last <code class=\"codespan\">&#39;bar&#39;</code> series in the coodinate system, then it will be adopted by all <code class=\"codespan\">&#39;bar&#39;</code> series in the coordinate system.</p>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/barGrid-barGap&reset=1&edit=1\" width=\"600\" height=\"400\"><iframe />\n\n\n","default":"30%"},"barCategoryGap":{"type":["string"],"description":"<p>The bar gap of a single series, defaults to be <code class=\"codespan\">20%</code> of the category gap, can be set as a fixed value.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code class=\"codespan\">&#39;bar&#39;</code> series. This attribute should be set on the last <code class=\"codespan\">&#39;bar&#39;</code> series in the coodinate system, then it will be adopted by all <code class=\"codespan\">&#39;bar&#39;</code> series in the coordinate system.</p>\n","default":"'20%'"},"large":{"type":["boolean"],"description":"<p>Whether to enable the optimization of large-scale data. It could be set when large data causes performance problem.</p>\n<p>After being enabled, <code class=\"codespan\">largeThreshold</code> can be used to indicate the minimum number for turning on the optimization.</p>\n<p>But when the optimization enabled, the style of single data item can&#39;t be customized any more.</p>\n","default":false},"largeThreshold":{"type":["number"],"description":"<p>The threshold enabling the drawing optimization.</p>\n","default":400},"progressive":{"type":["number"],"description":"<p><code class=\"codespan\">progressive</code> specifies the amount of graphic elements that can be rendered within a frame (about 16ms) if &quot;progressive rendering&quot; enabled.</p>\n<p>When data amount is from thousand to more than 10 million, it will take too long time to render all of the graphic elements. Since ECharts 4, &quot;progressive rendering&quot; is supported in its workflow, which processes and renders data chunk by chunk alone with each frame, avoiding to block the UI thread of the browser.</p>\n<p>Set <code class=\"codespan\">progressive: 0</code> to disable progressive permanently. By default, progressive is auto-enabled when data amount is bigger than <code class=\"codespan\">progressiveThreshold</code>.</p>\n","default":5000},"progressiveThreshold":{"type":["number"],"description":"<p>If current data amount is over the threshold, &quot;progressive rendering&quot; is enabled.</p>\n","default":3000},"progressiveChunkMode":{"type":["string"],"description":"<p>Chunk approach, optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;sequential&#39;</code>: slice data by data index.</li>\n<li><code class=\"codespan\">&#39;mod&#39;</code>: slice data by mod, which make the data items of each chunk coming from all over the data, bringing better visual effect while progressive rendering.</li>\n</ul>\n","default":"mod"},"dimensions":{"type":["Array"],"description":"<p><code class=\"codespan\">dimensions</code> can be used to define dimension info for <code class=\"codespan\">series.data</code> or <code class=\"codespan\">dataset.source</code>.</p>\n<p>Notice: if <a href=\"#dataset\">dataset</a> is used, we can provide dimension names in the first column/row of <a href=\"#dataset.source\">dataset.source</a>, and not need to specify <code class=\"codespan\">dimensions</code> here. But if <code class=\"codespan\">dimensions</code> is specified here, echarts will not retrieve dimension names from the first row/column of <code class=\"codespan\">dataset.source</code> any more.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\n    ]\n}\n</code></pre>\n<p>Each data item of <code class=\"codespan\">dimensions</code> can be:</p>\n<ul>\n<li><code class=\"codespan\">string</code>, for example, <code class=\"codespan\">&#39;someName&#39;</code>, which equals to <code class=\"codespan\">{name: &#39;someName&#39;}</code>.</li>\n<li><code class=\"codespan\">Object</code>, where the attributes can be:<ul>\n<li>name: <code class=\"codespan\">string</code>.</li>\n<li>type: <code class=\"codespan\">string</code>, supports:<ul>\n<li><code class=\"codespan\">number</code></li>\n<li><code class=\"codespan\">float</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array\" target=\"_blank\">Float64Array</a></li>\n<li><code class=\"codespan\">int</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array\" target=\"_blank\">Int32Array</a></li>\n<li><code class=\"codespan\">ordinal</code>, discrete value, which represents string generally.</li>\n<li><code class=\"codespan\">time</code>, time value, see <a href=\"#series.data\">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code class=\"codespan\">string</code>, generally used in tooltip for dimension display. If not specified, use <code class=\"codespan\">name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code class=\"codespan\">dimensions</code> is specified, the default <code class=\"codespan\">tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code class=\"codespan\">tooltip</code> will displayed only value horizontally.</p>\n"},"encode":{"type":["Object"],"description":"<p>Define what is encoded to for each dimension of <code class=\"codespan\">data</code>. For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n</code></pre>\n<p>When <a href=\"#series.dimensions\">dimensions</a> is used to defined name for a certain dimension, <code class=\"codespan\">encode</code> can refer the name directly. For example:</p>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<p>The basic structure of <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code> or some special reserved names like &quot;tooltip&quot;, &quot;itemName&quot; etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code class=\"codespan\">encode</code> listed as follows:</p>\n<pre><code class=\"lang-js\">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension &quot;product&quot; and &quot;score&quot; in the tooltip.\n    tooltip: [&#39;product&#39;, &#39;score&#39;]\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // &#39;pie&#39;, &#39;funnel&#39;, where data item name can be displayed in legend.\n    itemName: 3\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension &quot;score&quot; to the X axis.\n    x: [1, 5, &#39;score&#39;],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like &#39;pie&#39;, &#39;funnel&#39; etc.:\nencode: {\n    value: 3\n}\n</code></pre>\n<p>This is an <a href=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a> for <code class=\"codespan\">encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code class=\"codespan\">encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href=\"#dataZoom\">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class=\"lang-js\">var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            return {\n                type: &#39;circle&#39;,\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: &#39;blue&#39;\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n</code></pre>\n"},"seriesLayoutBy":{"type":["string"],"description":"<p>When <a href=\"#dataset\">dataset</a> is used, <code class=\"codespan\">seriesLayoutBy</code> specifies whether the column or the row of <code class=\"codespan\">dataset</code> is mapped to the series, namely, the series is &quot;layout&quot; on columns or rows. Optional values:</p>\n<ul>\n<li>&#39;column&#39;: by default, the columns of <code class=\"codespan\">dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>&#39;row&#39;:the rows of <code class=\"codespan\">dataset</code> are mapped to the series. In this case, each row represents a dimension.</li>\n</ul>\n<p>Check this <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=dataset-series-layout-by\" target=\"_blank\">example</a>.</p>\n","default":"'column'"},"datasetIndex":{"type":["number"],"description":"<p>If <a href=\"#series.data\">series.data</a> is not specified, and <a href=\"#dataset\">dataset</a> exists, the series will use <code class=\"codespan\">dataset</code>. <code class=\"codespan\">datasetIndex</code> specifies which dataset will be used.</p>\n","default":0},"data":{"type":["Array"],"description":"<p>Data array of series, which can be in the following forms:</p>\n<p>Notice, if no <code class=\"codespan\">data</code> specified in series, and there is <a href=\"#dataset\">dataset</a> in option, series will use the first <a href=\"#dataset\">dataset</a> as its datasource. If <code class=\"codespan\">data</code> has been specified, <a href=\"#dataset\">dataset</a> will not used.</p>\n<p><code class=\"codespan\">series.datasetIndex</code> can be used to specify other <a href=\"#dataset\">dataset</a>.</p>\n<p>Basically, data is represented by a two-dimension array, like the example below, where each column is named as a &quot;dimension&quot;.</p>\n<pre><code class=\"lang-js\">series: [{\n    data: [\n        // dimX   dimY   other dimensions ...\n        [  3.4,    4.5,   15,   43],\n        [  4.2,    2.3,   20,   91],\n        [  10.8,   9.5,   30,   18],\n        [  7.2,    8.8,   18,   57]\n    ]\n}]\n</code></pre>\n<ul>\n<li>In <a href=\"#grid\">cartesian (grid)</a>, &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href=\"#xAxis\">xAxis</a> and <a href=\"#yAxis\">yAxis</a> respectively.</li>\n<li>In <a href=\"#polar\">polar</a> &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href=\"#radiusAxis\">radiusAxis</a> 和 <a href=\"#anbleAxis\">angleAxis</a> respectively.</li>\n<li>Other dimensions are optional, which can be used in other places. For example:<ul>\n<li><a href=\"#visualMap\">visualMap</a> can map one or more dimensions to visual (color, symbol size ...).</li>\n<li><a href=\"#series.symbolSize\">series.symbolSize</a> can be set as a callback function, where symbol size can be calculated by values of a certain dimension.</li>\n<li>Values in other dimensions can be shown by <a href=\"#tooltip.formatter\">tooltip.formatter</a> or <a href=\"#series.label.formatter\">series.label.formatter</a>.</li>\n</ul>\n</li>\n</ul>\n<p>Especially, when there is one and only one category axis (axis.type is <code class=\"codespan\">&#39;category&#39;</code>), data can be simply be represented by a one-dimension array, like:</p>\n<pre><code class=\"lang-js\">xAxis: {\n    data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;]\n},\nseries: [{\n    // Each item corresponds to each item in xAxis.data.\n    data: [23,  44,  55,  19]\n    // In fact, it is the simplification of the format below:\n    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n</code></pre>\n<p><br>\n<strong>Relationship between &quot;value&quot; and <a href=\"#xAxis.type\">axis.type</a></strong></p>\n<ul>\n<li><p>When a dimension corresponds to a value axis (axis.type is <code class=\"codespan\">&#39;value&#39;</code> or <code class=\"codespan\">&#39;log&#39;</code>):</p>\n<p>  The value can be a <code class=\"codespan\">number</code> (like <code class=\"codespan\">12</code>) (can also be a number in a <code class=\"codespan\">string</code> format, like <code class=\"codespan\">&#39;12&#39;</code>).</p>\n</li>\n<li><p>When a dimension corresponds to a category axis (axis.type is <code class=\"codespan\">&#39;category&#39;</code>):</p>\n<p>  The value should be the ordinal of the axis.data (based on <code class=\"codespan\">0</code>), the string value of the axis.data. For example:</p>\n<pre><code class=\"lang-js\">  xAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;]\n  },\n  yAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;, &#39;p&#39;, &#39;q&#39;]\n  },\n  series: [{\n      data: [\n          // xAxis      yAxis\n          [  0,           0,    2  ], // This point is located at xAxis: &#39;Monday&#39;, yAxis: &#39;a&#39;.\n          [  &#39;Thursday&#39;,  2,    1  ], // This point is located at xAxis: &#39;Thursday&#39;, yAxis: &#39;m&#39;.\n          [  2,          &#39;p&#39;,   2  ], // This point is located at xAxis: &#39;Wednesday&#39;, yAxis: &#39;p&#39;.\n          [  3,           3,    5  ]\n      ]\n  }]\n</code></pre>\n<p>  There is an example of double category axes: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-punchCard\" target=\"_blank\">Github Punchcard</a>.</p>\n</li>\n<li><p>When a dimension corresponds to a time axis (type is <code class=\"codespan\">&#39;time&#39;</code>), the value can be:</p>\n<ul>\n<li>a timestamp, like <code class=\"codespan\">1484141700832</code>, which represents a UTC time.</li>\n<li>a date string, in one of the formats below:<ul>\n<li>a subset of <a href=\"http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15\" target=\"_blank\">ISO 8601</a>, only including (all of these are treated as local time unless timezone is specified, which is consistent with <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>):<ul>\n<li>only part of year/month/date/time are specified: <code class=\"codespan\">&#39;2012-03&#39;</code>, <code class=\"codespan\">&#39;2012-03-01&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 05&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 05:06&#39;</code>.</li>\n<li>separated by <code class=\"codespan\">&quot;T&quot;</code> or a space: <code class=\"codespan\">&#39;2012-03-01T12:22:33.123&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 12:22:33.123&#39;</code>.</li>\n<li>timezone specified: <code class=\"codespan\">&#39;2012-03-01T12:22:33Z&#39;</code>, <code class=\"codespan\">&#39;2012-03-01T12:22:33+8000&#39;</code>, <code class=\"codespan\">&#39;2012-03-01T12:22:33-05:00&#39;</code>.</li>\n</ul>\n</li>\n<li>other date string format (all of these are treated as local time):\n<code class=\"codespan\">&#39;2012&#39;</code>, <code class=\"codespan\">&#39;2012-3-1&#39;</code>, <code class=\"codespan\">&#39;2012/3/1&#39;</code>, <code class=\"codespan\">&#39;2012/03/01&#39;</code>,\n<code class=\"codespan\">&#39;2009/6/12 2:00&#39;</code>, <code class=\"codespan\">&#39;2009/6/12 2:05:08&#39;</code>, <code class=\"codespan\">&#39;2009/6/12 2:05:08.123&#39;</code>.</li>\n</ul>\n</li>\n<li>a JavaScript Date instance created by user:<ul>\n<li>Caution, when using a data string to create a Date instance, <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">browser differences and inconsistencies</a> should be considered.</li>\n<li>For example: In chrome, <code class=\"codespan\">new Date(&#39;2012-01-01&#39;)</code> is treated as a Jan 1st 2012 in UTC, while <code class=\"codespan\">new Date(&#39;2012-1-1&#39;)</code> and <code class=\"codespan\">new Date(&#39;2012/01/01&#39;)</code> are treated as Jan 1st 2012 in local timezone. In safari <code class=\"codespan\">new Date(&#39;2012-1-1&#39;)</code> is not supported.</li>\n<li>So if you intent to perform <code class=\"codespan\">new Date(dateString)</code>, it is strongly recommended to use a time parse library (e.g., <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>), or use <code class=\"codespan\">echarts.number.parseDate</code>, or check <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">this</a>.</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<strong>Customize a data item:</strong></p>\n<p>When needing to customize a data item, it can be set as an object, where property <code class=\"codespan\">value</code> reprensent real value. For example:</p>\n<pre><code class=\"lang-js\">[\n    12,\n    24,\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    33\n]\n// Or\n[\n    [12, 332],\n    [24, 32],\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    [33, 31]\n]\n</code></pre>\n<p><br>\n<strong>Empty value:</strong></p>\n<p><code class=\"codespan\">&#39;-&#39;</code> or <code class=\"codespan\">null</code> or <code class=\"codespan\">undefined</code> or <code class=\"codespan\">NaN</code> can be used to describe that a data item does not exist (ps:<em>not exist</em> does not means its value is <code class=\"codespan\">0</code>).</p>\n<p>For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.</p>\n<p><br><br></p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>The name of data item.</p>\n"},"value":{"type":["number"],"description":"<p>The value of a single data item.</p>\n"},"label":{"type":["Object"],"description":"<p>The style setting of the text label in a single bar.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"inside"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Bar color. </p>\n","default":"auto"},"borderColor":{"type":["Color"],"description":"<p>The border color of bar.</p>\n","default":"'#000'"},"borderWidth":{"type":["number"],"description":"<p>The border width of bar. defaults to have no border.</p>\n","default":0},"barBorderRadius":{"type":["number","Array"],"description":"<p>The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.</p>\n<p>For example:</p>\n<pre><code>barBorderRadius: 5, // consistently set the size of 4 rounded corners\nbarBorderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n</code></pre>","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Bar color. </p>\n","default":"auto"},"borderColor":{"type":["Color"],"description":"<p>The border color of bar.</p>\n","default":"'#000'"},"borderWidth":{"type":["number"],"description":"<p>The border width of bar. defaults to have no border.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-bar.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-bar.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-bar.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-bar.markPoint.data.x\">x</a>, <a href=\"#series-bar.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-bar.markPoint.data.coord\">coord</a> attribute, in which <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-bar.markPoint.data.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-bar.markPoint.data.valueIndex\">valueIndex</a> or <a href=\"#series-bar.markPoint.data.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n    {\n        name: &#39;maximum&#39;,\n        type: &#39;max&#39;\n    }, \n    {\n        name: &#39;coordinate&#39;,\n        coord: [10, 20]\n    }, {\n        name: &#39;fixed x position&#39;,\n        yAxis: 10,\n        x: &#39;90%&#39;\n    }, \n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Available when using <a href=\"#series-bar.markPoint.data.type\">type</a> it is used to assign maximum value and minimum value in dimensions, it could be <code class=\"codespan\">0</code> (xAxis, radiusAxis), <code class=\"codespan\">1</code> (yAxis, angleAxis), and use the first value axis dimension by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-bar.markPoint.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["Object"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-bar.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class=\"codespan\">symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-bar.markLine.data.0.x\">x</a>, <a href=\"#series-bar.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-bar.markLine.data.0.coord\">coord</a> attribute, in which <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-bar.markLine.data.0.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-bar.markLine.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-bar.markLine.data.0.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n<li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code class=\"codespan\">xAxis</code> or <code class=\"codespan\">yAxis</code>. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a> for example.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p>You may also set the type of mark line through <code class=\"codespan\">type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code class=\"codespan\">valueIndex</code>.</p>\n<pre><code>data: [\n    {\n        name: &#39;average line&#39;,\n        // &#39;average&#39;, &#39;min&#39;, and &#39;max&#39; are supported\n        type: &#39;average&#39;\n    },\n    {\n        name: &#39;Horizontal line with Y value at 100&#39;,\n        yAxis: 100\n    },\n    [\n        {\n            // Use the same name with starting and ending point\n            name: &#39;Minimum to Maximum&#39;,\n            type: &#39;min&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n    [\n        {\n            name: &#39;Markline between two points&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [{\n        // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n        yAxis: &#39;max&#39;,\n        x: &#39;90%&#39;\n    }, {\n        type: &#39;max&#39;\n    }],\n    [\n        {\n            name: &#39;Mark line between two points&#39;,\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n<li><code class=\"codespan\">&#39;median&#39;</code> median value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-bar.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-bar.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'starting point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n<li><code class=\"codespan\">&#39;median&#39;</code> median value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-bar.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-bar.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'ending point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code class=\"codespan\">data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li><p>Specify the coordinate in screen coordinate system using <a href=\"#series-bar.markArea.data.0.x\">x</a>, <a href=\"#series-bar.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code class=\"codespan\">5</code>), or percent (e.g., the value is <code class=\"codespan\">&#39;35%&#39;</code>).</p>\n</li>\n<li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using\n<a href=\"#series-bar.markArea.data.0.coord\">coord</a>, which can be also set as <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> (e.g, <code class=\"codespan\">coord: [23, &#39;min&#39;]</code>, or <code class=\"codespan\">coord: [&#39;average&#39;, &#39;max&#39;]</code>).</p>\n</li>\n</ol>\n<ol start=\"3\">\n<li>Locate the point on the min value or max value of <code class=\"codespan\">series.data</code> using <a href=\"#series-bar.markArea.data.0.type\">type</a>, where <a href=\"#series-bar.markArea.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-bar.markPoint.data.0.valueDim\">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</li>\n<li>If in cartesian, you can only specify <code class=\"codespan\">xAxis</code> or <code class=\"codespan\">yAxis</code> to define a mark area based on only X or Y axis, see sample <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a></li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n\n    [\n        {\n            name: &#39;From average to max&#39;,\n            type: &#39;average&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n\n    [\n        {\n            name: &#39;Mark area between two points in data coordiantes&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [\n        {\n            name: &#39;From 60 to 80&#39;,\n            yAxis: 60\n        },\n        {\n            yAxis: 80\n        }\n    ], [\n        {\n            name: &#39;Mark area covers all data&#39;\n            coord: [&#39;min&#39;, &#39;min&#39;]\n        },\n        {\n            coord: [&#39;max&#39;, &#39;max&#39;]\n        }\n    ],\n    [\n        {\n            name: &#39;Mark area in two screen points&#39;,\n            x: 100,\n            y: 100\n        }, {\n            x: &#39;90%&#39;,\n            y: &#39;10%&#39;\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> max value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> min value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-bar.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-bar.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'start'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> max value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> min value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-bar.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-bar.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'end'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"clip":{"type":["boolean"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.4.0</code></p>\n</blockquote>\n<p>If clip the overflow on the coordinate system. Clip results varies between series:</p>\n<ul>\n<li>Scatter:Ignore the symbols exceeds the coordinate system. Not clip the elements.</li>\n<li>Bar:Clip all the overflowed. With bar width kept.</li>\n<li>Line:Clip the overflowed line.</li>\n<li>Lines: Clip all the overflowed.</li>\n<li>Candlestick: Ignore the elements exceeds the coordinate system.</li>\n<li>Custom: Clip all the olverflowed.</li>\n</ul>\n<p>All these series have default value <code class=\"codespan\">true</code> except custom series. Set it to <code class=\"codespan\">false</code> if you don&#39;t want to clip.</p>\n","default":true},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in bar chart.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in bar chart, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong>pie chart</strong></p>\n<p>The pie chart is mainly used for showing proportion of different categories. Each arc length represents the proportion of data quantity.</p>\n<p><strong>Tip:</strong> The pie chart is more suitable for illustrating the numerical proportion. If you just to present the numerical differences of various categories, the <a href=\"bar\" target=\"_blank\">bar graph</a> chart is more suggested. Because compared to tiny length difference,  people is less sensitive to the minor radian difference. Otherwise, it can also be shown as Nightingale chart by using the <a href=\"#series-pie.roseType\">roseType</a> to distinguish different data through radius.</p>\n<p>Since ECharts v4.6.0, we provide <code class=\"codespan\">&#39;labelLine&#39;</code> and <code class=\"codespan\">&#39;edge&#39;</code> two extra layouts. Check <a href=\"#series-pie.label.alignTo\">label.alignTo</a> for more information.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=pie-alignTo&reset=1&edit=1\" width=\"900\" height=\"250\"><iframe />\n\n\n<p>For multiple pie series in a single chart, you may use <a href=\"#series-pie.left\">left</a>, <a href=\"#series-pie.right\">right</a>, <a href=\"#series-pie.top\">top</a>, <a href=\"#series-pie.bottom\">bottom</a>, <a href=\"#series-pie.width\">width</a>, and <a href=\"#series-pie.height\">height</a> to locate the pies. Percetage values like <a href=\"#series-pie.radius\">radius</a> or <a href=\"#series-pie.label.margin\">label.margin</a> are relative to the viewport defined by this setting.</p>\n<p><strong> The below example shows a customized Nightingale chart: </strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=pie-custom&edit=1&reset=1\" width=\"500\" height=\"400\"><iframe />\n\n\n","properties":{"type":{"type":["string"],"description":"","default":"'pie'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"legendHoverLink":{"type":["boolean"],"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n","default":true},"hoverAnimation":{"type":["boolean"],"description":"<p>Whether to enable the zoom animation effects when hovering sectors.</p>\n","default":true},"hoverOffset":{"type":["number"],"description":"<p>The offset distance of hovered sector.</p>\n","default":10},"selectedMode":{"type":["boolean","string"],"description":"<p>Selected mode of pie.  It is enabled by default, and you may set it to be <code class=\"codespan\">false</code> to disabled it.</p>\n<p>Besides, it can be set to <code class=\"codespan\">&#39;single&#39;</code> or <code class=\"codespan\">&#39;multiple&#39;</code>, for single selection and multiple selections.</p>\n","default":false},"selectedOffset":{"type":["number"],"description":"<p>The offset distance of selected sector.</p>\n","default":10},"clockwise":{"type":["boolean"],"description":"<p>Whether the layout of sectors of pie chart is clockwise.</p>\n","default":true},"startAngle":{"type":["number"],"description":"<p>The start angle, which range is [0, 360].</p>\n","default":90},"minAngle":{"type":["number"],"description":"<p>The minimum angle of sector (0 ~ 360). It prevents some sector from being too small when value is small, which will affect user interaction.</p>\n","default":0},"minShowLabelAngle":{"type":["number"],"description":"<p>If a sector is less than this angle (0 ~ 360), label and labelLine will not be displayed.</p>\n","default":0},"roseType":{"type":["boolean","string"],"description":"<p>Whether to show as Nightingale chart, which distinguishs data through radius. There are 2 optional modes:</p>\n<ul>\n<li><code class=\"codespan\">&#39;radius&#39;</code> Use central angle to show the percentage of data, radius to show data size.</li>\n<li><code class=\"codespan\">&#39;area&#39;</code> All the sectors will share the same central angle, the data size is shown only through radiuses.</li>\n</ul>\n","default":false},"avoidLabelOverlap":{"type":["boolean"],"description":"<p>Whether to enable the strategy to avoid labels overlap. Defaults to be enabled, which will move the label positions in the case of labels overlapping</p>\n","default":true},"stillShowZeroSum":{"type":["boolean"],"description":"<p>Whether to show sector when all data are zero.</p>\n","default":true},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n","default":"'pointer'"},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between pie chart component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":0},"top":{"type":["string","number"],"description":"<p>Distance between pie chart component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":0},"right":{"type":["string","number"],"description":"<p>Distance between pie chart component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":0},"bottom":{"type":["string","number"],"description":"<p>Distance between pie chart component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":0},"width":{"type":["string","number"],"description":"<p>Width of pie chart component. Adaptive by default.</p>\n","default":"'auto'"},"height":{"type":["string","number"],"description":"<p>Height of pie chart component. Adaptive by default.</p>\n","default":"'auto'"},"label":{"type":["Object"],"description":"<p>Text label of pie chart, to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"","default":false},"position":{"type":["string"],"description":"<p>The position of label.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><p><code class=\"codespan\">&#39;outside&#39;</code></p>\n<p>  Outside of sectors of pie chart, which relates to corresponding sector through <a href=\"#series-pie.labelLine\">visual guide line</a>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p>  Inside the sectors of pie chart.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;inner&#39;</code> is the same with <code class=\"codespan\">&#39;inside&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;center&#39;</code></p>\n<p>  In the center of pie chart. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-doughnut\" target=\"_blank\">pie-doughnut example</a></p>\n</li>\n</ul>\n","default":"'outside'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // percentage\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"rotate":{"type":["boolean","number"],"description":"<p>Label rotation.</p>\n<ul>\n<li>If <code class=\"codespan\">true</code>, layout label radically.</li>\n<li>If <code class=\"codespan\">number</code>, means degree that labels are rotated. From -90 degree to 90 degree. The negative value represents clockwise.</li>\n</ul>\n","default":null},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"alignTo":{"type":["string"],"description":"<p>Label aligning policy. Valid only when <code class=\"codespan\">position</code> is <code class=\"codespan\">&#39;outer&#39;</code>.</p>\n<p>Since ECharts v4.6.0, we provide <code class=\"codespan\">&#39;labelLine&#39;</code> and <code class=\"codespan\">&#39;edge&#39;</code> two extra valid <code class=\"codespan\">alignTo</code> values.</p>\n<ul>\n<li><code class=\"codespan\">&#39;none&#39;</code> (default): label lines have fixed length as <a href=\"#series-pie.labelLine.length\">labelLine.length</a> and <a href=\"#series-pie.labelLine.length2\">labelLine.length2</a>.</li>\n<li><code class=\"codespan\">&#39;labelLine&#39;</code>: aligning to the end of label lines and the length of the shortest horizontal label lines is configured by <a href=\"#series-pie.labelLine.length2\">labelLine.length2</a>.</li>\n<li><code class=\"codespan\">&#39;edge&#39;</code>: aligning to text and the distance between the edges of text and the viewport is configured by <a href=\"#series-pie.label.margin\">label.margin</a>.</li>\n</ul>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=pie-alignTo&reset=1&edit=1\" width=\"900\" height=\"250\"><iframe />\n\n\n","default":"'none'"},"margin":{"type":["string","number"],"description":"<p>The horizontal distance between text edges and viewport when <a href=\"#series-pie.label.position\">label.position</a> is <code class=\"codespan\">&#39;outer&#39;</code> and <a href=\"#series-pie.label.alignTo\">label.alignTo</a> is <code class=\"codespan\">&#39;edge&#39;</code>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pie-label-margin&edit=1&reset=1\" width=\"900\" height=\"250\"><iframe />\n\n\n<p>In most cases, you need a small <code class=\"codespan\">margin</code> value like <code class=\"codespan\">10</code> for mobile devices to make sure more text can be shown instead of being <code class=\"codespan\">...</code>. But on larger resolutions, a percentage value should be applied so that the label lines won&#39;t be too long. If your chart is used in varied resolutions, it is advised to set <a href=\"tutorial.html#Responsive%20Mobile-End\" target=\"_blank\">responsive design</a> for different resolutions.</p>\n","default":"'25%'"},"bleedMargin":{"type":["number"],"description":"<p>The horizontal distance between text and viewport when <a href=\"#series-pie.label.position\">label.position</a> is <code class=\"codespan\">&#39;outer&#39;</code> and <a href=\"#series-pie.label.alignTo\">label.alignTo</a> is <code class=\"codespan\">&#39;none&#39;</code> or <code class=\"codespan\">&#39;labelLine&#39;</code>. Longer text will be truncated into <code class=\"codespan\">&#39;...&#39;</code>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pie-label-bleedMargin&edit=1&reset=1\" width=\"800\" height=\"250\"><iframe />\n\n\n","default":10},"distanceToLabelLine":{"type":["number"],"description":"<p>Distance between label line and text.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pie-label-distanceToLabelLine&edit=1&reset=1\" width=\"800\" height=\"250\"><iframe />\n\n\n","default":5}}},"labelLine":{"type":["Object"],"description":"<p>The style of visual guide line. Will show when <a href=\"#series-pie.label.position\">label position</a> is set as <code class=\"codespan\">&#39;outside&#39;</code>.</p>\n<p>The style of visual guide line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the visual guide ine.</p>\n"},"length":{"type":["number"],"description":"<p>The length of the first segment of visual guide line.</p>\n"},"length2":{"type":["number"],"description":"<p>The length of the second segment of visual guide line.</p>\n"},"smooth":{"type":["boolean","number"],"description":"<p>Whether to smooth the visual guide line. It defaults to be <code class=\"codespan\">false</code> and can be set as <code class=\"codespan\">true</code> or the values from 0 to 1 which indicating the smoothness.</p>\n","default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of , <code class=\"codespan\">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"color":{"type":["Color","Function"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n<p>Supports callback functions, in the form of:</p>\n<pre><code class=\"lang-js\">(params: Object) =&gt; Color\n</code></pre>\n<p>Input parameters are <code class=\"codespan\">seriesIndex</code>, <code class=\"codespan\">dataIndex</code>, <code class=\"codespan\">data</code>, <code class=\"codespan\">value</code>, and etc. of data item.</p>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"","default":false},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // percentage\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"rotate":{"type":["boolean","number"],"description":"<p>Label rotation.</p>\n<ul>\n<li>If <code class=\"codespan\">true</code>, layout label radically.</li>\n<li>If <code class=\"codespan\">number</code>, means degree that labels are rotated. From -90 degree to 90 degree. The negative value represents clockwise.</li>\n</ul>\n","default":null},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"labelLine":{"type":["Object"],"description":"<p>The style of visual guide line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the visual guide ine.</p>\n"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"center":{"type":["Array"],"description":"<p>Center position of Pie chart, the first of which is the horizontal position, and the second is the vertical position.</p>\n<p>Percentage is supported. When set in percentage, the item is relative to the container width, and the second item to the height.</p>\n<p><strong>Example: </strong></p>\n<pre><code>// Set to absolute pixel values\ncenter: [400, 300]\n// Set to relative percent\ncenter: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>","default":"['50%', '50%']"},"radius":{"type":["number","string","Array"],"description":"<p>Radius of Pie chart. Value can be:</p>\n<ul>\n<li><code class=\"codespan\">number</code>: Specify outside radius directly.</li>\n<li><p><code class=\"codespan\">string</code>: For example, <code class=\"codespan\">&#39;20%&#39;</code>, means that the outside radius is 20% of the viewport size (the little one between width and height of the chart container).</p>\n</li>\n<li><p><code class=\"codespan\">Array.&lt;number|string&gt;</code>: The first item specifies the inside radius, and the second item specifies the outside radius. Each item follows the definitions above.</p>\n</li>\n</ul>\n<p>You can set a large inner radius for a Donut chart.</p>\n","default":"[0, '75%']"},"seriesLayoutBy":{"type":["string"],"description":"<p>When <a href=\"#dataset\">dataset</a> is used, <code class=\"codespan\">seriesLayoutBy</code> specifies whether the column or the row of <code class=\"codespan\">dataset</code> is mapped to the series, namely, the series is &quot;layout&quot; on columns or rows. Optional values:</p>\n<ul>\n<li>&#39;column&#39;: by default, the columns of <code class=\"codespan\">dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>&#39;row&#39;:the rows of <code class=\"codespan\">dataset</code> are mapped to the series. In this case, each row represents a dimension.</li>\n</ul>\n<p>Check this <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=dataset-series-layout-by\" target=\"_blank\">example</a>.</p>\n","default":"'column'"},"datasetIndex":{"type":["number"],"description":"<p>If <a href=\"#series.data\">series.data</a> is not specified, and <a href=\"#dataset\">dataset</a> exists, the series will use <code class=\"codespan\">dataset</code>. <code class=\"codespan\">datasetIndex</code> specifies which dataset will be used.</p>\n","default":0},"dimensions":{"type":["Array"],"description":"<p><code class=\"codespan\">dimensions</code> can be used to define dimension info for <code class=\"codespan\">series.data</code> or <code class=\"codespan\">dataset.source</code>.</p>\n<p>Notice: if <a href=\"#dataset\">dataset</a> is used, we can provide dimension names in the first column/row of <a href=\"#dataset.source\">dataset.source</a>, and not need to specify <code class=\"codespan\">dimensions</code> here. But if <code class=\"codespan\">dimensions</code> is specified here, echarts will not retrieve dimension names from the first row/column of <code class=\"codespan\">dataset.source</code> any more.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\n    ]\n}\n</code></pre>\n<p>Each data item of <code class=\"codespan\">dimensions</code> can be:</p>\n<ul>\n<li><code class=\"codespan\">string</code>, for example, <code class=\"codespan\">&#39;someName&#39;</code>, which equals to <code class=\"codespan\">{name: &#39;someName&#39;}</code>.</li>\n<li><code class=\"codespan\">Object</code>, where the attributes can be:<ul>\n<li>name: <code class=\"codespan\">string</code>.</li>\n<li>type: <code class=\"codespan\">string</code>, supports:<ul>\n<li><code class=\"codespan\">number</code></li>\n<li><code class=\"codespan\">float</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array\" target=\"_blank\">Float64Array</a></li>\n<li><code class=\"codespan\">int</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array\" target=\"_blank\">Int32Array</a></li>\n<li><code class=\"codespan\">ordinal</code>, discrete value, which represents string generally.</li>\n<li><code class=\"codespan\">time</code>, time value, see <a href=\"#series.data\">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code class=\"codespan\">string</code>, generally used in tooltip for dimension display. If not specified, use <code class=\"codespan\">name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code class=\"codespan\">dimensions</code> is specified, the default <code class=\"codespan\">tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code class=\"codespan\">tooltip</code> will displayed only value horizontally.</p>\n"},"encode":{"type":["Object"],"description":"<p>Define what is encoded to for each dimension of <code class=\"codespan\">data</code>. For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n</code></pre>\n<p>When <a href=\"#series.dimensions\">dimensions</a> is used to defined name for a certain dimension, <code class=\"codespan\">encode</code> can refer the name directly. For example:</p>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<p>The basic structure of <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code> or some special reserved names like &quot;tooltip&quot;, &quot;itemName&quot; etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code class=\"codespan\">encode</code> listed as follows:</p>\n<pre><code class=\"lang-js\">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension &quot;product&quot; and &quot;score&quot; in the tooltip.\n    tooltip: [&#39;product&#39;, &#39;score&#39;]\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // &#39;pie&#39;, &#39;funnel&#39;, where data item name can be displayed in legend.\n    itemName: 3\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension &quot;score&quot; to the X axis.\n    x: [1, 5, &#39;score&#39;],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like &#39;pie&#39;, &#39;funnel&#39; etc.:\nencode: {\n    value: 3\n}\n</code></pre>\n<p>This is an <a href=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a> for <code class=\"codespan\">encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code class=\"codespan\">encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href=\"#dataZoom\">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class=\"lang-js\">var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            return {\n                type: &#39;circle&#39;,\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: &#39;blue&#39;\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n</code></pre>\n"},"data":{"type":["Array"],"description":"<p>Data array of  series, which can be a single data value, like:</p>\n<pre><code class=\"lang-js\">[12, 34, 56, 10, 23]\n</code></pre>\n<p>Or, if need extra dimensions for components like <a href=\"#visualMap\">visualMap</a> to map to graphic attributes like color, it can also be in the form of array. For example:</p>\n<pre><code class=\"lang-js\">[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]\n</code></pre>\n<p>In this case, we can assgin the second value in each array item to <a href=\"#visualMap\">visualMap</a> component.</p>\n<p>More likely, we need to assign name to each data item, in which case each item should be an object:</p>\n<pre><code class=\"lang-js\">[{\n    // name of date item\n    name: &#39;data1&#39;,\n    // value of date item is 8\n    value: 10\n}, {\n    name: &#39;data2&#39;,\n    value: 20\n}]\n</code></pre>\n<p>Each data item can be further customized:</p>\n<pre><code class=\"lang-js\">[{\n    name: &#39;data1&#39;,\n    value: 10\n}, {\n    // name of data item\n    name: &#39;data2&#39;,\n    value : 56,\n    // user-defined label format that only useful for this data item\n    label: {},\n    // user-defined special itemStyle that only useful for this data item\n    itemStyle:{}\n}]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>The name of data item.</p>\n"},"value":{"type":["number"],"description":"<p>Data value.</p>\n"},"selected":{"type":["boolean"],"description":"<p>Whether the data item is selected.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>The label configuration of a single sector.</p>\n","properties":{"show":{"type":["boolean"],"description":"","default":false},"position":{"type":["string"],"description":"<p>The position of label.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><p><code class=\"codespan\">&#39;outside&#39;</code></p>\n<p>  Outside of sectors of pie chart, which relates to corresponding sector through <a href=\"#series-pie.labelLine\">visual guide line</a>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p>  Inside the sectors of pie chart.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;inner&#39;</code> is the same with <code class=\"codespan\">&#39;inside&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;center&#39;</code></p>\n<p>  In the center of pie chart. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-doughnut\" target=\"_blank\">pie-doughnut example</a></p>\n</li>\n</ul>\n","default":"'outside'"},"rotate":{"type":["boolean","number"],"description":"<p>Label rotation.</p>\n<ul>\n<li>If <code class=\"codespan\">true</code>, layout label radically.</li>\n<li>If <code class=\"codespan\">number</code>, means degree that labels are rotated. From -90 degree to 90 degree. The negative value represents clockwise.</li>\n</ul>\n","default":null},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"labelLine":{"type":["Object"],"description":"<p>The style of visual guide line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the visual guide ine.</p>\n"},"length":{"type":["number"],"description":"<p>The length of the first segment of visual guide line.</p>\n"},"length2":{"type":["number"],"description":"<p>The length of the second segment of visual guide line.</p>\n"},"smooth":{"type":["boolean","number"],"description":"<p>Whether to smooth the visual guide line. It defaults to be <code class=\"codespan\">false</code> and can be set as <code class=\"codespan\">true</code> or the values from 0 to 1 which indicating the smoothness.</p>\n","default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of , <code class=\"codespan\">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"","default":false},"rotate":{"type":["boolean","number"],"description":"<p>Label rotation.</p>\n<ul>\n<li>If <code class=\"codespan\">true</code>, layout label radically.</li>\n<li>If <code class=\"codespan\">number</code>, means degree that labels are rotated. From -90 degree to 90 degree. The negative value represents clockwise.</li>\n</ul>\n","default":null},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"labelLine":{"type":["Object"],"description":"<p>The style of visual guide line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the visual guide ine.</p>\n"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-pie.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-pie.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-pie.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li>Assign coordinate according to container with <a href=\"#series-pie.markPoint.data.x\">x</a>, <a href=\"#series-pie.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["Object"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-pie.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class=\"codespan\">symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li>Assign coordinate according to container with <a href=\"#series-pie.markLine.data.0.x\">x</a>, <a href=\"#series-pie.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<pre><code>data: [\n    [\n        {\n            name: &#39;Mark line between two points&#39;,\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'starting point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'ending point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code class=\"codespan\">data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li>Specify the coordinate in screen coordinate system using <a href=\"#series-pie.markArea.data.0.x\">x</a>, <a href=\"#series-pie.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code class=\"codespan\">5</code>), or percent (e.g., the value is <code class=\"codespan\">&#39;35%&#39;</code>).</li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n    [\n        {\n            name: &#39;Mark area in two screen points&#39;,\n            x: 100,\n            y: 100\n        }, {\n            x: &#39;90%&#39;,\n            y: &#39;10%&#39;\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'start'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'end'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"animationType":{"type":["string"],"description":"<p>Initial animation type.</p>\n<ul>\n<li><code class=\"codespan\">&#39;expansion&#39;</code> Default expansion animation.</li>\n<li><code class=\"codespan\">&#39;scale&#39;</code> Scale animation. You can use it with <code class=\"codespan\">animationEasing=&#39;elasticOut&#39;</code> to have popup effect.</li>\n</ul>\n","default":"'expansion'"},"animationTypeUpdate":{"type":["string"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.4.0</code></p>\n</blockquote>\n<p>Animation type when data updates.</p>\n<ul>\n<li><code class=\"codespan\">&#39;transition&#39;</code> Changing start and end angle of each sector from the old value to new value.</li>\n<li><code class=\"codespan\">&#39;expansion&#39;</code> The whole pie expands again.</li>\n</ul>\n","default":"'transition'"},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p>Scatter (bubble) chart . The scatter chart in <a href=\"#grid\">rectangular coordinate</a> could be used to present the relation between  <code class=\"codespan\">x</code> and <code class=\"codespan\">y</code>. If data have multiple dimensions, the values of the other dimensions can be visualized through <a href=\"#series-scatter.symbol\">symbol</a> with various sizes and colors, which becomes a bubble chart. These can be done by using with <a href=\"#visualMap\">visualMap</a> component.</p>\n<p>It could be used with <a href=\"#grid\">rectangular coordinate</a> and <a href=\"#polar\">polar coordinate</a> and <a href=\"#geo\">geographical coordinate</a>.</p>\n","properties":{"type":{"type":["string"],"description":"","default":"'scatter'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;cartesian2d&#39;</code></p>\n<p>  Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-bar.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-bar.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">&#39;polar&#39;</code></p>\n<p>  Use polar coordinates, with <a href=\"#series-bar.polarIndex\">polarIndex</a> to assign the corresponding polar coordinate component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">&#39;geo&#39;</code></p>\n<p>  Use geographic coordinate, with <a href=\"#series-bar.geoIndex\">geoIndex</a> to assign the corresponding geographic coordinate components.</p>\n</li>\n</ul>\n","default":"'cartesian2d'"},"xAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#xAxis\">x axis</a> to combine with, which is  useful for multiple x axes in one chart.</p>\n","default":0},"yAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#yAxis\">y axis</a> to combine with, which is  useful for multiple y axes in one chart.</p>\n","default":0},"polarIndex":{"type":["number"],"description":"<p>Index of <a href=\"#polar\">polar coordinate</a> to combine with, which is useful for multiple polar axes in one chart.</p>\n","default":0},"geoIndex":{"type":["number"],"description":"<p>Index of <a href=\"#geo\">geographic coordinate</a> to combine with, which is useful for multiple geographic axes in one chart.</p>\n","default":0},"calendarIndex":{"type":["number"],"description":"<p>Index of <a href=\"#calendar\">calendar coordinates</a> to combine with, which is useful for multiple calendar coordinates in one chart.</p>\n","default":0},"hoverAnimation":{"type":["boolean"],"description":"<p>Whether to enable the animation effect when mouse is on the symbol.</p>\n"},"legendHoverLink":{"type":["boolean"],"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n","default":true},"symbol":{"type":["string","Function"],"description":"<p>Symbol of scatter.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-scatter.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'circle'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>scatter symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-scatter.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":10},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of scatter symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-scatter.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of scatter symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"large":{"type":["boolean"],"description":"<p>Whether to enable the optimization of large-scale data. It could be set when large data causes performance problem.</p>\n<p>After being enabled, <code class=\"codespan\">largeThreshold</code> can be used to indicate the minimum number for turning on the optimization.</p>\n<p>But when the optimization enabled, the style of single data item can&#39;t be customized any more.</p>\n","default":false},"largeThreshold":{"type":["number"],"description":"<p>The threshold enabling the drawing optimization.</p>\n","default":2000},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n","default":"'pointer'"},"label":{"type":["Object"],"description":"<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of , <code class=\"codespan\">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"color":{"type":["Color","Function"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n<p>Supports callback functions, in the form of:</p>\n<pre><code class=\"lang-js\">(params: Object) =&gt; Color\n</code></pre>\n<p>Input parameters are <code class=\"codespan\">seriesIndex</code>, <code class=\"codespan\">dataIndex</code>, <code class=\"codespan\">data</code>, <code class=\"codespan\">value</code>, and etc. of data item.</p>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":0.8}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"progressive":{"type":["number"],"description":"<p><code class=\"codespan\">progressive</code> specifies the amount of graphic elements that can be rendered within a frame (about 16ms) if &quot;progressive rendering&quot; enabled.</p>\n<p>When data amount is from thousand to more than 10 million, it will take too long time to render all of the graphic elements. Since ECharts 4, &quot;progressive rendering&quot; is supported in its workflow, which processes and renders data chunk by chunk alone with each frame, avoiding to block the UI thread of the browser.</p>\n<p>Set <code class=\"codespan\">progressive: 0</code> to disable progressive permanently. By default, progressive is auto-enabled when data amount is bigger than <code class=\"codespan\">progressiveThreshold</code>.</p>\n","default":400},"progressiveThreshold":{"type":["number"],"description":"<p>If current data amount is over the threshold, &quot;progressive rendering&quot; is enabled.</p>\n","default":3000},"dimensions":{"type":["Array"],"description":"<p><code class=\"codespan\">dimensions</code> can be used to define dimension info for <code class=\"codespan\">series.data</code> or <code class=\"codespan\">dataset.source</code>.</p>\n<p>Notice: if <a href=\"#dataset\">dataset</a> is used, we can provide dimension names in the first column/row of <a href=\"#dataset.source\">dataset.source</a>, and not need to specify <code class=\"codespan\">dimensions</code> here. But if <code class=\"codespan\">dimensions</code> is specified here, echarts will not retrieve dimension names from the first row/column of <code class=\"codespan\">dataset.source</code> any more.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\n    ]\n}\n</code></pre>\n<p>Each data item of <code class=\"codespan\">dimensions</code> can be:</p>\n<ul>\n<li><code class=\"codespan\">string</code>, for example, <code class=\"codespan\">&#39;someName&#39;</code>, which equals to <code class=\"codespan\">{name: &#39;someName&#39;}</code>.</li>\n<li><code class=\"codespan\">Object</code>, where the attributes can be:<ul>\n<li>name: <code class=\"codespan\">string</code>.</li>\n<li>type: <code class=\"codespan\">string</code>, supports:<ul>\n<li><code class=\"codespan\">number</code></li>\n<li><code class=\"codespan\">float</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array\" target=\"_blank\">Float64Array</a></li>\n<li><code class=\"codespan\">int</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array\" target=\"_blank\">Int32Array</a></li>\n<li><code class=\"codespan\">ordinal</code>, discrete value, which represents string generally.</li>\n<li><code class=\"codespan\">time</code>, time value, see <a href=\"#series.data\">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code class=\"codespan\">string</code>, generally used in tooltip for dimension display. If not specified, use <code class=\"codespan\">name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code class=\"codespan\">dimensions</code> is specified, the default <code class=\"codespan\">tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code class=\"codespan\">tooltip</code> will displayed only value horizontally.</p>\n"},"encode":{"type":["Object"],"description":"<p>Define what is encoded to for each dimension of <code class=\"codespan\">data</code>. For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n</code></pre>\n<p>When <a href=\"#series.dimensions\">dimensions</a> is used to defined name for a certain dimension, <code class=\"codespan\">encode</code> can refer the name directly. For example:</p>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<p>The basic structure of <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code> or some special reserved names like &quot;tooltip&quot;, &quot;itemName&quot; etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code class=\"codespan\">encode</code> listed as follows:</p>\n<pre><code class=\"lang-js\">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension &quot;product&quot; and &quot;score&quot; in the tooltip.\n    tooltip: [&#39;product&#39;, &#39;score&#39;]\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // &#39;pie&#39;, &#39;funnel&#39;, where data item name can be displayed in legend.\n    itemName: 3\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension &quot;score&quot; to the X axis.\n    x: [1, 5, &#39;score&#39;],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like &#39;pie&#39;, &#39;funnel&#39; etc.:\nencode: {\n    value: 3\n}\n</code></pre>\n<p>This is an <a href=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a> for <code class=\"codespan\">encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code class=\"codespan\">encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href=\"#dataZoom\">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class=\"lang-js\">var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            return {\n                type: &#39;circle&#39;,\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: &#39;blue&#39;\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n</code></pre>\n"},"seriesLayoutBy":{"type":["string"],"description":"<p>When <a href=\"#dataset\">dataset</a> is used, <code class=\"codespan\">seriesLayoutBy</code> specifies whether the column or the row of <code class=\"codespan\">dataset</code> is mapped to the series, namely, the series is &quot;layout&quot; on columns or rows. Optional values:</p>\n<ul>\n<li>&#39;column&#39;: by default, the columns of <code class=\"codespan\">dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>&#39;row&#39;:the rows of <code class=\"codespan\">dataset</code> are mapped to the series. In this case, each row represents a dimension.</li>\n</ul>\n<p>Check this <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=dataset-series-layout-by\" target=\"_blank\">example</a>.</p>\n","default":"'column'"},"datasetIndex":{"type":["number"],"description":"<p>If <a href=\"#series.data\">series.data</a> is not specified, and <a href=\"#dataset\">dataset</a> exists, the series will use <code class=\"codespan\">dataset</code>. <code class=\"codespan\">datasetIndex</code> specifies which dataset will be used.</p>\n","default":0},"data":{"type":["Array"],"description":"<p>Data array of series, which can be in the following forms:</p>\n<p>Notice, if no <code class=\"codespan\">data</code> specified in series, and there is <a href=\"#dataset\">dataset</a> in option, series will use the first <a href=\"#dataset\">dataset</a> as its datasource. If <code class=\"codespan\">data</code> has been specified, <a href=\"#dataset\">dataset</a> will not used.</p>\n<p><code class=\"codespan\">series.datasetIndex</code> can be used to specify other <a href=\"#dataset\">dataset</a>.</p>\n<p>Basically, data is represented by a two-dimension array, like the example below, where each column is named as a &quot;dimension&quot;.</p>\n<pre><code class=\"lang-js\">series: [{\n    data: [\n        // dimX   dimY   other dimensions ...\n        [  3.4,    4.5,   15,   43],\n        [  4.2,    2.3,   20,   91],\n        [  10.8,   9.5,   30,   18],\n        [  7.2,    8.8,   18,   57]\n    ]\n}]\n</code></pre>\n<ul>\n<li>In <a href=\"#grid\">cartesian (grid)</a>, &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href=\"#xAxis\">xAxis</a> and <a href=\"#yAxis\">yAxis</a> respectively.</li>\n<li>In <a href=\"#polar\">polar</a> &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href=\"#radiusAxis\">radiusAxis</a> 和 <a href=\"#anbleAxis\">angleAxis</a> respectively.</li>\n<li>Other dimensions are optional, which can be used in other places. For example:<ul>\n<li><a href=\"#visualMap\">visualMap</a> can map one or more dimensions to visual (color, symbol size ...).</li>\n<li><a href=\"#series.symbolSize\">series.symbolSize</a> can be set as a callback function, where symbol size can be calculated by values of a certain dimension.</li>\n<li>Values in other dimensions can be shown by <a href=\"#tooltip.formatter\">tooltip.formatter</a> or <a href=\"#series.label.formatter\">series.label.formatter</a>.</li>\n</ul>\n</li>\n</ul>\n<p>Especially, when there is one and only one category axis (axis.type is <code class=\"codespan\">&#39;category&#39;</code>), data can be simply be represented by a one-dimension array, like:</p>\n<pre><code class=\"lang-js\">xAxis: {\n    data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;]\n},\nseries: [{\n    // Each item corresponds to each item in xAxis.data.\n    data: [23,  44,  55,  19]\n    // In fact, it is the simplification of the format below:\n    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n</code></pre>\n<p><br>\n<strong>Relationship between &quot;value&quot; and <a href=\"#xAxis.type\">axis.type</a></strong></p>\n<ul>\n<li><p>When a dimension corresponds to a value axis (axis.type is <code class=\"codespan\">&#39;value&#39;</code> or <code class=\"codespan\">&#39;log&#39;</code>):</p>\n<p>  The value can be a <code class=\"codespan\">number</code> (like <code class=\"codespan\">12</code>) (can also be a number in a <code class=\"codespan\">string</code> format, like <code class=\"codespan\">&#39;12&#39;</code>).</p>\n</li>\n<li><p>When a dimension corresponds to a category axis (axis.type is <code class=\"codespan\">&#39;category&#39;</code>):</p>\n<p>  The value should be the ordinal of the axis.data (based on <code class=\"codespan\">0</code>), the string value of the axis.data. For example:</p>\n<pre><code class=\"lang-js\">  xAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;]\n  },\n  yAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;, &#39;p&#39;, &#39;q&#39;]\n  },\n  series: [{\n      data: [\n          // xAxis      yAxis\n          [  0,           0,    2  ], // This point is located at xAxis: &#39;Monday&#39;, yAxis: &#39;a&#39;.\n          [  &#39;Thursday&#39;,  2,    1  ], // This point is located at xAxis: &#39;Thursday&#39;, yAxis: &#39;m&#39;.\n          [  2,          &#39;p&#39;,   2  ], // This point is located at xAxis: &#39;Wednesday&#39;, yAxis: &#39;p&#39;.\n          [  3,           3,    5  ]\n      ]\n  }]\n</code></pre>\n<p>  There is an example of double category axes: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-punchCard\" target=\"_blank\">Github Punchcard</a>.</p>\n</li>\n<li><p>When a dimension corresponds to a time axis (type is <code class=\"codespan\">&#39;time&#39;</code>), the value can be:</p>\n<ul>\n<li>a timestamp, like <code class=\"codespan\">1484141700832</code>, which represents a UTC time.</li>\n<li>a date string, in one of the formats below:<ul>\n<li>a subset of <a href=\"http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15\" target=\"_blank\">ISO 8601</a>, only including (all of these are treated as local time unless timezone is specified, which is consistent with <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>):<ul>\n<li>only part of year/month/date/time are specified: <code class=\"codespan\">&#39;2012-03&#39;</code>, <code class=\"codespan\">&#39;2012-03-01&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 05&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 05:06&#39;</code>.</li>\n<li>separated by <code class=\"codespan\">&quot;T&quot;</code> or a space: <code class=\"codespan\">&#39;2012-03-01T12:22:33.123&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 12:22:33.123&#39;</code>.</li>\n<li>timezone specified: <code class=\"codespan\">&#39;2012-03-01T12:22:33Z&#39;</code>, <code class=\"codespan\">&#39;2012-03-01T12:22:33+8000&#39;</code>, <code class=\"codespan\">&#39;2012-03-01T12:22:33-05:00&#39;</code>.</li>\n</ul>\n</li>\n<li>other date string format (all of these are treated as local time):\n<code class=\"codespan\">&#39;2012&#39;</code>, <code class=\"codespan\">&#39;2012-3-1&#39;</code>, <code class=\"codespan\">&#39;2012/3/1&#39;</code>, <code class=\"codespan\">&#39;2012/03/01&#39;</code>,\n<code class=\"codespan\">&#39;2009/6/12 2:00&#39;</code>, <code class=\"codespan\">&#39;2009/6/12 2:05:08&#39;</code>, <code class=\"codespan\">&#39;2009/6/12 2:05:08.123&#39;</code>.</li>\n</ul>\n</li>\n<li>a JavaScript Date instance created by user:<ul>\n<li>Caution, when using a data string to create a Date instance, <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">browser differences and inconsistencies</a> should be considered.</li>\n<li>For example: In chrome, <code class=\"codespan\">new Date(&#39;2012-01-01&#39;)</code> is treated as a Jan 1st 2012 in UTC, while <code class=\"codespan\">new Date(&#39;2012-1-1&#39;)</code> and <code class=\"codespan\">new Date(&#39;2012/01/01&#39;)</code> are treated as Jan 1st 2012 in local timezone. In safari <code class=\"codespan\">new Date(&#39;2012-1-1&#39;)</code> is not supported.</li>\n<li>So if you intent to perform <code class=\"codespan\">new Date(dateString)</code>, it is strongly recommended to use a time parse library (e.g., <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>), or use <code class=\"codespan\">echarts.number.parseDate</code>, or check <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">this</a>.</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<strong>Customize a data item:</strong></p>\n<p>When needing to customize a data item, it can be set as an object, where property <code class=\"codespan\">value</code> reprensent real value. For example:</p>\n<pre><code class=\"lang-js\">[\n    12,\n    24,\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    33\n]\n// Or\n[\n    [12, 332],\n    [24, 32],\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    [33, 31]\n]\n</code></pre>\n<p><br>\n<strong>Empty value:</strong></p>\n<p><code class=\"codespan\">&#39;-&#39;</code> or <code class=\"codespan\">null</code> or <code class=\"codespan\">undefined</code> or <code class=\"codespan\">NaN</code> can be used to describe that a data item does not exist (ps:<em>not exist</em> does not means its value is <code class=\"codespan\">0</code>).</p>\n<p>For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.</p>\n<p><br><br></p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>the name of data item.</p>\n"},"value":{"type":["Array"],"description":"<p>the value of data item.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of single data.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>single data symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of single data symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of single data symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"inside"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>the style setting about single data point(bubble).</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-scatter.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-scatter.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-scatter.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-scatter.markPoint.data.x\">x</a>, <a href=\"#series-scatter.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-scatter.markPoint.data.coord\">coord</a> attribute, in which <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-scatter.markPoint.data.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-scatter.markPoint.data.valueIndex\">valueIndex</a> or <a href=\"#series-scatter.markPoint.data.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n    {\n        name: &#39;maximum&#39;,\n        type: &#39;max&#39;\n    }, \n    {\n        name: &#39;coordinate&#39;,\n        coord: [10, 20]\n    }, {\n        name: &#39;fixed x position&#39;,\n        yAxis: 10,\n        x: &#39;90%&#39;\n    }, \n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Available when using <a href=\"#series-scatter.markPoint.data.type\">type</a> it is used to assign maximum value and minimum value in dimensions, it could be <code class=\"codespan\">0</code> (xAxis, radiusAxis), <code class=\"codespan\">1</code> (yAxis, angleAxis), and use the first value axis dimension by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-scatter.markPoint.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["Object"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-scatter.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class=\"codespan\">symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-scatter.markLine.data.0.x\">x</a>, <a href=\"#series-scatter.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-scatter.markLine.data.0.coord\">coord</a> attribute, in which <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-scatter.markLine.data.0.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-scatter.markLine.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-scatter.markLine.data.0.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n<li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code class=\"codespan\">xAxis</code> or <code class=\"codespan\">yAxis</code>. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a> for example.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p>You may also set the type of mark line through <code class=\"codespan\">type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code class=\"codespan\">valueIndex</code>.</p>\n<pre><code>data: [\n    {\n        name: &#39;average line&#39;,\n        // &#39;average&#39;, &#39;min&#39;, and &#39;max&#39; are supported\n        type: &#39;average&#39;\n    },\n    {\n        name: &#39;Horizontal line with Y value at 100&#39;,\n        yAxis: 100\n    },\n    [\n        {\n            // Use the same name with starting and ending point\n            name: &#39;Minimum to Maximum&#39;,\n            type: &#39;min&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n    [\n        {\n            name: &#39;Markline between two points&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [{\n        // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n        yAxis: &#39;max&#39;,\n        x: &#39;90%&#39;\n    }, {\n        type: &#39;max&#39;\n    }],\n    [\n        {\n            name: &#39;Mark line between two points&#39;,\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n<li><code class=\"codespan\">&#39;median&#39;</code> median value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-scatter.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-scatter.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'starting point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n<li><code class=\"codespan\">&#39;median&#39;</code> median value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-scatter.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-scatter.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'ending point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code class=\"codespan\">data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li><p>Specify the coordinate in screen coordinate system using <a href=\"#series-scatter.markArea.data.0.x\">x</a>, <a href=\"#series-scatter.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code class=\"codespan\">5</code>), or percent (e.g., the value is <code class=\"codespan\">&#39;35%&#39;</code>).</p>\n</li>\n<li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using\n<a href=\"#series-scatter.markArea.data.0.coord\">coord</a>, which can be also set as <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> (e.g, <code class=\"codespan\">coord: [23, &#39;min&#39;]</code>, or <code class=\"codespan\">coord: [&#39;average&#39;, &#39;max&#39;]</code>).</p>\n</li>\n</ol>\n<ol start=\"3\">\n<li>Locate the point on the min value or max value of <code class=\"codespan\">series.data</code> using <a href=\"#series-scatter.markArea.data.0.type\">type</a>, where <a href=\"#series-scatter.markArea.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-scatter.markPoint.data.0.valueDim\">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</li>\n<li>If in cartesian, you can only specify <code class=\"codespan\">xAxis</code> or <code class=\"codespan\">yAxis</code> to define a mark area based on only X or Y axis, see sample <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a></li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n\n    [\n        {\n            name: &#39;From average to max&#39;,\n            type: &#39;average&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n\n    [\n        {\n            name: &#39;Mark area between two points in data coordiantes&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [\n        {\n            name: &#39;From 60 to 80&#39;,\n            yAxis: 60\n        },\n        {\n            yAxis: 80\n        }\n    ], [\n        {\n            name: &#39;Mark area covers all data&#39;\n            coord: [&#39;min&#39;, &#39;min&#39;]\n        },\n        {\n            coord: [&#39;max&#39;, &#39;max&#39;]\n        }\n    ],\n    [\n        {\n            name: &#39;Mark area in two screen points&#39;,\n            x: 100,\n            y: 100\n        }, {\n            x: &#39;90%&#39;,\n            y: &#39;10%&#39;\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> max value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> min value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-scatter.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-scatter.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'start'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> max value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> min value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-scatter.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-scatter.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'end'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"clip":{"type":["boolean"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.4.0</code></p>\n</blockquote>\n<p>If clip the overflow on the coordinate system. Clip results varies between series:</p>\n<ul>\n<li>Scatter:Ignore the symbols exceeds the coordinate system. Not clip the elements.</li>\n<li>Bar:Clip all the overflowed. With bar width kept.</li>\n<li>Line:Clip the overflowed line.</li>\n<li>Lines: Clip all the overflowed.</li>\n<li>Candlestick: Ignore the elements exceeds the coordinate system.</li>\n<li>Custom: Clip all the olverflowed.</li>\n</ul>\n<p>All these series have default value <code class=\"codespan\">true</code> except custom series. Set it to <code class=\"codespan\">false</code> if you don&#39;t want to clip.</p>\n","default":true},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in scatter chart.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in scatter chart, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p>The scatter (bubble) graph with ripple animation. The special animation effect can visually highlights some data.</p>\n<p><strong>Tip:</strong>  The effects of map was achieved through markPoint in ECharts 2.x. However, in  ECharts 3, effectScatter on geographic coordinate is recommended for achieving that effects of map.</p>\n","properties":{"type":{"type":["string"],"description":"","default":"'effectScatter'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"legendHoverLink":{"type":["boolean"],"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n","default":true},"effectType":{"type":["string"],"description":"<p>Type of effect. Only ripple effect of <code class=\"codespan\">&#39;ripple&#39;</code> is supported currently.</p>\n","default":"'ripple'"},"showEffectOn":{"type":["string"],"description":"<p>When to show the effect.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;render&#39;</code> Show the effect when rendering is done.</li>\n<li><code class=\"codespan\">&#39;emphasis&#39;</code> Show the effect when it is highlight (hover).</li>\n</ul>\n","default":"'render'"},"rippleEffect":{"type":["Object"],"description":"<p>Related configurations about ripple effect.</p>\n","properties":{"color":{"type":["string"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.4.0</code></p>\n</blockquote>\n<p>Color of the ripple rings. The default value is the color of scatter.</p>\n"},"period":{"type":["number"],"description":"<p>The period duration of animation, in seconds.</p>\n","default":4},"scale":{"type":["number"],"description":"<p>The maximum zooming scale of ripples in animation.</p>\n","default":2.5},"brushType":{"type":["string"],"description":"<p>The brush type for ripples. options: <code class=\"codespan\">&#39;stroke&#39;</code> and <code class=\"codespan\">&#39;fill&#39;</code>.</p>\n","default":"'fill'"}}},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;cartesian2d&#39;</code></p>\n<p>  Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-bar.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-bar.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">&#39;polar&#39;</code></p>\n<p>  Use polar coordinates, with <a href=\"#series-bar.polarIndex\">polarIndex</a> to assign the corresponding polar coordinate component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">&#39;geo&#39;</code></p>\n<p>  Use geographic coordinate, with <a href=\"#series-bar.geoIndex\">geoIndex</a> to assign the corresponding geographic coordinate components.</p>\n</li>\n</ul>\n","default":"'cartesian2d'"},"xAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#xAxis\">x axis</a> to combine with, which is  useful for multiple x axes in one chart.</p>\n","default":0},"yAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#yAxis\">y axis</a> to combine with, which is  useful for multiple y axes in one chart.</p>\n","default":0},"polarIndex":{"type":["number"],"description":"<p>Index of <a href=\"#polar\">polar coordinate</a> to combine with, which is useful for multiple polar axes in one chart.</p>\n","default":0},"geoIndex":{"type":["number"],"description":"<p>Index of <a href=\"#geo\">geographic coordinate</a> to combine with, which is useful for multiple geographic axes in one chart.</p>\n","default":0},"calendarIndex":{"type":["number"],"description":"<p>Index of <a href=\"#calendar\">calendar coordinates</a> to combine with, which is useful for multiple calendar coordinates in one chart.</p>\n","default":0},"symbol":{"type":["string","Function"],"description":"<p>Symbol of effectScatter.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-effectScatter.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'circle'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>effectScatter symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-effectScatter.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":10},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of effectScatter symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-effectScatter.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of effectScatter symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n","default":"'pointer'"},"label":{"type":["Object"],"description":"<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of , <code class=\"codespan\">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"color":{"type":["Color","Function"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n<p>Supports callback functions, in the form of:</p>\n<pre><code class=\"lang-js\">(params: Object) =&gt; Color\n</code></pre>\n<p>Input parameters are <code class=\"codespan\">seriesIndex</code>, <code class=\"codespan\">dataIndex</code>, <code class=\"codespan\">data</code>, <code class=\"codespan\">value</code>, and etc. of data item.</p>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color","Function"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n<p>Supports callback functions, in the form of:</p>\n<pre><code class=\"lang-js\">(params: Object) =&gt; Color\n</code></pre>\n<p>Input parameters are <code class=\"codespan\">seriesIndex</code>, <code class=\"codespan\">dataIndex</code>, <code class=\"codespan\">data</code>, <code class=\"codespan\">value</code>, and etc. of data item.</p>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"seriesLayoutBy":{"type":["string"],"description":"<p>When <a href=\"#dataset\">dataset</a> is used, <code class=\"codespan\">seriesLayoutBy</code> specifies whether the column or the row of <code class=\"codespan\">dataset</code> is mapped to the series, namely, the series is &quot;layout&quot; on columns or rows. Optional values:</p>\n<ul>\n<li>&#39;column&#39;: by default, the columns of <code class=\"codespan\">dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>&#39;row&#39;:the rows of <code class=\"codespan\">dataset</code> are mapped to the series. In this case, each row represents a dimension.</li>\n</ul>\n<p>Check this <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=dataset-series-layout-by\" target=\"_blank\">example</a>.</p>\n","default":"'column'"},"datasetIndex":{"type":["number"],"description":"<p>If <a href=\"#series.data\">series.data</a> is not specified, and <a href=\"#dataset\">dataset</a> exists, the series will use <code class=\"codespan\">dataset</code>. <code class=\"codespan\">datasetIndex</code> specifies which dataset will be used.</p>\n","default":0},"dimensions":{"type":["Array"],"description":"<p><code class=\"codespan\">dimensions</code> can be used to define dimension info for <code class=\"codespan\">series.data</code> or <code class=\"codespan\">dataset.source</code>.</p>\n<p>Notice: if <a href=\"#dataset\">dataset</a> is used, we can provide dimension names in the first column/row of <a href=\"#dataset.source\">dataset.source</a>, and not need to specify <code class=\"codespan\">dimensions</code> here. But if <code class=\"codespan\">dimensions</code> is specified here, echarts will not retrieve dimension names from the first row/column of <code class=\"codespan\">dataset.source</code> any more.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\n    ]\n}\n</code></pre>\n<p>Each data item of <code class=\"codespan\">dimensions</code> can be:</p>\n<ul>\n<li><code class=\"codespan\">string</code>, for example, <code class=\"codespan\">&#39;someName&#39;</code>, which equals to <code class=\"codespan\">{name: &#39;someName&#39;}</code>.</li>\n<li><code class=\"codespan\">Object</code>, where the attributes can be:<ul>\n<li>name: <code class=\"codespan\">string</code>.</li>\n<li>type: <code class=\"codespan\">string</code>, supports:<ul>\n<li><code class=\"codespan\">number</code></li>\n<li><code class=\"codespan\">float</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array\" target=\"_blank\">Float64Array</a></li>\n<li><code class=\"codespan\">int</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array\" target=\"_blank\">Int32Array</a></li>\n<li><code class=\"codespan\">ordinal</code>, discrete value, which represents string generally.</li>\n<li><code class=\"codespan\">time</code>, time value, see <a href=\"#series.data\">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code class=\"codespan\">string</code>, generally used in tooltip for dimension display. If not specified, use <code class=\"codespan\">name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code class=\"codespan\">dimensions</code> is specified, the default <code class=\"codespan\">tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code class=\"codespan\">tooltip</code> will displayed only value horizontally.</p>\n"},"encode":{"type":["Object"],"description":"<p>Define what is encoded to for each dimension of <code class=\"codespan\">data</code>. For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n</code></pre>\n<p>When <a href=\"#series.dimensions\">dimensions</a> is used to defined name for a certain dimension, <code class=\"codespan\">encode</code> can refer the name directly. For example:</p>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<p>The basic structure of <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code> or some special reserved names like &quot;tooltip&quot;, &quot;itemName&quot; etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code class=\"codespan\">encode</code> listed as follows:</p>\n<pre><code class=\"lang-js\">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension &quot;product&quot; and &quot;score&quot; in the tooltip.\n    tooltip: [&#39;product&#39;, &#39;score&#39;]\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // &#39;pie&#39;, &#39;funnel&#39;, where data item name can be displayed in legend.\n    itemName: 3\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension &quot;score&quot; to the X axis.\n    x: [1, 5, &#39;score&#39;],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like &#39;pie&#39;, &#39;funnel&#39; etc.:\nencode: {\n    value: 3\n}\n</code></pre>\n<p>This is an <a href=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a> for <code class=\"codespan\">encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code class=\"codespan\">encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href=\"#dataZoom\">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class=\"lang-js\">var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            return {\n                type: &#39;circle&#39;,\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: &#39;blue&#39;\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n</code></pre>\n"},"data":{"type":["Array"],"description":"<p>Data array of series, which can be in the following forms:</p>\n<p>Notice, if no <code class=\"codespan\">data</code> specified in series, and there is <a href=\"#dataset\">dataset</a> in option, series will use the first <a href=\"#dataset\">dataset</a> as its datasource. If <code class=\"codespan\">data</code> has been specified, <a href=\"#dataset\">dataset</a> will not used.</p>\n<p><code class=\"codespan\">series.datasetIndex</code> can be used to specify other <a href=\"#dataset\">dataset</a>.</p>\n<p>Basically, data is represented by a two-dimension array, like the example below, where each column is named as a &quot;dimension&quot;.</p>\n<pre><code class=\"lang-js\">series: [{\n    data: [\n        // dimX   dimY   other dimensions ...\n        [  3.4,    4.5,   15,   43],\n        [  4.2,    2.3,   20,   91],\n        [  10.8,   9.5,   30,   18],\n        [  7.2,    8.8,   18,   57]\n    ]\n}]\n</code></pre>\n<ul>\n<li>In <a href=\"#grid\">cartesian (grid)</a>, &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href=\"#xAxis\">xAxis</a> and <a href=\"#yAxis\">yAxis</a> respectively.</li>\n<li>In <a href=\"#polar\">polar</a> &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href=\"#radiusAxis\">radiusAxis</a> 和 <a href=\"#anbleAxis\">angleAxis</a> respectively.</li>\n<li>Other dimensions are optional, which can be used in other places. For example:<ul>\n<li><a href=\"#visualMap\">visualMap</a> can map one or more dimensions to visual (color, symbol size ...).</li>\n<li><a href=\"#series.symbolSize\">series.symbolSize</a> can be set as a callback function, where symbol size can be calculated by values of a certain dimension.</li>\n<li>Values in other dimensions can be shown by <a href=\"#tooltip.formatter\">tooltip.formatter</a> or <a href=\"#series.label.formatter\">series.label.formatter</a>.</li>\n</ul>\n</li>\n</ul>\n<p>Especially, when there is one and only one category axis (axis.type is <code class=\"codespan\">&#39;category&#39;</code>), data can be simply be represented by a one-dimension array, like:</p>\n<pre><code class=\"lang-js\">xAxis: {\n    data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;]\n},\nseries: [{\n    // Each item corresponds to each item in xAxis.data.\n    data: [23,  44,  55,  19]\n    // In fact, it is the simplification of the format below:\n    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n</code></pre>\n<p><br>\n<strong>Relationship between &quot;value&quot; and <a href=\"#xAxis.type\">axis.type</a></strong></p>\n<ul>\n<li><p>When a dimension corresponds to a value axis (axis.type is <code class=\"codespan\">&#39;value&#39;</code> or <code class=\"codespan\">&#39;log&#39;</code>):</p>\n<p>  The value can be a <code class=\"codespan\">number</code> (like <code class=\"codespan\">12</code>) (can also be a number in a <code class=\"codespan\">string</code> format, like <code class=\"codespan\">&#39;12&#39;</code>).</p>\n</li>\n<li><p>When a dimension corresponds to a category axis (axis.type is <code class=\"codespan\">&#39;category&#39;</code>):</p>\n<p>  The value should be the ordinal of the axis.data (based on <code class=\"codespan\">0</code>), the string value of the axis.data. For example:</p>\n<pre><code class=\"lang-js\">  xAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;]\n  },\n  yAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;, &#39;p&#39;, &#39;q&#39;]\n  },\n  series: [{\n      data: [\n          // xAxis      yAxis\n          [  0,           0,    2  ], // This point is located at xAxis: &#39;Monday&#39;, yAxis: &#39;a&#39;.\n          [  &#39;Thursday&#39;,  2,    1  ], // This point is located at xAxis: &#39;Thursday&#39;, yAxis: &#39;m&#39;.\n          [  2,          &#39;p&#39;,   2  ], // This point is located at xAxis: &#39;Wednesday&#39;, yAxis: &#39;p&#39;.\n          [  3,           3,    5  ]\n      ]\n  }]\n</code></pre>\n<p>  There is an example of double category axes: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-punchCard\" target=\"_blank\">Github Punchcard</a>.</p>\n</li>\n<li><p>When a dimension corresponds to a time axis (type is <code class=\"codespan\">&#39;time&#39;</code>), the value can be:</p>\n<ul>\n<li>a timestamp, like <code class=\"codespan\">1484141700832</code>, which represents a UTC time.</li>\n<li>a date string, in one of the formats below:<ul>\n<li>a subset of <a href=\"http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15\" target=\"_blank\">ISO 8601</a>, only including (all of these are treated as local time unless timezone is specified, which is consistent with <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>):<ul>\n<li>only part of year/month/date/time are specified: <code class=\"codespan\">&#39;2012-03&#39;</code>, <code class=\"codespan\">&#39;2012-03-01&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 05&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 05:06&#39;</code>.</li>\n<li>separated by <code class=\"codespan\">&quot;T&quot;</code> or a space: <code class=\"codespan\">&#39;2012-03-01T12:22:33.123&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 12:22:33.123&#39;</code>.</li>\n<li>timezone specified: <code class=\"codespan\">&#39;2012-03-01T12:22:33Z&#39;</code>, <code class=\"codespan\">&#39;2012-03-01T12:22:33+8000&#39;</code>, <code class=\"codespan\">&#39;2012-03-01T12:22:33-05:00&#39;</code>.</li>\n</ul>\n</li>\n<li>other date string format (all of these are treated as local time):\n<code class=\"codespan\">&#39;2012&#39;</code>, <code class=\"codespan\">&#39;2012-3-1&#39;</code>, <code class=\"codespan\">&#39;2012/3/1&#39;</code>, <code class=\"codespan\">&#39;2012/03/01&#39;</code>,\n<code class=\"codespan\">&#39;2009/6/12 2:00&#39;</code>, <code class=\"codespan\">&#39;2009/6/12 2:05:08&#39;</code>, <code class=\"codespan\">&#39;2009/6/12 2:05:08.123&#39;</code>.</li>\n</ul>\n</li>\n<li>a JavaScript Date instance created by user:<ul>\n<li>Caution, when using a data string to create a Date instance, <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">browser differences and inconsistencies</a> should be considered.</li>\n<li>For example: In chrome, <code class=\"codespan\">new Date(&#39;2012-01-01&#39;)</code> is treated as a Jan 1st 2012 in UTC, while <code class=\"codespan\">new Date(&#39;2012-1-1&#39;)</code> and <code class=\"codespan\">new Date(&#39;2012/01/01&#39;)</code> are treated as Jan 1st 2012 in local timezone. In safari <code class=\"codespan\">new Date(&#39;2012-1-1&#39;)</code> is not supported.</li>\n<li>So if you intent to perform <code class=\"codespan\">new Date(dateString)</code>, it is strongly recommended to use a time parse library (e.g., <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>), or use <code class=\"codespan\">echarts.number.parseDate</code>, or check <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">this</a>.</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<strong>Customize a data item:</strong></p>\n<p>When needing to customize a data item, it can be set as an object, where property <code class=\"codespan\">value</code> reprensent real value. For example:</p>\n<pre><code class=\"lang-js\">[\n    12,\n    24,\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    33\n]\n// Or\n[\n    [12, 332],\n    [24, 32],\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    [33, 31]\n]\n</code></pre>\n<p><br>\n<strong>Empty value:</strong></p>\n<p><code class=\"codespan\">&#39;-&#39;</code> or <code class=\"codespan\">null</code> or <code class=\"codespan\">undefined</code> or <code class=\"codespan\">NaN</code> can be used to describe that a data item does not exist (ps:<em>not exist</em> does not means its value is <code class=\"codespan\">0</code>).</p>\n<p>For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.</p>\n<p><br><br></p>\n","items":{"type":"Object","properties":{"symbol":{"type":["string"],"description":"<p>Symbol of single data.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>","default":"'circle'"},"symbolSize":{"type":["number","Array"],"description":"<p>single data symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n","default":4},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of single data symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of single data symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"inside"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-effectScatter.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-effectScatter.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-effectScatter.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-effectScatter.markPoint.data.x\">x</a>, <a href=\"#series-effectScatter.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-effectScatter.markPoint.data.coord\">coord</a> attribute, in which <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-effectScatter.markPoint.data.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-effectScatter.markPoint.data.valueIndex\">valueIndex</a> or <a href=\"#series-effectScatter.markPoint.data.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n    {\n        name: &#39;maximum&#39;,\n        type: &#39;max&#39;\n    }, \n    {\n        name: &#39;coordinate&#39;,\n        coord: [10, 20]\n    }, {\n        name: &#39;fixed x position&#39;,\n        yAxis: 10,\n        x: &#39;90%&#39;\n    }, \n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Available when using <a href=\"#series-effectScatter.markPoint.data.type\">type</a> it is used to assign maximum value and minimum value in dimensions, it could be <code class=\"codespan\">0</code> (xAxis, radiusAxis), <code class=\"codespan\">1</code> (yAxis, angleAxis), and use the first value axis dimension by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-effectScatter.markPoint.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["Object"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-effectScatter.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class=\"codespan\">symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-effectScatter.markLine.data.0.x\">x</a>, <a href=\"#series-effectScatter.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-effectScatter.markLine.data.0.coord\">coord</a> attribute, in which <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-effectScatter.markLine.data.0.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-effectScatter.markLine.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-effectScatter.markLine.data.0.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n<li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code class=\"codespan\">xAxis</code> or <code class=\"codespan\">yAxis</code>. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a> for example.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p>You may also set the type of mark line through <code class=\"codespan\">type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code class=\"codespan\">valueIndex</code>.</p>\n<pre><code>data: [\n    {\n        name: &#39;average line&#39;,\n        // &#39;average&#39;, &#39;min&#39;, and &#39;max&#39; are supported\n        type: &#39;average&#39;\n    },\n    {\n        name: &#39;Horizontal line with Y value at 100&#39;,\n        yAxis: 100\n    },\n    [\n        {\n            // Use the same name with starting and ending point\n            name: &#39;Minimum to Maximum&#39;,\n            type: &#39;min&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n    [\n        {\n            name: &#39;Markline between two points&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [{\n        // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n        yAxis: &#39;max&#39;,\n        x: &#39;90%&#39;\n    }, {\n        type: &#39;max&#39;\n    }],\n    [\n        {\n            name: &#39;Mark line between two points&#39;,\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n<li><code class=\"codespan\">&#39;median&#39;</code> median value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-effectScatter.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-effectScatter.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'starting point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n<li><code class=\"codespan\">&#39;median&#39;</code> median value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-effectScatter.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-effectScatter.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'ending point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code class=\"codespan\">data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li><p>Specify the coordinate in screen coordinate system using <a href=\"#series-effectScatter.markArea.data.0.x\">x</a>, <a href=\"#series-effectScatter.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code class=\"codespan\">5</code>), or percent (e.g., the value is <code class=\"codespan\">&#39;35%&#39;</code>).</p>\n</li>\n<li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using\n<a href=\"#series-effectScatter.markArea.data.0.coord\">coord</a>, which can be also set as <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> (e.g, <code class=\"codespan\">coord: [23, &#39;min&#39;]</code>, or <code class=\"codespan\">coord: [&#39;average&#39;, &#39;max&#39;]</code>).</p>\n</li>\n</ol>\n<ol start=\"3\">\n<li>Locate the point on the min value or max value of <code class=\"codespan\">series.data</code> using <a href=\"#series-effectScatter.markArea.data.0.type\">type</a>, where <a href=\"#series-effectScatter.markArea.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-effectScatter.markPoint.data.0.valueDim\">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</li>\n<li>If in cartesian, you can only specify <code class=\"codespan\">xAxis</code> or <code class=\"codespan\">yAxis</code> to define a mark area based on only X or Y axis, see sample <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a></li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n\n    [\n        {\n            name: &#39;From average to max&#39;,\n            type: &#39;average&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n\n    [\n        {\n            name: &#39;Mark area between two points in data coordiantes&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [\n        {\n            name: &#39;From 60 to 80&#39;,\n            yAxis: 60\n        },\n        {\n            yAxis: 80\n        }\n    ], [\n        {\n            name: &#39;Mark area covers all data&#39;\n            coord: [&#39;min&#39;, &#39;min&#39;]\n        },\n        {\n            coord: [&#39;max&#39;, &#39;max&#39;]\n        }\n    ],\n    [\n        {\n            name: &#39;Mark area in two screen points&#39;,\n            x: 100,\n            y: 100\n        }, {\n            x: &#39;90%&#39;,\n            y: &#39;10%&#39;\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> max value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> min value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-effectScatter.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-effectScatter.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'start'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> max value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> min value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-effectScatter.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-effectScatter.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'end'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong>radar chart</strong></p>\n<p>Radar chart is mainly used to show multi-variable data, such as the analysis of a football player&#39;s varied attributes. It relies <a href=\"#radar\">radar</a> component.</p>\n<p>Here is the example of AQI data which is presented in radar chart.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=radar-aqi&edit=1&reset=1\" width=\"600\" height=\"500\"><iframe />\n\n\n","properties":{"type":{"type":["string"],"description":"","default":"'radar'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"radarIndex":{"type":["number"],"description":"<p>Index of <a href=\"#radar\">radar</a> component that radar chart uses.</p>\n"},"symbol":{"type":["string","Function"],"description":"<p>Symbol of radar.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-radar.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'circle'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>radar symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-radar.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":4},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of radar symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-radar.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of radar symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"label":{"type":["Object"],"description":"<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'top'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Item style of the inflection point of the lines.</p>\n","properties":{"color":{"type":["Color","Function"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n<p>Supports callback functions, in the form of:</p>\n<pre><code class=\"lang-js\">(params: Object) =&gt; Color\n</code></pre>\n<p>Input parameters are <code class=\"codespan\">seriesIndex</code>, <code class=\"codespan\">dataIndex</code>, <code class=\"codespan\">data</code>, <code class=\"codespan\">value</code>, and etc. of data item.</p>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"lineStyle":{"type":["Object"],"description":"<p>Line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"areaStyle":{"type":["Object"],"description":"<p>Area filling style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"areaStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>The data in radar chart is multi-variable (dimension). Here is an example:</p>\n<pre><code class=\"lang-js\">data : [\n    {\n        value : [4300, 10000, 28000, 35000, 50000, 19000],\n        name : &#39;Allocated Budget&#39;\n    },\n    {\n        value : [5000, 14000, 28000, 31000, 42000, 21000],\n        name : &#39;Actual Spending&#39;\n    }\n]\n</code></pre>\n<p>Among them, <code class=\"codespan\">value</code> item array contains data that is corresponding to <a href=\"#radar.indicator\">radar.indicator</a>.</p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Data item name</p>\n"},"value":{"type":["number"],"description":"<p>Numerical value of a single data item.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of single data.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>","default":"'circle'"},"symbolSize":{"type":["number","Array"],"description":"<p>single data symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n","default":4},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of single data symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of single data symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"label":{"type":["Object"],"description":"<p>Style setting of the text on single inflection point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"top"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style setting of the symbol on single inflection point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Bar color. </p>\n","default":"auto"},"borderColor":{"type":["Color"],"description":"<p>The border color of bar.</p>\n","default":"'#000'"},"borderWidth":{"type":["number"],"description":"<p>The border width of bar. defaults to have no border.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"lineStyle":{"type":["Object"],"description":"<p>Line style of a single item.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"areaStyle":{"type":["Object"],"description":"<p>Area filling style of a single item.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"top"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Bar color. </p>\n","default":"auto"},"borderColor":{"type":["Color"],"description":"<p>The border color of bar.</p>\n","default":"'#000'"},"borderWidth":{"type":["number"],"description":"<p>The border width of bar. defaults to have no border.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"areaStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in radar chart.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in radar chart, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong>Tree Diagram</strong></p>\n<p>The tree diagram is mainly used to visualize the tree data structure, which is a special hierarchical type with a unique root node, left subtree, and right subtree.</p>\n<p><strong>Note: Forests are not currently supported directly in a single series, and can be implemented by configuring multiple series in an option</strong></p>\n<p><strong>Tree example:</strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=tree-vertical&edit=1&reset=1\" width=\"900\" height=\"780\"><iframe />\n\n\n<p><strong>Multiple series are combined into forest:</strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=tree-legend&edit=1&reset=1\" width=\"800\" height=\"680\"><iframe />\n\n","properties":{"type":{"type":["string"],"description":"","default":"'tree'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between tree component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"12%"},"top":{"type":["string","number"],"description":"<p>Distance between tree component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"12%"},"right":{"type":["string","number"],"description":"<p>Distance between tree component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n","default":"12%"},"bottom":{"type":["string","number"],"description":"<p>Distance between tree component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n","default":"12%"},"width":{"type":["string","number"],"description":"<p>Width of tree component. </p>\n","default":null},"height":{"type":["string","number"],"description":"<p>Height of tree component. </p>\n","default":null},"layout":{"type":["string"],"description":"<p>The layout of the tree, which can be <code class=\"codespan\">orthogonal</code> and <code class=\"codespan\">radial</code>. Here the <code class=\"codespan\">orthogonal</code> layout is what we usually refer to the <code class=\"codespan\">horizontal</code> and <code class=\"codespan\">vertical</code> direction, the corresponding parameter value is <code class=\"codespan\">orthogonal</code>. The <code class=\"codespan\">radial</code> layout refers to the view that the root node as the center and each layer of nodes as the ring, the corresponding parameter value is <code class=\"codespan\">radial</code>.</p>\n<p><strong>Orthogonal Example:</strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=tree-basic&edit=1&reset=1\" width=\"780\" height=\"900\"><iframe />\n\n\n\n<p><strong>Radial Example:</strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=tree-radial&edit=1&reset=1\" width=\"800\" height=\"800\"><iframe />\n\n\n","default":"'orthogonal'"},"orient":{"type":["string"],"description":"<p>The direction of the <code class=\"codespan\">orthogonal</code> layout in the tree diagram. That means this configuration takes effect only if <code class=\"codespan\">layout = &#39;orthogonal&#39;</code>. The corresponding directions are <code class=\"codespan\">from left to right</code>, <code class=\"codespan\">from right to left</code>, <code class=\"codespan\">from top to bottom</code>, <code class=\"codespan\">from bottom to top</code>, with shorthand values <code class=\"codespan\">&#39;LR&#39;</code>, <code class=\"codespan\">&#39;RL&#39;</code>, <code class=\"codespan\">&#39;TB&#39;</code>, <code class=\"codespan\">&#39;BT&#39;</code>.\n<strong>Note: The previous configuration value <code class=\"codespan\">&#39;horizontal&#39;</code> is equivalent to <code class=\"codespan\">&#39;LR&#39;</code>, <code class=\"codespan\">&#39;vertical&#39;</code> is equivalent to <code class=\"codespan\">&#39;TB&#39;</code>.</strong></p>\n","default":"'LR'"},"symbol":{"type":["string","Function"],"description":"<p>Symbol of tree node.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-tree.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'emptyCircle'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>tree node symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-tree.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":7},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of tree node symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-tree.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of tree node symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"edgeShape":{"type":["string"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.7.0</code></p>\n</blockquote>\n<p>The shape of the edge which is under the tree <code class=\"codespan\">orthogonal layout</code>. There are two types of shape, curve and polyline, the corresponding values are <code class=\"codespan\">&#39;curve&#39;</code> and <code class=\"codespan\">&#39;polyline&#39;</code>.</p>\n<p><strong> Note: This configuration item is only valid under the <code class=\"codespan\">orthogonal layout</code>. Errors will be reported in the development environment under the <code class=\"codespan\">radial layout</code>. </strong></p>\n","default":"'curve'"},"edgeForkPosition":{"type":["string"],"description":"<p>This is the position where the polyline branches in the subtree when the shape of the edge is a polyline in the <code class=\"codespan\">orthogonal layout</code>. The position here refers to the percentage of the distance between the bifurcation point and the parent node of the subtree to the height of the entire subtree. The default value is <code class=\"codespan\">&#39;50%&#39;</code>, which can be between [&#39;0&#39;, &#39;100%&#39;].</p>\n<p><strong> Note: This configuration item is only valid when <code class=\"codespan\">edgeShape = &#39;polyline&#39;</code>. </strong></p>\n","default":"'50%'"},"roam":{"type":["boolean","string"],"description":"<p>Whether to enable mouse zooming and translating. <code class=\"codespan\">false</code> by default. If either zooming or translating is wanted, it can be set to <code class=\"codespan\">&#39;scale&#39;</code> or <code class=\"codespan\">&#39;move&#39;</code>. Otherwise, set it to be <code class=\"codespan\">true</code> to enable both.</p>\n","default":false},"expandAndCollapse":{"type":["boolean"],"description":"<p>Subtree collapses and expands interaction, <code class=\"codespan\">default true</code>. As the drawing area is limited, and usually the nodes of a tree may be more, so there will be hidden between the nodes. In order to avoid this problem, you can put a temporary unrelated subtree folded away, until you need to start when necessary. Such as the above radial layout tree example, the center of the node is filled with blue is the folded away subtree, you can click to expand it.</p>\n<p><strong>Note: If you configure a custom image as the tag for a node, it is not possible to distinguish whether the current node has a collapsed subtree by the fill color. And currently do not support, upload two pictures, respectively represent the collapsing and expansion state of the node. So, if you want to explicitly show the two states of the node, it is recommended to use <code class=\"codespan\">ECharts</code> regular tag types, such as <code class=\"codespan\">emptyCircle</code>.</strong></p>\n","default":true},"initialTreeDepth":{"type":["number"],"description":"<p>The initial level (depth) of the tree. The root node is the 0th layer, then the first layer, the second layer, ... , until the leaf node. This configuration item is primarily used in conjunction with <code class=\"codespan\">collapsing and expansion</code> interactions. The purpose is to prevent the nodes from obscuring each other. If set as -1 or <code class=\"codespan\">null</code> or <code class=\"codespan\">undefined</code>, all nodes are expanded.</p>\n","default":2},"itemStyle":{"type":["Object"],"description":"<p>The style of each node in the tree, where [itemStyle.color] (~ series-tree.itemStyle.color) represents the fill color of the node, to distinguish the state of the subtree corresponding to <code class=\"codespan\">collapsing</code> or <code class=\"codespan\">expansion</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"'#c23531'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1.5},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"<p><code class=\"codespan\">label</code> describes the style of the text corresponding to each node.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"<p>Defines the style of the tree edge.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>The color of the tree edge.</p>\n","default":"\"'#ccc'\""},"width":{"type":["number"],"description":"<p>The width of the tree edge.</p>\n","default":1.5},"curveness":{"type":["number"],"description":"<p>The curvature of the tree edge.</p>\n","default":0.5},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>The color of the tree edge.</p>\n","default":"\"'#ccc'\""},"width":{"type":["number"],"description":"<p>The width of the tree edge.</p>\n","default":1.5},"curveness":{"type":["number"],"description":"<p>The curvature of the tree edge.</p>\n","default":0.5},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"leaves":{"type":["Object"],"description":"<p>Leaf node special configuration, such as the above tree diagram example, the leaf node and non-leaf node label location is different.</p>\n","properties":{"label":{"type":["Object"],"description":"<p>Describes the style of the text label corresponding to the leaf node.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>The style of the leaf node in the tree.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}}}},"data":{"type":["Object"],"description":"<p><a href=\"#series-tree.data\">series-tree.data</a> the data format is a tree structure, for example:</p>\n<pre><code class=\"lang-javascript\">{ // note that the outermost layer is an object that represents the root node of the tree.\n    name: &quot;flare&quot;,    // the name of the node, the text corresponding to the current node label.\n    label: {          // the special label configuration (if necessary).\n        ...           // the format of the label is shown in the series-tree.label.\n    },\n    itemStyle: {      // the special itemStyle configuration (if necessary).\n        ...           // the format of the itemstyle is shown in the series-tree.itemStyle.\n    },\n    children: [\n        {\n            name: &quot;flex&quot;,\n            value: 4116,    // value, which only displayed in tooltip.\n            label: {\n                ...\n            },\n            itemStyle: {\n                ...\n            },\n            collapsed: null, // If set as `true`, the node is collpased in the initialization.\n            children: [...]  // leaf nodes do not have children, can not write.\n        },\n        ...\n    ]\n};\n</code></pre>\n","properties":{"name":{"type":["string"],"description":"<p>The name of the tree node, used to identify each node.</p>\n"},"value":{"type":["number"],"description":"<p>The value of the node, displayed in the tooltip.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>The style of the node.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"<p>The label of the node.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"'linear'"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><a href=\"https://en.wikipedia.org/wiki/Treemapping\" target=\"_blank\">Treemap</a> is a common way to present &quot;hierarchical data&quot; or &quot;tree data&quot;. It primarily highlights the important nodes at all hierarchies in 『Tree』with area.</p>\n<p><strong>Example:</strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=treemap-obama&edit=1&reset=1\" width=\"700\" height=\"580\"><iframe />\n\n\n\n<p><br>\n<strong>Visual Mapping:</strong></p>\n<p>treemap maps the numerical values to area.</p>\n<p>Moreover, it is able to map some dimensions of data to other visual channel, like colors, lightness of colors and etc.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br>\n<strong>Drill Down:</strong></p>\n<p>The feature <code class=\"codespan\">drill down</code> means: when clicking a tree node, this node will be set as root and its children will be shown. When <a href=\"#series-treemap.leafDepth\">leafDepth</a> is set, this feature is enabled.</p>\n<p><strong>An example about drill down:</strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=treemap-drill-down&edit=1&reset=1\" width=\"800\" height=\"500\"><iframe />\n\n\n<p><br>\n<br>\n<br>\nNotice: There are some difference in treemap configuration between ECharts3 and ECharts2. Some immature configuration ways are no longer supported:</p>\n<ul>\n<li><p>The position method using <code class=\"codespan\">center/size</code> is no longer supported, and <code class=\"codespan\">left/top/bottom/right/width/height</code> are used to position treemap, as other components do.</p>\n</li>\n<li><p>The configuration item <code class=\"codespan\">breadcrumb</code> is moved outside <code class=\"codespan\">itemStyle/itemStyle.emphasis</code>, and it is in the same level with <code class=\"codespan\">itemStyle</code> now.</p>\n</li>\n<li><p>The configuration item <code class=\"codespan\">root</code> is not avaliable temporarily.User can zoom treemap to see some tiny or deep descendants, or using <a href=\"#series-treemap.leafDepth\">leafDepth</a> to enable the feature of &quot;drill down&quot;.</p>\n</li>\n<li><p>The configuration item <code class=\"codespan\">label</code> is moved outside the <code class=\"codespan\">itemStyle/itemStyle.emphasis</code>, and it is in the same level with <code class=\"codespan\">itemStyle</code> now.</p>\n</li>\n<li><p>The configuration items <code class=\"codespan\">itemStyle.childBorderWidth</code> and <code class=\"codespan\">itemStyle.childBorderColor</code> are not supported anymore (because in this way only 2 levels can be defined). <a href=\"#series-treemap.levels\">series-treemap.levels</a> is used to define all levels now.</p>\n</li>\n</ul>\n<p><br>\n<br></p>\n","properties":{"type":{"type":["string"],"description":"","default":"'treemap'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between treemap  component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"center"},"top":{"type":["string","number"],"description":"<p>Distance between treemap  component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"middle"},"right":{"type":["string","number"],"description":"<p>Distance between treemap  component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"<p>Distance between treemap  component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"width":{"type":["string","number"],"description":"<p>Width of treemap  component. </p>\n","default":"80%"},"height":{"type":["string","number"],"description":"<p>Height of treemap  component. </p>\n","default":"80%"},"squareRatio":{"type":["number"],"description":"<p>The expected square ratio. Layout would approach the ratio as close as possible.</p>\n<p>It defaults to be the golden ratio: <code class=\"codespan\">0.5 * (1 + Math.sqrt(5))</code>.</p>\n"},"leafDepth":{"type":["number"],"description":"<p>When <code class=\"codespan\">leafDepth</code> is set, the feature &quot;drill down&quot; is enabled, which means when clicking a tree node, this node will be set as root and its children will be shown.</p>\n<p><code class=\"codespan\">leafDepth</code> represents how many levels are shown at most. For example, when <code class=\"codespan\">leafDepth</code> is set to <code class=\"codespan\">1</code>, only one level will be shown.</p>\n<p><code class=\"codespan\">leafDepth</code> is <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> by default, which means that &quot;drill down&quot; is disabled.</p>\n<p><strong>An example about drill down:</strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=treemap-drill-down&edit=1&reset=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":null},"drillDownIcon":{"type":["string"],"description":"<p>Marker when the node is able to be drilled down.</p>\n","default":"'▶'"},"roam":{"type":["boolean","string"],"description":"<p>Whether to enable dragging roam (move and zoom). Optional values are:</p>\n<ul>\n<li><code class=\"codespan\">false</code>: roam is disabled.</li>\n<li><code class=\"codespan\">&#39;scale&#39;</code> or <code class=\"codespan\">&#39;zoom&#39;</code>: zoom only.</li>\n<li><code class=\"codespan\">&#39;move&#39;</code> or <code class=\"codespan\">&#39;pan&#39;</code>: move (translation) only.</li>\n<li><code class=\"codespan\">true</code>: both zoom and move (translation) are avaliable.</li>\n</ul>\n","default":true},"nodeClick":{"type":["boolean","string"],"description":"<p>The behaviour when clicking a node. Optional values are:</p>\n<ul>\n<li><code class=\"codespan\">false</code>: Do nothing after clicked.</li>\n<li><code class=\"codespan\">&#39;zoomToNode&#39;</code>: Zoom to clicked node.</li>\n<li><code class=\"codespan\">&#39;link&#39;</code>: If there is <a href=\"#series-treemap.data.link\">link</a> in node data, do hyperlink jump after clicked.</li>\n</ul>\n","default":"'zoomToNode'"},"zoomToNodeRatio":{"type":["number"],"description":"<p>The treemap will be auto zoomed to a appropriate ratio when a node is clicked (when <a href=\"#series-treemap.nodeClick\">nodeClick</a> is set as <code class=\"codespan\">&#39;zoomToNode&#39;</code> and no drill down happens). This configuration item indicates the ratio.</p>\n","default":"0.32*0.32"},"levels":{"type":["Array"],"description":"<p><strong>Multiple Levels Configuration</strong></p>\n<p>treemap adopts 4-level configuration:</p>\n<pre><code>&quot;each node&quot; --&gt; &quot;each level&quot; --&gt; &quot;each series&quot;.\n</code></pre><p>That is, we can configurate each node, can also configurate each level of the tree, or set overall configurations on each series. The highest priority is node configuration.</p>\n<p><code class=\"codespan\">levels</code> is configurations on each levels, which is used most.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">// Notice that in fact the data structure is not &quot;tree&quot;, but is &quot;forest&quot;.\ndata: [\n    {\n        name: &#39;nodeA&#39;,\n        children: [\n            {name: &#39;nodeAA&#39;},\n            {name: &#39;nodeAB&#39;},\n        ]\n    },\n    {\n        name: &#39;nodeB&#39;,\n        children: [\n            {name: &#39;nodeBA&#39;}\n        ]\n    }\n],\nlevels: [\n    {...}, // configurations of the top level of the data structure &quot;forest&quot;\n        // (the level that contains &#39;nodeA&#39;, &#39;nodeB&#39; shown above).\n    {...}, // configurations of the next level\n        // (the level that contains &#39;nodeAA&#39;, &#39;nodeAB&#39;, &#39;nodeBA&#39; shown above)\n    {...}, // configurations of the next level\n    ...\n]\n</code></pre>\n<p><br>\n<strong>The Rules about Visual Mapping</strong></p>\n<p>When designing a treemap, we primarily focus on how to visually distinguish &quot;different levels&quot;, &quot;different categories in the same level&quot;, which requires appropriate settings of &quot;rectangular color&quot;, &quot;border thickness&quot;, &quot;border color&quot; and even &quot;color saturation of rectangular&quot; and so on on each level.</p>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=treemap-disk&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>. The top level is divided into several parts by colors &quot;red&quot;, &quot;green&quot;, &quot;blue&quot;, and etc ... In each color block, <code class=\"codespan\">colorSaturation</code> is used to distinguish nodes in sublevel. The border color of the top level is &quot;white&quot;, while the border color of the sublevel is the color that based on the current block color and processed by <code class=\"codespan\">borderColorSaturation</code>.</p>\n<p><code class=\"codespan\">treemap</code> uses this rule of visual configuration: each level computes its visual value based on the configurations (<code class=\"codespan\">color</code>, <code class=\"codespan\">colorSaturation</code>, <code class=\"codespan\">borderColor</code>, <code class=\"codespan\">borderColorSaturation</code>) on this level. If there is no certain configuration in a node, it inherits the configuration from its parent.</p>\n<p>In this way, this effect can be configured: set a <code class=\"codespan\">color</code> list on the parent level, and set <code class=\"codespan\">colorSaturation</code> on the child level, and then each node in the parent level would obtain a color from the <code class=\"codespan\">color</code> list, and each node in the child level would obtain a value from <code class=\"codespan\">colorSaturation</code> and compound it with the color inherited from its parent node to get its final color.</p>\n<p><br>\n<strong>Dimensions and &quot;Extra Visual Mapping&quot;</strong></p>\n<p>See the example below: every <code class=\"codespan\">value</code> field is set as an Array, in which each item in the array represents a dimension respectively.</p>\n<pre><code class=\"lang-javascript\">[\n    {\n        value: [434, 6969, 8382],\n        children: [\n            {\n                value: [1212, 4943, 5453],\n                id: &#39;someid-1&#39;,\n                name: &#39;description of this node&#39;,\n                children: [...]\n            },\n            {\n                value: [4545, 192, 439],\n                id: &#39;someid-2&#39;,\n                name: &#39;description of this node&#39;,\n                children: [...]\n            },\n            ...\n        ]\n    },\n    {\n        value: [23, 59, 12],\n        children: [...]\n    },\n    ...\n]\n</code></pre>\n<p><code class=\"codespan\">treemap</code> will map the first dimension (the first item of the array) to &quot;area&quot;. If we want to express more information, we could map another dimension (specified by <a href=\"#series-treemap.viusalDimension\">series-treemap.visualDimension</a>) to another visual types, such as <code class=\"codespan\">colorSaturation</code> and so on. See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=treemap-obama&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a> and select the legend &#39;Growth&#39;.</p>\n<p><br></p>\n<p><strong>How to avoid confusion by setting border/gap of node</strong></p>\n<p>If all of the border/gaps are set with the same color, confusion might occur when rectangulars in different levels display at the same time.</p>\n<p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/treemap-borderColor&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>. Notice that the child rectangles in the red area are in the deeper level than rectangles that are saparated by white gap. So in the red area, basically we set gap color with red, and use <code class=\"codespan\">borderColorSaturation</code> to lift the saturation.</p>\n<p><br>\n<strong>Explanation about borderWidth, gapWidth, borderColor</strong></p>\n<p><img width=\"500\" height=\"auto\" src=\"documents/asset/img/treemap-border-gap.png\"></p>\n","items":{"type":"Object","properties":{"visualDimension":{"type":["number"],"description":"<p><code class=\"codespan\">treemap</code> is able to map any dimensions of data to visual.</p>\n<p>The value of <a href=\"#series-treemap.data\">series-treemap.data</a> can be an array. And each item of the array represents a &quot;dimension&quot;. <code class=\"codespan\">visualDimension</code> specifies the dimension on which visual mapping will be performed.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">visualDimension</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n","default":0},"visualMin":{"type":["number"],"description":"<p>The minimal value of current level. Auto-statistics by default.</p>\n<p>When <a href=\"#series-treemap.levels.colorMappingBy\">colorMappingBy</a> is set to <code class=\"codespan\">&#39;value&#39;</code>, you are able to specify extent manually for visual mapping by specifying <code class=\"codespan\">visualMin</code> or <code class=\"codespan\">visualMax</code>.</p>\n","default":null},"visualMax":{"type":["number"],"description":"<p>The maximal value of current level. Auto-statistics by default.</p>\n<p>When <a href=\"#series-treemap.levels.colorMappingBy\">colorMappingBy</a> is set to <code class=\"codespan\">&#39;value&#39;</code>, you are able to specify extent manually for visual mapping by specifying <code class=\"codespan\">visualMin</code> or <code class=\"codespan\">visualMax</code>.</p>\n","default":null},"color":{"type":["Array"],"description":"<p>A color list for a level. Each node in the level will obtain a color from the color list (the rule see <a href=\"#series-treemap.levels.colorMappingBy\">colorMappingBy</a>). It is empty by default, which means the global color list will be used.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">color</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n"},"colorAlpha":{"type":["Array"],"description":"<p>It indicates the range of tranparent rate (color alpha) for nodes in a level . The range of values is 0 ~ 1.</p>\n<p>For example, <code class=\"codespan\">colorAlpha</code> can be <code class=\"codespan\">[0.3, 1]</code>.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">colorAlpha</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n","default":null},"colorSaturation":{"type":["number"],"description":"<p>It indicates the range of saturation (color alpha) for nodes in a level . The range of values is 0 ~ 1.</p>\n<p>For example, <code class=\"codespan\">colorSaturation</code> can be <code class=\"codespan\">[0.3, 1]</code>.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">colorSaturation</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n","default":null},"colorMappingBy":{"type":["string"],"description":"<p>Specify the rule according to which each node obtain color from <a href=\"#series-treemap.levels.color\">color list</a>. Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;value&#39;</code>:</li>\n</ul>\n<p>Map <a href=\"#series-treemap.data.value\">series-treemap.data.value</a> to color.</p>\n<p>In this way, the color of each node indicate its value.</p>\n<p><a href=\"#series-treemap.levels.visualDimension\">visualDimension</a> can be used to specify which dimension of <a href=\"#series-treemap.data\">data</a> is used to perform visual mapping.</p>\n<ul>\n<li><code class=\"codespan\">&#39;index&#39;</code>:</li>\n</ul>\n<p>Map the <code class=\"codespan\">index</code> (ordinal number) of nodes to color. Namely, in a level, the first node is mapped to the first color of <a href=\"#series-treemap.levels.color\">color list</a>, and the second node gets the second color.</p>\n<p>In this way, adjacent nodes are distinguished by color.</p>\n<ul>\n<li><code class=\"codespan\">&#39;id&#39;</code>:</li>\n</ul>\n<p>Map <a href=\"#series-treemap.data.id\">series-treemap.data.id</a> to color.</p>\n<p>Since <code class=\"codespan\">id</code> is used to identify node, if user call <code class=\"codespan\">setOption</code> to modify the tree, each node will remain the original color before and after <code class=\"codespan\">setOption</code> called. See this <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=treemap-obama&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">colorMappingBy</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n","default":"'index'"},"visibleMin":{"type":["number"],"description":"<p>A node will not be shown when its area size is smaller than this value (unit: px square).</p>\n<p>In this way, tiny nodes will be hidden, otherwise they will huddle together. When user zoom the treemap, the area size will increase and the rectangle will be shown if the area size is larger than this threshold.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">visibleMin</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n","default":10},"childrenVisibleMin":{"type":["number"],"description":"<p>Children will not be shown when area size of a node is smaller than this value (unit: px square).</p>\n<p>This can hide the details of nodes when the rectangular area is not large enough. When users zoom nodes, the child node would show if the area is larger than this threshold.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">childrenVisibleMin</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n","default":null},"label":{"type":["Object"],"description":"<p><code class=\"codespan\">label</code> decribes the style of the label in each node.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">label</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n<p><br></p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"ellipsis":{"type":["boolean"],"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n","default":true}}},"upperLabel":{"type":["Object"],"description":"<p><code class=\"codespan\">upperLabel</code> is used to specify whether show label when the node has children. When <a href=\"#series-treemap.upperLabel.show\">upperLabel.show</a> is set as <code class=\"codespan\">true</code>, the feature that &quot;show parent label&quot; is enabled.</p>\n<p>The same as <a href=\"#series-treemap.label\">series-treemap.label</a>, the option <code class=\"codespan\">upperLabel</code> can be placed at the root of <a href=\"#series-treemap\">series-treemap</a> directly, or in <a href=\"#series-treemap.level\">series-treemap.level</a>, or in each item of <a href=\"#series-treemap.data\">series-treemap.data</a>.</p>\n<p>Specifically, <a href=\"#series-treemap.label\">series-treemap.label</a> specifies the style when a node is a leaf, while <code class=\"codespan\">upperLabel</code> specifies the style when a node has children, in which case the label is displayed in the inner top of the node.</p>\n<p>See:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=treemap-show-parent&edit=1&reset=1\" width=\"700\" height=\"500\"><iframe />\n\n\n\n\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">label</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n<p><br></p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number"],"description":"<p>Height of label area.</p>\n","default":20},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"ellipsis":{"type":["boolean"],"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n","default":true}}},"itemStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">itemStyle</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n<p><br></p>\n","properties":{"color":{"type":["Color"],"description":"<p>The color of a node. It use global palette <a href=\"#color\">option.color</a> by default.</p>\n","default":null},"colorAlpha":{"type":["number"],"description":"<p>The tranparent rate of a node, the range is between 0 ~ 1.</p>\n","default":null},"colorSaturation":{"type":["number"],"description":"<p>The color saturation of a node. The range is between 0 ~ 1.</p>\n","default":null},"borderWidth":{"type":["number"],"description":"<p>The border width of a node. There is no border when it is set as <code class=\"codespan\">0</code>.</p>\n<p>Tip, gaps between child nodes are specified by <a href=\"#series-treemap.levels.gapWidth\">gapWidth</a></p>\n","default":0},"gapWidth":{"type":["number"],"description":"<p>Gaps between child nodes.</p>\n","default":0},"borderColor":{"type":["Color"],"description":"<p>The border color and gap color of a node.</p>\n","default":"'#fff',"},"borderColorSaturation":{"type":["Color"],"description":"<p>The color saturation of a border or gap. The value range is between 0 ~ 1.</p>\n<p>Tips:</p>\n<p>When <code class=\"codespan\">borderColorSaturation</code> is set, the <code class=\"codespan\">borderColor</code> is disabled, and, instead, the final border color is calculated based on the color of this node (this color could be sepcified explicitly or inherited from its parent node) and mixing with <code class=\"codespan\">borderColorSaturation</code>.</p>\n<p>In this way, a effect can be implemented: different sections have different hue of gap color repectively, which makes users easy to distinguish both sections and levels.</p>\n<p><br></p>\n<p><strong>How to avoid confusion by setting border/gap of node</strong></p>\n<p>If all of the border/gaps are set with the same color, confusion might occur when rectangulars in different levels display at the same time.</p>\n<p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/treemap-borderColor&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>. Notice that the child rectangles in the red area are in the deeper level than rectangles that are saparated by white gap. So in the red area, basically we set gap color with red, and use <code class=\"codespan\">borderColorSaturation</code> to lift the saturation.</p>\n","default":null},"strokeColor":{"type":["Color"],"description":"<p>Stroke color of each rect.</p>\n","default":null},"strokeWidth":{"type":["number"],"description":"<p>Stroke width of each rect.</p>\n","default":null}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"ellipsis":{"type":["boolean"],"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n","default":true}}},"upperLabel":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"ellipsis":{"type":["boolean"],"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n","default":true}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>The color of a node. It use global palette <a href=\"#color\">option.color</a> by default.</p>\n","default":null}}}}}}}},"visualDimension":{"type":["number"],"description":"<p><code class=\"codespan\">treemap</code> is able to map any dimensions of data to visual.</p>\n<p>The value of <a href=\"#series-treemap.data\">series-treemap.data</a> can be an array. And each item of the array represents a &quot;dimension&quot;. <code class=\"codespan\">visualDimension</code> specifies the dimension on which visual mapping will be performed.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">visualDimension</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n","default":0},"visualMin":{"type":["number"],"description":"<p>The minimal value of current level. Auto-statistics by default.</p>\n<p>When <a href=\"#series-treemap.levels.colorMappingBy\">colorMappingBy</a> is set to <code class=\"codespan\">&#39;value&#39;</code>, you are able to specify extent manually for visual mapping by specifying <code class=\"codespan\">visualMin</code> or <code class=\"codespan\">visualMax</code>.</p>\n","default":null},"visualMax":{"type":["number"],"description":"<p>The maximal value of current level. Auto-statistics by default.</p>\n<p>When <a href=\"#series-treemap.levels.colorMappingBy\">colorMappingBy</a> is set to <code class=\"codespan\">&#39;value&#39;</code>, you are able to specify extent manually for visual mapping by specifying <code class=\"codespan\">visualMin</code> or <code class=\"codespan\">visualMax</code>.</p>\n","default":null},"colorAlpha":{"type":["Array"],"description":"<p>It indicates the range of tranparent rate (color alpha)  of the series. The range of values is 0 ~ 1.</p>\n<p>For example, <code class=\"codespan\">colorAlpha</code> can be <code class=\"codespan\">[0.3, 1]</code>.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">colorAlpha</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n","default":null},"colorSaturation":{"type":["number"],"description":"<p>It indicates the range of saturation (color alpha)  of the series. The range of values is 0 ~ 1.</p>\n<p>For example, <code class=\"codespan\">colorSaturation</code> can be <code class=\"codespan\">[0.3, 1]</code>.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">colorSaturation</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n","default":null},"colorMappingBy":{"type":["string"],"description":"<p>Specify the rule according to which each node obtain color from <a href=\"#series-treemap.levels.color\">color list</a>. Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;value&#39;</code>:</li>\n</ul>\n<p>Map <a href=\"#series-treemap.data.value\">series-treemap.data.value</a> to color.</p>\n<p>In this way, the color of each node indicate its value.</p>\n<p><a href=\"#series-treemap.levels.visualDimension\">visualDimension</a> can be used to specify which dimension of <a href=\"#series-treemap.data\">data</a> is used to perform visual mapping.</p>\n<ul>\n<li><code class=\"codespan\">&#39;index&#39;</code>:</li>\n</ul>\n<p>Map the <code class=\"codespan\">index</code> (ordinal number) of nodes to color. Namely, in a level, the first node is mapped to the first color of <a href=\"#series-treemap.levels.color\">color list</a>, and the second node gets the second color.</p>\n<p>In this way, adjacent nodes are distinguished by color.</p>\n<ul>\n<li><code class=\"codespan\">&#39;id&#39;</code>:</li>\n</ul>\n<p>Map <a href=\"#series-treemap.data.id\">series-treemap.data.id</a> to color.</p>\n<p>Since <code class=\"codespan\">id</code> is used to identify node, if user call <code class=\"codespan\">setOption</code> to modify the tree, each node will remain the original color before and after <code class=\"codespan\">setOption</code> called. See this <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=treemap-obama&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">colorMappingBy</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n","default":"'index'"},"visibleMin":{"type":["number"],"description":"<p>A node will not be shown when its area size is smaller than this value (unit: px square).</p>\n<p>In this way, tiny nodes will be hidden, otherwise they will huddle together. When user zoom the treemap, the area size will increase and the rectangle will be shown if the area size is larger than this threshold.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">visibleMin</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n","default":10},"childrenVisibleMin":{"type":["number"],"description":"<p>Children will not be shown when area size of a node is smaller than this value (unit: px square).</p>\n<p>This can hide the details of nodes when the rectangular area is not large enough. When users zoom nodes, the child node would show if the area is larger than this threshold.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">childrenVisibleMin</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n","default":null},"label":{"type":["Object"],"description":"<p><code class=\"codespan\">label</code> decribes the style of the label in each node.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">label</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n<p><br></p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"ellipsis":{"type":["boolean"],"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n","default":true}}},"upperLabel":{"type":["Object"],"description":"<p><code class=\"codespan\">upperLabel</code> is used to specify whether show label when the node has children. When <a href=\"#series-treemap.upperLabel.show\">upperLabel.show</a> is set as <code class=\"codespan\">true</code>, the feature that &quot;show parent label&quot; is enabled.</p>\n<p>The same as <a href=\"#series-treemap.label\">series-treemap.label</a>, the option <code class=\"codespan\">upperLabel</code> can be placed at the root of <a href=\"#series-treemap\">series-treemap</a> directly, or in <a href=\"#series-treemap.level\">series-treemap.level</a>, or in each item of <a href=\"#series-treemap.data\">series-treemap.data</a>.</p>\n<p>Specifically, <a href=\"#series-treemap.label\">series-treemap.label</a> specifies the style when a node is a leaf, while <code class=\"codespan\">upperLabel</code> specifies the style when a node has children, in which case the label is displayed in the inner top of the node.</p>\n<p>See:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=treemap-show-parent&edit=1&reset=1\" width=\"700\" height=\"500\"><iframe />\n\n\n\n\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">label</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n<p><br></p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number"],"description":"<p>Height of label area.</p>\n","default":20},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"ellipsis":{"type":["boolean"],"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n","default":true}}},"itemStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">itemStyle</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n<p><br></p>\n","properties":{"color":{"type":["Color"],"description":"<p>The color of a node. It use global palette <a href=\"#color\">option.color</a> by default.</p>\n","default":null},"colorAlpha":{"type":["number"],"description":"<p>The tranparent rate of a node, the range is between 0 ~ 1.</p>\n","default":null},"colorSaturation":{"type":["number"],"description":"<p>The color saturation of a node. The range is between 0 ~ 1.</p>\n","default":null},"borderWidth":{"type":["number"],"description":"<p>The border width of a node. There is no border when it is set as <code class=\"codespan\">0</code>.</p>\n<p>Tip, gaps between child nodes are specified by <a href=\"#series-treemap.levels.gapWidth\">gapWidth</a></p>\n","default":0},"gapWidth":{"type":["number"],"description":"<p>Gaps between child nodes.</p>\n","default":0},"borderColor":{"type":["Color"],"description":"<p>The border color and gap color of a node.</p>\n","default":"'#fff',"},"borderColorSaturation":{"type":["Color"],"description":"<p>The color saturation of a border or gap. The value range is between 0 ~ 1.</p>\n<p>Tips:</p>\n<p>When <code class=\"codespan\">borderColorSaturation</code> is set, the <code class=\"codespan\">borderColor</code> is disabled, and, instead, the final border color is calculated based on the color of this node (this color could be sepcified explicitly or inherited from its parent node) and mixing with <code class=\"codespan\">borderColorSaturation</code>.</p>\n<p>In this way, a effect can be implemented: different sections have different hue of gap color repectively, which makes users easy to distinguish both sections and levels.</p>\n<p><br></p>\n<p><strong>How to avoid confusion by setting border/gap of node</strong></p>\n<p>If all of the border/gaps are set with the same color, confusion might occur when rectangulars in different levels display at the same time.</p>\n<p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/treemap-borderColor&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>. Notice that the child rectangles in the red area are in the deeper level than rectangles that are saparated by white gap. So in the red area, basically we set gap color with red, and use <code class=\"codespan\">borderColorSaturation</code> to lift the saturation.</p>\n","default":null},"strokeColor":{"type":["Color"],"description":"<p>Stroke color of each rect.</p>\n","default":null},"strokeWidth":{"type":["number"],"description":"<p>Stroke width of each rect.</p>\n","default":null}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"ellipsis":{"type":["boolean"],"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n","default":true}}},"upperLabel":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"ellipsis":{"type":["boolean"],"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n","default":true}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>The color of a node. It use global palette <a href=\"#color\">option.color</a> by default.</p>\n","default":null}}}}},"breadcrumb":{"type":["Object"],"description":"<p>breadcrumb, showing the path of the current node.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the breadcrumb.</p>\n","default":true},"left":{"type":["string","number"],"description":"<p>Distance between asdf  component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'center'"},"top":{"type":["string","number"],"description":"<p>Distance between asdf  component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"right":{"type":["string","number"],"description":"<p>Distance between asdf  component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"<p>Distance between asdf  component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":0},"height":{"type":["number"],"description":"<p>The height of breadcrumb.</p>\n","default":22},"emptyItemWidth":{"type":["number"],"description":"<p>When is no content in breadcrumb, this minimal width need to be set up.</p>\n","default":25},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of , <code class=\"codespan\">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>boxplot color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"rgba(0,0,0,0.7)"},"borderColor":{"type":["Color"],"description":"<p>boxplot border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"rgba(255,255,255,0.7)"},"borderWidth":{"type":["number"],"description":"<p>boxplot border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"rgba(150,150,150,1)"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"textStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"#fff"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"emphasis":{"type":["*"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>boxplot color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"rgba(0,0,0,0.7)"},"borderColor":{"type":["Color"],"description":"<p>boxplot border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"rgba(255,255,255,0.7)"},"borderWidth":{"type":["number"],"description":"<p>boxplot border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"rgba(150,150,150,1)"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"textStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"#fff"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"data":{"type":["Array"],"description":"<p>the the data format of <a href=\"#series-treemap.data\">series-treemap.data</a> is a forest. For example:</p>\n<pre><code class=\"lang-javascript\">[ // Tips, the top level is an array.\n    {\n        value: 1212,\n        children: [\n            {\n                value: 2323,    // The value of this node, indicating the area size.\n                                // it could also be an array, such as [2323, 43, 55], in which the first item of array indicates the area size.\n                                // The other items of the array can be used for extra visual mapping. See details in series-treemp.levels.\n                id: &#39;someid-1&#39;, // id is not mandatory.\n                                // But if using API, id is used to locate node.\n                name: &#39;description of this node&#39;, // show the description text in rectangle.\n                children: [...],\n                label: {        // The label config of this node (if necessary).\n                    ...         // see series-treemap.label.\n                },\n                itemStyle: {    // the itemStyle of this node (if necessary).\n                    ...         // the see series-treemap.itemStyle.\n                }\n            },\n            {\n                value: 4545,\n                id: &#39;someid-2&#39;,\n                name: &#39;description of this node&#39;,\n                children: [\n                    {\n                        value: 5656,\n                        id: &#39;someid-3&#39;,\n                        name: &#39;description of this node&#39;,\n                        children: [...]\n                    },\n                    ...\n                ]\n            }\n        ]\n    },\n    {\n        value: [23, 59, 12]\n        // if there is no children, here could be nothing.\n    },\n    ...\n]\n</code></pre>\n","items":{"type":"Object","properties":{"value":{"type":["number","Array"],"description":"<p>The value of this node, indicating the area size.</p>\n<p>It could also be an array, such as [2323, 43, 55], in which the first item of array indicates the area size.</p>\n<p>The other items of the array can be used for extra visual mapping. See details in series-treemp.levels.</p>\n"},"id":{"type":["string"],"description":"<p><code class=\"codespan\">id</code> is not mandatory.\nBut if using API, id is used to locate node.</p>\n"},"name":{"type":["string"],"description":"<p>Show the description text in rectangle.</p>\n"},"visualDimension":{"type":["number"],"description":"<p><code class=\"codespan\">treemap</code> is able to map any dimensions of data to visual.</p>\n<p>The value of <a href=\"#series-treemap.data\">series-treemap.data</a> can be an array. And each item of the array represents a &quot;dimension&quot;. <code class=\"codespan\">visualDimension</code> specifies the dimension on which visual mapping will be performed.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">visualDimension</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n","default":0},"visualMin":{"type":["number"],"description":"<p>The minimal value of current level. Auto-statistics by default.</p>\n<p>When <a href=\"#series-treemap.levels.colorMappingBy\">colorMappingBy</a> is set to <code class=\"codespan\">&#39;value&#39;</code>, you are able to specify extent manually for visual mapping by specifying <code class=\"codespan\">visualMin</code> or <code class=\"codespan\">visualMax</code>.</p>\n","default":null},"visualMax":{"type":["number"],"description":"<p>The maximal value of current level. Auto-statistics by default.</p>\n<p>When <a href=\"#series-treemap.levels.colorMappingBy\">colorMappingBy</a> is set to <code class=\"codespan\">&#39;value&#39;</code>, you are able to specify extent manually for visual mapping by specifying <code class=\"codespan\">visualMin</code> or <code class=\"codespan\">visualMax</code>.</p>\n","default":null},"color":{"type":["Array"],"description":"<p>A color list for a level. Each node in the level will obtain a color from the color list (the rule see <a href=\"#series-treemap.levels.colorMappingBy\">colorMappingBy</a>). It is empty by default, which means the global color list will be used.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">color</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n"},"colorAlpha":{"type":["Array"],"description":"<p>It indicates the range of tranparent rate (color alpha) for nodes in a level . The range of values is 0 ~ 1.</p>\n<p>For example, <code class=\"codespan\">colorAlpha</code> can be <code class=\"codespan\">[0.3, 1]</code>.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">colorAlpha</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n","default":null},"colorSaturation":{"type":["number"],"description":"<p>It indicates the range of saturation (color alpha) for nodes in a level . The range of values is 0 ~ 1.</p>\n<p>For example, <code class=\"codespan\">colorSaturation</code> can be <code class=\"codespan\">[0.3, 1]</code>.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">colorSaturation</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n","default":null},"colorMappingBy":{"type":["string"],"description":"<p>Specify the rule according to which each node obtain color from <a href=\"#series-treemap.levels.color\">color list</a>. Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;value&#39;</code>:</li>\n</ul>\n<p>Map <a href=\"#series-treemap.data.value\">series-treemap.data.value</a> to color.</p>\n<p>In this way, the color of each node indicate its value.</p>\n<p><a href=\"#series-treemap.levels.visualDimension\">visualDimension</a> can be used to specify which dimension of <a href=\"#series-treemap.data\">data</a> is used to perform visual mapping.</p>\n<ul>\n<li><code class=\"codespan\">&#39;index&#39;</code>:</li>\n</ul>\n<p>Map the <code class=\"codespan\">index</code> (ordinal number) of nodes to color. Namely, in a level, the first node is mapped to the first color of <a href=\"#series-treemap.levels.color\">color list</a>, and the second node gets the second color.</p>\n<p>In this way, adjacent nodes are distinguished by color.</p>\n<ul>\n<li><code class=\"codespan\">&#39;id&#39;</code>:</li>\n</ul>\n<p>Map <a href=\"#series-treemap.data.id\">series-treemap.data.id</a> to color.</p>\n<p>Since <code class=\"codespan\">id</code> is used to identify node, if user call <code class=\"codespan\">setOption</code> to modify the tree, each node will remain the original color before and after <code class=\"codespan\">setOption</code> called. See this <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=treemap-obama&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">colorMappingBy</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n","default":"'index'"},"visibleMin":{"type":["number"],"description":"<p>A node will not be shown when its area size is smaller than this value (unit: px square).</p>\n<p>In this way, tiny nodes will be hidden, otherwise they will huddle together. When user zoom the treemap, the area size will increase and the rectangle will be shown if the area size is larger than this threshold.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">visibleMin</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n","default":10},"childrenVisibleMin":{"type":["number"],"description":"<p>Children will not be shown when area size of a node is smaller than this value (unit: px square).</p>\n<p>This can hide the details of nodes when the rectangular area is not large enough. When users zoom nodes, the child node would show if the area is larger than this threshold.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">childrenVisibleMin</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n","default":null},"label":{"type":["Object"],"description":"<p><code class=\"codespan\">label</code> decribes the style of the label in each node.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">label</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n<p><br></p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"ellipsis":{"type":["boolean"],"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n","default":true}}},"upperLabel":{"type":["Object"],"description":"<p><code class=\"codespan\">upperLabel</code> is used to specify whether show label when the node has children. When <a href=\"#series-treemap.upperLabel.show\">upperLabel.show</a> is set as <code class=\"codespan\">true</code>, the feature that &quot;show parent label&quot; is enabled.</p>\n<p>The same as <a href=\"#series-treemap.label\">series-treemap.label</a>, the option <code class=\"codespan\">upperLabel</code> can be placed at the root of <a href=\"#series-treemap\">series-treemap</a> directly, or in <a href=\"#series-treemap.level\">series-treemap.level</a>, or in each item of <a href=\"#series-treemap.data\">series-treemap.data</a>.</p>\n<p>Specifically, <a href=\"#series-treemap.label\">series-treemap.label</a> specifies the style when a node is a leaf, while <code class=\"codespan\">upperLabel</code> specifies the style when a node has children, in which case the label is displayed in the inner top of the node.</p>\n<p>See:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=treemap-show-parent&edit=1&reset=1\" width=\"700\" height=\"500\"><iframe />\n\n\n\n\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">label</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n<p><br></p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number"],"description":"<p>Height of label area.</p>\n","default":20},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"ellipsis":{"type":["boolean"],"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n","default":true}}},"itemStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">itemStyle</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n<p><br></p>\n","properties":{"color":{"type":["Color"],"description":"<p>The color of a node. It use global palette <a href=\"#color\">option.color</a> by default.</p>\n","default":null},"colorAlpha":{"type":["number"],"description":"<p>The tranparent rate of a node, the range is between 0 ~ 1.</p>\n","default":null},"colorSaturation":{"type":["number"],"description":"<p>The color saturation of a node. The range is between 0 ~ 1.</p>\n","default":null},"borderWidth":{"type":["number"],"description":"<p>The border width of a node. There is no border when it is set as <code class=\"codespan\">0</code>.</p>\n<p>Tip, gaps between child nodes are specified by <a href=\"#series-treemap.levels.gapWidth\">gapWidth</a></p>\n","default":0},"gapWidth":{"type":["number"],"description":"<p>Gaps between child nodes.</p>\n","default":0},"borderColor":{"type":["Color"],"description":"<p>The border color and gap color of a node.</p>\n","default":"'#fff',"},"borderColorSaturation":{"type":["Color"],"description":"<p>The color saturation of a border or gap. The value range is between 0 ~ 1.</p>\n<p>Tips:</p>\n<p>When <code class=\"codespan\">borderColorSaturation</code> is set, the <code class=\"codespan\">borderColor</code> is disabled, and, instead, the final border color is calculated based on the color of this node (this color could be sepcified explicitly or inherited from its parent node) and mixing with <code class=\"codespan\">borderColorSaturation</code>.</p>\n<p>In this way, a effect can be implemented: different sections have different hue of gap color repectively, which makes users easy to distinguish both sections and levels.</p>\n<p><br></p>\n<p><strong>How to avoid confusion by setting border/gap of node</strong></p>\n<p>If all of the border/gaps are set with the same color, confusion might occur when rectangulars in different levels display at the same time.</p>\n<p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/treemap-borderColor&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>. Notice that the child rectangles in the red area are in the deeper level than rectangles that are saparated by white gap. So in the red area, basically we set gap color with red, and use <code class=\"codespan\">borderColorSaturation</code> to lift the saturation.</p>\n","default":null},"strokeColor":{"type":["Color"],"description":"<p>Stroke color of each rect.</p>\n","default":null},"strokeWidth":{"type":["number"],"description":"<p>Stroke width of each rect.</p>\n","default":null}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"ellipsis":{"type":["boolean"],"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n","default":true}}},"upperLabel":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"ellipsis":{"type":["boolean"],"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n","default":true}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>The color of a node. It use global palette <a href=\"#color\">option.color</a> by default.</p>\n","default":null}}}}},"link":{"type":["string"],"description":"<p>Enable hyperlink jump when clicking on node. It is avaliable when <a href=\"#series-treemap.nodeClick\">series-treemap.nodeClick</a> is <code class=\"codespan\">&#39;link&#39;</code>.</p>\n<p>See <a href=\"#series-treemap.data.target\">series-treemap.data.target</a>.</p>\n"},"target":{"type":["string"],"description":"<p>The same meaning as <code class=\"codespan\">target</code> in <code class=\"codespan\">html</code> <code class=\"codespan\">&lt;a&gt;</code> label, See <a href=\"#series-treemap.data.link\">series-treemap.data.link</a>. Option values are: <code class=\"codespan\">&#39;blank&#39;</code> or <code class=\"codespan\">&#39;self&#39;</code>.</p>\n","default":"'blank'"},"children":{"type":["Array"],"description":"<p>child nodes, recursive definition, configurations are the same as <a href=\"#series-treemap.data\">series-treemap.data</a>.</p>\n"},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1500},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"quinticInOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><a href=\"https://en.wikipedia.org/wiki/Pie_chart#Ring_chart_/_Sunburst_chart_/_Multilevel_pie_chart\" target=\"_blank\">Sunburst Chart</a> is composed of multiple pie charts. From the view of data structure, inner rings are the parent nodes of outer rings. Therefore, it can show the partial-overall relationship as <a href=\"#series-pie\">Pie</a> charts, and also level relation as <a href=\"#series-treemap\">Treemap</a> charts.</p>\n<p><strong>For example:</strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-monochrome&edit=1&reset=1\" width=\"700\" height=\"500\"><iframe />\n\n\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-drink&edit=1&reset=1\" width=\"700\" height=\"700\"><iframe />\n\n\n<p><strong>Data mining</strong></p>\n<p>Sunburst charts support data mining by default. That means, when a user clicks a sector, it will be used as root node, and there will be a circle in the center for return to parent node. If data mining is not needed, it can be disabled by <a href=\"#series-treemap.nodeClick\">series-sunburst.nodeClick</a>.</p>\n","properties":{"type":{"type":["string"],"description":"","default":"'sunburst'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"center":{"type":["Array"],"description":"<p>Center position of Sunburst chart, the first of which is the horizontal position, and the second is the vertical position.</p>\n<p>Percentage is supported. When set in percentage, the item is relative to the container width, and the second item to the height.</p>\n<p><strong>Example: </strong></p>\n<pre><code>// Set to absolute pixel values\ncenter: [400, 300]\n// Set to relative percent\ncenter: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>","default":"['50%', '50%']"},"radius":{"type":["number","string","Array"],"description":"<p>Radius of Sunburst chart. Value can be:</p>\n<ul>\n<li><code class=\"codespan\">number</code>: Specify outside radius directly.</li>\n<li><p><code class=\"codespan\">string</code>: For example, <code class=\"codespan\">&#39;20%&#39;</code>, means that the outside radius is 20% of the viewport size (the little one between width and height of the chart container).</p>\n</li>\n<li><p><code class=\"codespan\">Array.&lt;number|string&gt;</code>: The first item specifies the inside radius, and the second item specifies the outside radius. Each item follows the definitions above.</p>\n</li>\n</ul>\n","default":"[0, '75%']"},"data":{"type":["Array"],"description":"<p>The data structure of <a href=\"#series-sunburst.data\">series-sunburst.data</a> is like tree. For example:</p>\n<pre><code class=\"lang-js\">[{\n    name: &#39;parent1&#39;,\n    value: 10,          // value of parent node can be left unset, and sum of\n                        // children values will be used in this case.\n                        // If is set, and is larger than sum of children nodes,\n                        // the reset can be used for other parts in parent.\n    children: [{\n        value: 5,\n        name: &#39;child1&#39;,\n        children: [{\n            value: 2,\n            name: &#39;grandchild1&#39;,\n            itemStyle: {\n                // every data can have its own itemStyle,\n                // which will overwrites series.itemStyle and level.itemStyle\n            },\n            label: {\n                // label style, the same to above\n            }\n        }]\n    }, {\n        value: 3,\n        name: &#39;child2&#39;\n    }],\n    itemStyle: {\n        // itemStyle of parent1, which will not be inherited for children\n    },\n    label: {\n        // label of parent1, which will not be inherited for children\n    }\n}, {\n    name: &#39;parent2&#39;,\n    value: 4\n}]\n</code></pre>\n","items":{"type":"Object","properties":{"value":{"type":["number"],"description":"<p>Value for each item. If contains children, value can be left unset, and sum of children values will be used in this case.</p>\n"},"name":{"type":["string"],"description":"<p>Name displayed in each sector.</p>\n"},"link":{"type":["string"],"description":"<p>Link address that redirects to when this sector is clicked. Only useful when <a href=\"#series-treemap.nodeClick\">series-sunburst.nodeClick</a> is set to be <code class=\"codespan\">&#39;link&#39;</code>.</p>\n<p>See <a href=\"#series-sunburst.data.target\">series-sunburst.data.target</a>.</p>\n"},"target":{"type":["string"],"description":"<p>Like <code class=\"codespan\">target</code> attribute of HTML <code class=\"codespan\">&lt;a&gt;</code>, which can either be <code class=\"codespan\">&#39;blank&#39;</code> or <code class=\"codespan\">&#39;self&#39;</code>. See <a href=\"#series-sunburst.data.link\">series-sunburst.data.link</a>.</p>\n","default":"'blank'"},"label":{"type":["Object"],"description":"<p><code class=\"codespan\">label</code> sets the text style for every sectors.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.label\">series.data.label</a> &gt; <a href=\"#series-sunburst.levels.label\">series.levels.label</a> &gt; <a href=\"#series-sunburst.label\">series.label</a>.</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"rotate":{"type":["string","number"],"description":"<p>If it is <code class=\"codespan\">number</code> type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.</p>\n<p>Besides, it can be string <code class=\"codespan\">&#39;radial&#39;</code>, standing for radial rotation; or <code class=\"codespan\">&#39;tangential&#39;</code>, standing for tangential rotation.</p>\n<p>By default, it is <code class=\"codespan\">&#39;radial&#39;</code>. If no rotation is wanted, it can be set to <code class=\"codespan\">0</code>.</p>\n<p>The following example shows different <code class=\"codespan\">rotate</code> settings:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'radial'"},"align":{"type":["string"],"description":"<p>Align of text, which can be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>. Note that <code class=\"codespan\">&#39;left&#39;</code> stands for inner side, and <code class=\"codespan\">&#39;right&#39;</code> stands for outer side.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'center'"},"minAngle":{"type":["number"],"description":"<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n","default":null},"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of Sunburst sectors.</p>\n<p>Style can be set in <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> for sectors of this series, or <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> for the whole level, or<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> for single sector. If <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> is defined, it will cover the setting of <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> and <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> &gt; <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> &gt; <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>.</strong></p>\n<p>In ECharts, <em>emphasis</em> is for styles when mouse hovers. For Sunburst charts, there are two extra states: <em>highlight</em> for highlighting items that relates to the emphasized one, and <em>downplay</em> for others when emphasizing an item. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"'white'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":1}}},"emphasis":{"type":["Object"],"description":"<p>Item style when mouse is hovering. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"label":{"type":["Object"],"description":"<p><code class=\"codespan\">label</code> sets the text style for every sectors.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.label\">series.data.label</a> &gt; <a href=\"#series-sunburst.levels.label\">series.levels.label</a> &gt; <a href=\"#series-sunburst.label\">series.label</a>.</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"rotate":{"type":["string","number"],"description":"<p>If it is <code class=\"codespan\">number</code> type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.</p>\n<p>Besides, it can be string <code class=\"codespan\">&#39;radial&#39;</code>, standing for radial rotation; or <code class=\"codespan\">&#39;tangential&#39;</code>, standing for tangential rotation.</p>\n<p>By default, it is <code class=\"codespan\">&#39;radial&#39;</code>. If no rotation is wanted, it can be set to <code class=\"codespan\">0</code>.</p>\n<p>The following example shows different <code class=\"codespan\">rotate</code> settings:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'radial'"},"align":{"type":["string"],"description":"<p>Align of text, which can be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>. Note that <code class=\"codespan\">&#39;left&#39;</code> stands for inner side, and <code class=\"codespan\">&#39;right&#39;</code> stands for outer side.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'center'"},"minAngle":{"type":["number"],"description":"<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n","default":null},"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of Sunburst sectors.</p>\n<p>Style can be set in <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> for sectors of this series, or <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> for the whole level, or<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> for single sector. If <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> is defined, it will cover the setting of <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> and <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> &gt; <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> &gt; <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>.</strong></p>\n<p>In ECharts, <em>emphasis</em> is for styles when mouse hovers. For Sunburst charts, there are two extra states: <em>highlight</em> for highlighting items that relates to the emphasized one, and <em>downplay</em> for others when emphasizing an item. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"'white'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":1}}}}},"highlight":{"type":["Object"],"description":"<p>Item style when mouse is hovering related items. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"label":{"type":["Object"],"description":"<p><code class=\"codespan\">label</code> sets the text style for every sectors.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.label\">series.data.label</a> &gt; <a href=\"#series-sunburst.levels.label\">series.levels.label</a> &gt; <a href=\"#series-sunburst.label\">series.label</a>.</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"rotate":{"type":["string","number"],"description":"<p>If it is <code class=\"codespan\">number</code> type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.</p>\n<p>Besides, it can be string <code class=\"codespan\">&#39;radial&#39;</code>, standing for radial rotation; or <code class=\"codespan\">&#39;tangential&#39;</code>, standing for tangential rotation.</p>\n<p>By default, it is <code class=\"codespan\">&#39;radial&#39;</code>. If no rotation is wanted, it can be set to <code class=\"codespan\">0</code>.</p>\n<p>The following example shows different <code class=\"codespan\">rotate</code> settings:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'radial'"},"align":{"type":["string"],"description":"<p>Align of text, which can be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>. Note that <code class=\"codespan\">&#39;left&#39;</code> stands for inner side, and <code class=\"codespan\">&#39;right&#39;</code> stands for outer side.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'center'"},"minAngle":{"type":["number"],"description":"<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n","default":null},"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of Sunburst sectors.</p>\n<p>Style can be set in <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> for sectors of this series, or <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> for the whole level, or<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> for single sector. If <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> is defined, it will cover the setting of <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> and <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> &gt; <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> &gt; <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>.</strong></p>\n<p>In ECharts, <em>emphasis</em> is for styles when mouse hovers. For Sunburst charts, there are two extra states: <em>highlight</em> for highlighting items that relates to the emphasized one, and <em>downplay</em> for others when emphasizing an item. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"'white'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":1}}}}},"downplay":{"type":["Object"],"description":"<p>Item style when mouse is hovering unrelated items. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"label":{"type":["Object"],"description":"<p><code class=\"codespan\">label</code> sets the text style for every sectors.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.label\">series.data.label</a> &gt; <a href=\"#series-sunburst.levels.label\">series.levels.label</a> &gt; <a href=\"#series-sunburst.label\">series.label</a>.</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"rotate":{"type":["string","number"],"description":"<p>If it is <code class=\"codespan\">number</code> type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.</p>\n<p>Besides, it can be string <code class=\"codespan\">&#39;radial&#39;</code>, standing for radial rotation; or <code class=\"codespan\">&#39;tangential&#39;</code>, standing for tangential rotation.</p>\n<p>By default, it is <code class=\"codespan\">&#39;radial&#39;</code>. If no rotation is wanted, it can be set to <code class=\"codespan\">0</code>.</p>\n<p>The following example shows different <code class=\"codespan\">rotate</code> settings:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'radial'"},"align":{"type":["string"],"description":"<p>Align of text, which can be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>. Note that <code class=\"codespan\">&#39;left&#39;</code> stands for inner side, and <code class=\"codespan\">&#39;right&#39;</code> stands for outer side.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'center'"},"minAngle":{"type":["number"],"description":"<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n","default":null},"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of Sunburst sectors.</p>\n<p>Style can be set in <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> for sectors of this series, or <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> for the whole level, or<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> for single sector. If <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> is defined, it will cover the setting of <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> and <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> &gt; <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> &gt; <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>.</strong></p>\n<p>In ECharts, <em>emphasis</em> is for styles when mouse hovers. For Sunburst charts, there are two extra states: <em>highlight</em> for highlighting items that relates to the emphasized one, and <em>downplay</em> for others when emphasizing an item. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"'white'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":1}}}}},"children":{"type":["Array"],"description":"<p>Children nodes, which is recursively defined. In the same format to <a href=\"#series-sunburst.data\">series-sunburst.data</a>.</p>\n"}}}},"label":{"type":["Object"],"description":"<p><code class=\"codespan\">label</code> sets the text style for every sectors.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.label\">series.data.label</a> &gt; <a href=\"#series-sunburst.levels.label\">series.levels.label</a> &gt; <a href=\"#series-sunburst.label\">series.label</a>.</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"rotate":{"type":["string","number"],"description":"<p>If it is <code class=\"codespan\">number</code> type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.</p>\n<p>Besides, it can be string <code class=\"codespan\">&#39;radial&#39;</code>, standing for radial rotation; or <code class=\"codespan\">&#39;tangential&#39;</code>, standing for tangential rotation.</p>\n<p>By default, it is <code class=\"codespan\">&#39;radial&#39;</code>. If no rotation is wanted, it can be set to <code class=\"codespan\">0</code>.</p>\n<p>The following example shows different <code class=\"codespan\">rotate</code> settings:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'radial'"},"align":{"type":["string"],"description":"<p>Align of text, which can be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>. Note that <code class=\"codespan\">&#39;left&#39;</code> stands for inner side, and <code class=\"codespan\">&#39;right&#39;</code> stands for outer side.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'center'"},"minAngle":{"type":["number"],"description":"<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n","default":null},"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of Sunburst sectors.</p>\n<p>Style can be set in <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> for sectors of this series, or <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> for the whole level, or<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> for single sector. If <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> is defined, it will cover the setting of <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> and <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> &gt; <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> &gt; <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>.</strong></p>\n<p>In ECharts, <em>emphasis</em> is for styles when mouse hovers. For Sunburst charts, there are two extra states: <em>highlight</em> for highlighting items that relates to the emphasized one, and <em>downplay</em> for others when emphasizing an item. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"'white'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":1}}},"highlightPolicy":{"type":["string"],"description":"<p>When mouse hovers a sector, the sector is emphasized. <strong>If <code class=\"codespan\">highlightPolicy</code> is set to be <code class=\"codespan\">&#39;descendant&#39;</code>, then the sector and its descendant will be <em>highlighted</em>, and others will be <em>downplayed</em>. If <code class=\"codespan\">highlightPolicy</code> is <code class=\"codespan\">&#39;ancestor&#39;</code>, then the sector and its ancestors will be highlighted. If it is set to be <code class=\"codespan\">&#39;self&#39;</code>, then the sector will be highlighted and others downplayed. If it is set to be <code class=\"codespan\">&#39;none&#39;</code>, then others will not be downplayed.</strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-highlight-descendant&edit=1&reset=1\" width=\"700\" height=\"350\"><iframe />\n\n\n<p>The <code class=\"codespan\">highlightPolicy</code> value above is the default value <code class=\"codespan\">&#39;descendant&#39;</code>. We use <code class=\"codespan\">dispatchAction</code> to highlight certain sector. Target sector will use the style of <code class=\"codespan\">emphasis</code>, and related sectors decided by <code class=\"codespan\">highlightPolicy</code> uses the style of <code class=\"codespan\">highlight</code>, and others use <code class=\"codespan\">downplay</code>.</p>\n<pre><code class=\"lang-js\">itemStyle: {\n    color: &#39;yellow&#39;,\n    borderWidth: 2,\n    emphasis: {\n        color: &#39;red&#39;\n    },\n    highlight: {\n        color: &#39;orange&#39;\n    },\n    downplay: {\n        color: &#39;#ccc&#39;\n    }\n}\n</code></pre>\n<p>If <code class=\"codespan\">highlightPolicy</code> is set to be <code class=\"codespan\">&#39;ancestor&#39;</code>, then the result looks like:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-highlight-ancestor&edit=1&reset=1\" width=\"700\" height=\"350\"><iframe />\n\n\n\n","default":"'descendant'"},"nodeClick":{"type":["boolean","string"],"description":"<p>The action of clicking a sector, which can be:</p>\n<ul>\n<li><code class=\"codespan\">false</code>: nothing happens.</li>\n<li><code class=\"codespan\">&#39;rootToNode&#39;</code>: use the clicked sector as root.</li>\n<li><code class=\"codespan\">&#39;link&#39;</code>:if <a href=\"#series-sunburst.data.link\">link</a> is set, the page will redirect to it.</li>\n</ul>\n","default":"'rootToNode'"},"sort":{"type":["string","Function"],"description":"<p>Sorting method that sectors use based on <a href=\"#series-sunburst.data.value\"><code class=\"codespan\">value</code></a>, which is the sum of children when not set. The default value <code class=\"codespan\">&#39;desc&#39;</code> states for descending order, while it can also be set to be <code class=\"codespan\">&#39;asc&#39;</code> for ascending order, or <code class=\"codespan\">null</code> for not sorting, or callback function like:</p>\n<pre><code class=\"lang-js\">function(nodeA, nodeB) {\n    return nodeA.getValue() - nodeB.getValue();\n}\n</code></pre>\n","default":"'desc'"},"renderLabelForZeroData":{"type":["boolean"],"description":"<p>If there is no <code class=\"codespan\">name</code>, whether need to render it.</p>\n","default":false},"emphasis":{"type":["Object"],"description":"<p>Item style when mouse is hovering. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"label":{"type":["Object"],"description":"<p><code class=\"codespan\">label</code> sets the text style for every sectors.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.label\">series.data.label</a> &gt; <a href=\"#series-sunburst.levels.label\">series.levels.label</a> &gt; <a href=\"#series-sunburst.label\">series.label</a>.</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"rotate":{"type":["string","number"],"description":"<p>If it is <code class=\"codespan\">number</code> type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.</p>\n<p>Besides, it can be string <code class=\"codespan\">&#39;radial&#39;</code>, standing for radial rotation; or <code class=\"codespan\">&#39;tangential&#39;</code>, standing for tangential rotation.</p>\n<p>By default, it is <code class=\"codespan\">&#39;radial&#39;</code>. If no rotation is wanted, it can be set to <code class=\"codespan\">0</code>.</p>\n<p>The following example shows different <code class=\"codespan\">rotate</code> settings:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'radial'"},"align":{"type":["string"],"description":"<p>Align of text, which can be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>. Note that <code class=\"codespan\">&#39;left&#39;</code> stands for inner side, and <code class=\"codespan\">&#39;right&#39;</code> stands for outer side.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'center'"},"minAngle":{"type":["number"],"description":"<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n","default":null},"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of Sunburst sectors.</p>\n<p>Style can be set in <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> for sectors of this series, or <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> for the whole level, or<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> for single sector. If <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> is defined, it will cover the setting of <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> and <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> &gt; <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> &gt; <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>.</strong></p>\n<p>In ECharts, <em>emphasis</em> is for styles when mouse hovers. For Sunburst charts, there are two extra states: <em>highlight</em> for highlighting items that relates to the emphasized one, and <em>downplay</em> for others when emphasizing an item. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"'white'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":1}}}}},"highlight":{"type":["Object"],"description":"<p>Item style when mouse is hovering related items. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"label":{"type":["Object"],"description":"<p><code class=\"codespan\">label</code> sets the text style for every sectors.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.label\">series.data.label</a> &gt; <a href=\"#series-sunburst.levels.label\">series.levels.label</a> &gt; <a href=\"#series-sunburst.label\">series.label</a>.</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"rotate":{"type":["string","number"],"description":"<p>If it is <code class=\"codespan\">number</code> type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.</p>\n<p>Besides, it can be string <code class=\"codespan\">&#39;radial&#39;</code>, standing for radial rotation; or <code class=\"codespan\">&#39;tangential&#39;</code>, standing for tangential rotation.</p>\n<p>By default, it is <code class=\"codespan\">&#39;radial&#39;</code>. If no rotation is wanted, it can be set to <code class=\"codespan\">0</code>.</p>\n<p>The following example shows different <code class=\"codespan\">rotate</code> settings:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'radial'"},"align":{"type":["string"],"description":"<p>Align of text, which can be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>. Note that <code class=\"codespan\">&#39;left&#39;</code> stands for inner side, and <code class=\"codespan\">&#39;right&#39;</code> stands for outer side.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'center'"},"minAngle":{"type":["number"],"description":"<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n","default":null},"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of Sunburst sectors.</p>\n<p>Style can be set in <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> for sectors of this series, or <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> for the whole level, or<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> for single sector. If <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> is defined, it will cover the setting of <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> and <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> &gt; <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> &gt; <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>.</strong></p>\n<p>In ECharts, <em>emphasis</em> is for styles when mouse hovers. For Sunburst charts, there are two extra states: <em>highlight</em> for highlighting items that relates to the emphasized one, and <em>downplay</em> for others when emphasizing an item. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"'white'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":1}}}}},"downplay":{"type":["Object"],"description":"<p>Item style when mouse is hovering unrelated items. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"label":{"type":["Object"],"description":"<p><code class=\"codespan\">label</code> sets the text style for every sectors.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.label\">series.data.label</a> &gt; <a href=\"#series-sunburst.levels.label\">series.levels.label</a> &gt; <a href=\"#series-sunburst.label\">series.label</a>.</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"rotate":{"type":["string","number"],"description":"<p>If it is <code class=\"codespan\">number</code> type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.</p>\n<p>Besides, it can be string <code class=\"codespan\">&#39;radial&#39;</code>, standing for radial rotation; or <code class=\"codespan\">&#39;tangential&#39;</code>, standing for tangential rotation.</p>\n<p>By default, it is <code class=\"codespan\">&#39;radial&#39;</code>. If no rotation is wanted, it can be set to <code class=\"codespan\">0</code>.</p>\n<p>The following example shows different <code class=\"codespan\">rotate</code> settings:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'radial'"},"align":{"type":["string"],"description":"<p>Align of text, which can be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>. Note that <code class=\"codespan\">&#39;left&#39;</code> stands for inner side, and <code class=\"codespan\">&#39;right&#39;</code> stands for outer side.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'center'"},"minAngle":{"type":["number"],"description":"<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n","default":null},"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of Sunburst sectors.</p>\n<p>Style can be set in <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> for sectors of this series, or <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> for the whole level, or<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> for single sector. If <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> is defined, it will cover the setting of <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> and <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> &gt; <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> &gt; <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>.</strong></p>\n<p>In ECharts, <em>emphasis</em> is for styles when mouse hovers. For Sunburst charts, there are two extra states: <em>highlight</em> for highlighting items that relates to the emphasized one, and <em>downplay</em> for others when emphasizing an item. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"'white'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":1}}}}},"levels":{"type":["Array"],"description":"<p><strong>Multiple levels</strong></p>\n<p>Sunburst chart has a leveled structure. To make it convenient, we provide a <code class=\"codespan\">levels</code> option, which is an array. The first element of it is for returning to parent node when data mining. The following elements are for levels from center to outside.</p>\n<p>For example, if we don&#39;t want the data mining, and want to set the most inside sector to be red, and text to be blue, we can set the option like:</p>\n<pre><code class=\"lang-js\">series: {\n    // ...\n    levels: [\n        {\n            // Blank setting for data mining\n        },\n        {\n            // The most inside level\n            itemStyle: {\n                color: &#39;red&#39;\n            },\n            label: {\n                color: &#39;blue&#39;\n            }\n        },\n        {\n            // The second level\n        }\n    ]\n}\n</code></pre>\n","items":{"type":"Object","properties":{"label":{"type":["Object"],"description":"<p><code class=\"codespan\">label</code> sets the text style for every sectors.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.label\">series.data.label</a> &gt; <a href=\"#series-sunburst.levels.label\">series.levels.label</a> &gt; <a href=\"#series-sunburst.label\">series.label</a>.</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"rotate":{"type":["string","number"],"description":"<p>If it is <code class=\"codespan\">number</code> type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.</p>\n<p>Besides, it can be string <code class=\"codespan\">&#39;radial&#39;</code>, standing for radial rotation; or <code class=\"codespan\">&#39;tangential&#39;</code>, standing for tangential rotation.</p>\n<p>By default, it is <code class=\"codespan\">&#39;radial&#39;</code>. If no rotation is wanted, it can be set to <code class=\"codespan\">0</code>.</p>\n<p>The following example shows different <code class=\"codespan\">rotate</code> settings:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'radial'"},"align":{"type":["string"],"description":"<p>Align of text, which can be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>. Note that <code class=\"codespan\">&#39;left&#39;</code> stands for inner side, and <code class=\"codespan\">&#39;right&#39;</code> stands for outer side.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'center'"},"minAngle":{"type":["number"],"description":"<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n","default":null},"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of Sunburst sectors.</p>\n<p>Style can be set in <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> for sectors of this series, or <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> for the whole level, or<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> for single sector. If <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> is defined, it will cover the setting of <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> and <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> &gt; <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> &gt; <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>.</strong></p>\n<p>In ECharts, <em>emphasis</em> is for styles when mouse hovers. For Sunburst charts, there are two extra states: <em>highlight</em> for highlighting items that relates to the emphasized one, and <em>downplay</em> for others when emphasizing an item. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"'white'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":1}}},"emphasis":{"type":["Object"],"description":"<p>Item style when mouse is hovering. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"label":{"type":["Object"],"description":"<p><code class=\"codespan\">label</code> sets the text style for every sectors.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.label\">series.data.label</a> &gt; <a href=\"#series-sunburst.levels.label\">series.levels.label</a> &gt; <a href=\"#series-sunburst.label\">series.label</a>.</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"rotate":{"type":["string","number"],"description":"<p>If it is <code class=\"codespan\">number</code> type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.</p>\n<p>Besides, it can be string <code class=\"codespan\">&#39;radial&#39;</code>, standing for radial rotation; or <code class=\"codespan\">&#39;tangential&#39;</code>, standing for tangential rotation.</p>\n<p>By default, it is <code class=\"codespan\">&#39;radial&#39;</code>. If no rotation is wanted, it can be set to <code class=\"codespan\">0</code>.</p>\n<p>The following example shows different <code class=\"codespan\">rotate</code> settings:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'radial'"},"align":{"type":["string"],"description":"<p>Align of text, which can be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>. Note that <code class=\"codespan\">&#39;left&#39;</code> stands for inner side, and <code class=\"codespan\">&#39;right&#39;</code> stands for outer side.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'center'"},"minAngle":{"type":["number"],"description":"<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n","default":null},"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of Sunburst sectors.</p>\n<p>Style can be set in <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> for sectors of this series, or <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> for the whole level, or<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> for single sector. If <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> is defined, it will cover the setting of <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> and <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> &gt; <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> &gt; <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>.</strong></p>\n<p>In ECharts, <em>emphasis</em> is for styles when mouse hovers. For Sunburst charts, there are two extra states: <em>highlight</em> for highlighting items that relates to the emphasized one, and <em>downplay</em> for others when emphasizing an item. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"'white'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":1}}}}},"highlight":{"type":["Object"],"description":"<p>Item style when mouse is hovering related items. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"label":{"type":["Object"],"description":"<p><code class=\"codespan\">label</code> sets the text style for every sectors.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.label\">series.data.label</a> &gt; <a href=\"#series-sunburst.levels.label\">series.levels.label</a> &gt; <a href=\"#series-sunburst.label\">series.label</a>.</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"rotate":{"type":["string","number"],"description":"<p>If it is <code class=\"codespan\">number</code> type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.</p>\n<p>Besides, it can be string <code class=\"codespan\">&#39;radial&#39;</code>, standing for radial rotation; or <code class=\"codespan\">&#39;tangential&#39;</code>, standing for tangential rotation.</p>\n<p>By default, it is <code class=\"codespan\">&#39;radial&#39;</code>. If no rotation is wanted, it can be set to <code class=\"codespan\">0</code>.</p>\n<p>The following example shows different <code class=\"codespan\">rotate</code> settings:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'radial'"},"align":{"type":["string"],"description":"<p>Align of text, which can be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>. Note that <code class=\"codespan\">&#39;left&#39;</code> stands for inner side, and <code class=\"codespan\">&#39;right&#39;</code> stands for outer side.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'center'"},"minAngle":{"type":["number"],"description":"<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n","default":null},"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of Sunburst sectors.</p>\n<p>Style can be set in <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> for sectors of this series, or <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> for the whole level, or<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> for single sector. If <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> is defined, it will cover the setting of <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> and <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> &gt; <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> &gt; <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>.</strong></p>\n<p>In ECharts, <em>emphasis</em> is for styles when mouse hovers. For Sunburst charts, there are two extra states: <em>highlight</em> for highlighting items that relates to the emphasized one, and <em>downplay</em> for others when emphasizing an item. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"'white'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":1}}}}},"downplay":{"type":["Object"],"description":"<p>Item style when mouse is hovering unrelated items. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"label":{"type":["Object"],"description":"<p><code class=\"codespan\">label</code> sets the text style for every sectors.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.label\">series.data.label</a> &gt; <a href=\"#series-sunburst.levels.label\">series.levels.label</a> &gt; <a href=\"#series-sunburst.label\">series.label</a>.</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"rotate":{"type":["string","number"],"description":"<p>If it is <code class=\"codespan\">number</code> type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.</p>\n<p>Besides, it can be string <code class=\"codespan\">&#39;radial&#39;</code>, standing for radial rotation; or <code class=\"codespan\">&#39;tangential&#39;</code>, standing for tangential rotation.</p>\n<p>By default, it is <code class=\"codespan\">&#39;radial&#39;</code>. If no rotation is wanted, it can be set to <code class=\"codespan\">0</code>.</p>\n<p>The following example shows different <code class=\"codespan\">rotate</code> settings:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'radial'"},"align":{"type":["string"],"description":"<p>Align of text, which can be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>. Note that <code class=\"codespan\">&#39;left&#39;</code> stands for inner side, and <code class=\"codespan\">&#39;right&#39;</code> stands for outer side.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'center'"},"minAngle":{"type":["number"],"description":"<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n","default":null},"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of Sunburst sectors.</p>\n<p>Style can be set in <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> for sectors of this series, or <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> for the whole level, or<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> for single sector. If <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> is defined, it will cover the setting of <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> and <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> &gt; <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> &gt; <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>.</strong></p>\n<p>In ECharts, <em>emphasis</em> is for styles when mouse hovers. For Sunburst charts, there are two extra states: <em>highlight</em> for highlighting items that relates to the emphasized one, and <em>downplay</em> for others when emphasizing an item. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"'white'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":1}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":500},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},{"type":["Object"],"description":"<p><a href=\"https://en.wikipedia.org/wiki/Box_plot\" target=\"_blank\">Boxplot</a> is a convenient way of graphically depicting groups of numerical data through their quartiles.</p>\n<p><strong>Example:</strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=boxplot-light-velocity&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n<p><br>\nMultiple <code class=\"codespan\">series</code> can be displayed in the same coordinate system. Please refer to <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=boxplot-multi&amp;edit=1&amp;reset=1\" target=\"_blank\">this example</a>.</p>\n<p><br>\n<br></p>\n","properties":{"type":{"type":["string"],"description":"","default":"'boxplot'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;cartesian2d&#39;</code></p>\n<p>  Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-cartesian2d.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-cartesian2d.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n","default":"'cartesian2d'"},"xAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#xAxis\">x axis</a> to combine with, which is  useful for multiple x axes in one chart.</p>\n","default":0},"yAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#yAxis\">y axis</a> to combine with, which is  useful for multiple y axes in one chart.</p>\n","default":0},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"legendHoverLink":{"type":["boolean"],"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n","default":true},"hoverAnimation":{"type":["boolean"],"description":"<p>Whether to enable the animation when hovering on box.</p>\n","default":true},"layout":{"type":["string"],"description":"<p>Layout methods, whose optional values are:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;horizontal&#39;</code>: horizontally layout all boxes.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;vertical&#39;</code>: vertically layout all boxes.</p>\n</li>\n</ul>\n<p>The default value is decided by:</p>\n<ul>\n<li>if there is a <code class=\"codespan\">category</code> axis:<ul>\n<li>if it is horizontal, use <code class=\"codespan\">&#39;horizontal&#39;</code>;</li>\n<li>otherwise use <code class=\"codespan\">&#39;vertical&#39;</code>;</li>\n</ul>\n</li>\n<li>otherwise use <code class=\"codespan\">&#39;horizontal&#39;</code>.</li>\n</ul>\n","default":null},"boxWidth":{"type":["Array"],"description":"<p>Up and bottom boundary of box width. The array is in the form of <code class=\"codespan\">[min, max]</code>.</p>\n<p>It could be absolute value in pixel, such as <code class=\"codespan\">[7, 50]</code>, or percentage, such as <code class=\"codespan\">[&#39;40%&#39;, &#39;90%&#39;]</code>. The percentage means the percentage to the maximum possible width.</p>\n","default":"[7, 50]"},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>boxplot color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#fff"},"borderColor":{"type":["Color"],"description":"<p>boxplot border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p>boxplot border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>boxplot color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#fff"},"borderColor":{"type":["Color"],"description":"<p>boxplot border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p>boxplot border width. No border when it is set to be 0.</p>\n","default":2},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":5},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"rgba(0,0,0,0.4)"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":2},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":2},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"dimensions":{"type":["Array"],"description":"<p><code class=\"codespan\">dimensions</code> can be used to define dimension info for <code class=\"codespan\">series.data</code> or <code class=\"codespan\">dataset.source</code>.</p>\n<p>Notice: if <a href=\"#dataset\">dataset</a> is used, we can provide dimension names in the first column/row of <a href=\"#dataset.source\">dataset.source</a>, and not need to specify <code class=\"codespan\">dimensions</code> here. But if <code class=\"codespan\">dimensions</code> is specified here, echarts will not retrieve dimension names from the first row/column of <code class=\"codespan\">dataset.source</code> any more.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\n    ]\n}\n</code></pre>\n<p>Each data item of <code class=\"codespan\">dimensions</code> can be:</p>\n<ul>\n<li><code class=\"codespan\">string</code>, for example, <code class=\"codespan\">&#39;someName&#39;</code>, which equals to <code class=\"codespan\">{name: &#39;someName&#39;}</code>.</li>\n<li><code class=\"codespan\">Object</code>, where the attributes can be:<ul>\n<li>name: <code class=\"codespan\">string</code>.</li>\n<li>type: <code class=\"codespan\">string</code>, supports:<ul>\n<li><code class=\"codespan\">number</code></li>\n<li><code class=\"codespan\">float</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array\" target=\"_blank\">Float64Array</a></li>\n<li><code class=\"codespan\">int</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array\" target=\"_blank\">Int32Array</a></li>\n<li><code class=\"codespan\">ordinal</code>, discrete value, which represents string generally.</li>\n<li><code class=\"codespan\">time</code>, time value, see <a href=\"#series.data\">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code class=\"codespan\">string</code>, generally used in tooltip for dimension display. If not specified, use <code class=\"codespan\">name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code class=\"codespan\">dimensions</code> is specified, the default <code class=\"codespan\">tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code class=\"codespan\">tooltip</code> will displayed only value horizontally.</p>\n"},"encode":{"type":["Object"],"description":"<p>Define what is encoded to for each dimension of <code class=\"codespan\">data</code>. For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n</code></pre>\n<p>When <a href=\"#series.dimensions\">dimensions</a> is used to defined name for a certain dimension, <code class=\"codespan\">encode</code> can refer the name directly. For example:</p>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<p>The basic structure of <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code> or some special reserved names like &quot;tooltip&quot;, &quot;itemName&quot; etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code class=\"codespan\">encode</code> listed as follows:</p>\n<pre><code class=\"lang-js\">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension &quot;product&quot; and &quot;score&quot; in the tooltip.\n    tooltip: [&#39;product&#39;, &#39;score&#39;]\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // &#39;pie&#39;, &#39;funnel&#39;, where data item name can be displayed in legend.\n    itemName: 3\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension &quot;score&quot; to the X axis.\n    x: [1, 5, &#39;score&#39;],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like &#39;pie&#39;, &#39;funnel&#39; etc.:\nencode: {\n    value: 3\n}\n</code></pre>\n<p>This is an <a href=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a> for <code class=\"codespan\">encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code class=\"codespan\">encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href=\"#dataZoom\">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class=\"lang-js\">var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            return {\n                type: &#39;circle&#39;,\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: &#39;blue&#39;\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n</code></pre>\n"},"data":{"type":["Array"],"description":"<p>Data should be the two-dimensional array shown as follow.</p>\n<pre><code class=\"lang-javascript\">[\n    [655, 850, 940, 980, 1175],\n    [672.5, 800, 845, 885, 1012.5],\n    [780, 840, 855, 880, 940],\n    [621.25, 767.5, 815, 865, 1011.25],\n    { // the data item could also be an Object, so that it could contains special settings for this data item.\n        value: [713.75, 807.5, 810, 870, 963.75],\n        itemStyle: {...}\n    },\n    ...\n]\n</code></pre>\n<p>Every data item (each line in the example above) in the two-dimensional array will be rendered into a box, and each line have five values as:</p>\n<pre><code class=\"lang-javascript\">[min,  Q1,  median (or Q2),  Q3,  max]\n</code></pre>\n<p><strong>Data Processing</strong></p>\n<p>ECharts doesn&#39;t contain data processing modules, so the five statistic values should be calculated by yourself and then passes into <code class=\"codespan\">boxplot</code>.</p>\n<p>However, ECharts also provide some simple <a href=\"https://github.com/apache/incubator-echarts/tree/master/extension/dataTool\" target=\"_blank\">raw data processing tools</a>. For example, this <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=boxplot-light-velocity&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a> uses <code class=\"codespan\">echarts.dataTool.prepareBoxplotData</code> to proceed simple data statistics.</p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Name of data item.</p>\n"},"value":{"type":["Array"],"description":"<p>Value of data item.</p>\n<pre><code class=\"lang-javascript\">[min,  Q1,  median (or Q2),  Q3,  max]\n</code></pre>\n"},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>boxplot color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#fff"},"borderColor":{"type":["Color"],"description":"<p>boxplot border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p>boxplot border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>boxplot color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#fff"},"borderColor":{"type":["Color"],"description":"<p>boxplot border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p>boxplot border width. No border when it is set to be 0.</p>\n","default":2},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":5},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"rgba(0,0,0,0.4)"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":2},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":2},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-boxplot.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-boxplot.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-boxplot.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-boxplot.markPoint.data.x\">x</a>, <a href=\"#series-boxplot.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-boxplot.markPoint.data.coord\">coord</a> attribute, in which <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-boxplot.markPoint.data.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-boxplot.markPoint.data.valueIndex\">valueIndex</a> or <a href=\"#series-boxplot.markPoint.data.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n    {\n        name: &#39;maximum&#39;,\n        type: &#39;max&#39;\n    }, \n    {\n        name: &#39;coordinate&#39;,\n        coord: [10, 20]\n    }, {\n        name: &#39;fixed x position&#39;,\n        yAxis: 10,\n        x: &#39;90%&#39;\n    }, \n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Available when using <a href=\"#series-boxplot.markPoint.data.type\">type</a> it is used to assign maximum value and minimum value in dimensions, it could be <code class=\"codespan\">0</code> (xAxis, radiusAxis), <code class=\"codespan\">1</code> (yAxis, angleAxis), and use the first value axis dimension by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-boxplot.markPoint.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["Object"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-boxplot.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class=\"codespan\">symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-boxplot.markLine.data.0.x\">x</a>, <a href=\"#series-boxplot.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-boxplot.markLine.data.0.coord\">coord</a> attribute, in which <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-boxplot.markLine.data.0.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-boxplot.markLine.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-boxplot.markLine.data.0.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n<li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code class=\"codespan\">xAxis</code> or <code class=\"codespan\">yAxis</code>. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a> for example.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p>You may also set the type of mark line through <code class=\"codespan\">type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code class=\"codespan\">valueIndex</code>.</p>\n<pre><code>data: [\n    {\n        name: &#39;average line&#39;,\n        // &#39;average&#39;, &#39;min&#39;, and &#39;max&#39; are supported\n        type: &#39;average&#39;\n    },\n    {\n        name: &#39;Horizontal line with Y value at 100&#39;,\n        yAxis: 100\n    },\n    [\n        {\n            // Use the same name with starting and ending point\n            name: &#39;Minimum to Maximum&#39;,\n            type: &#39;min&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n    [\n        {\n            name: &#39;Markline between two points&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [{\n        // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n        yAxis: &#39;max&#39;,\n        x: &#39;90%&#39;\n    }, {\n        type: &#39;max&#39;\n    }],\n    [\n        {\n            name: &#39;Mark line between two points&#39;,\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n<li><code class=\"codespan\">&#39;median&#39;</code> median value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-boxplot.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-boxplot.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'starting point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n<li><code class=\"codespan\">&#39;median&#39;</code> median value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-boxplot.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-boxplot.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'ending point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code class=\"codespan\">data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li><p>Specify the coordinate in screen coordinate system using <a href=\"#series-boxplot.markArea.data.0.x\">x</a>, <a href=\"#series-boxplot.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code class=\"codespan\">5</code>), or percent (e.g., the value is <code class=\"codespan\">&#39;35%&#39;</code>).</p>\n</li>\n<li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using\n<a href=\"#series-boxplot.markArea.data.0.coord\">coord</a>, which can be also set as <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> (e.g, <code class=\"codespan\">coord: [23, &#39;min&#39;]</code>, or <code class=\"codespan\">coord: [&#39;average&#39;, &#39;max&#39;]</code>).</p>\n</li>\n</ol>\n<ol start=\"3\">\n<li>Locate the point on the min value or max value of <code class=\"codespan\">series.data</code> using <a href=\"#series-boxplot.markArea.data.0.type\">type</a>, where <a href=\"#series-boxplot.markArea.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-boxplot.markPoint.data.0.valueDim\">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</li>\n<li>If in cartesian, you can only specify <code class=\"codespan\">xAxis</code> or <code class=\"codespan\">yAxis</code> to define a mark area based on only X or Y axis, see sample <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a></li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n\n    [\n        {\n            name: &#39;From average to max&#39;,\n            type: &#39;average&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n\n    [\n        {\n            name: &#39;Mark area between two points in data coordiantes&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [\n        {\n            name: &#39;From 60 to 80&#39;,\n            yAxis: 60\n        },\n        {\n            yAxis: 80\n        }\n    ], [\n        {\n            name: &#39;Mark area covers all data&#39;\n            coord: [&#39;min&#39;, &#39;min&#39;]\n        },\n        {\n            coord: [&#39;max&#39;, &#39;max&#39;]\n        }\n    ],\n    [\n        {\n            name: &#39;Mark area in two screen points&#39;,\n            x: 100,\n            y: 100\n        }, {\n            x: &#39;90%&#39;,\n            y: &#39;10%&#39;\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> max value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> min value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-boxplot.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-boxplot.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'start'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> max value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> min value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-boxplot.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-boxplot.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'end'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in Box plot.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in Box plot, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":800},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"elasticOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p>A <a href=\"https://en.wikipedia.org/wiki/Candlestick_chart\" target=\"_blank\">candlestick</a> chart (also called Japanese candlestick chart) is a style of financial chart used to describe price movements of a security, derivative, or currency.</p>\n<p>ECharts3 supports both <code class=\"codespan\">&#39;candlestick&#39;</code> and <code class=\"codespan\">&#39;k&#39;</code> in <a href=\"#(series.type\">series.type</a> (<code class=\"codespan\">&#39;k&#39;</code> would automatically turns into <code class=\"codespan\">&#39;candlestick&#39;</code>).</p>\n<p><strong>An example:</strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=candlestick-sh&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n\n<p><br>\n<strong>About color of increase and decrease</strong></p>\n<p>Different countries or regions have different implications on the color of candle stick chart. It may use red to imply increasing with red and decreasing with blue (in China mainland, Taiwan, Japan, Koera, and so on), or to imply increasing with green and decreasing with red (in Europe, North America, Hong Kong, Singapore, and so on). Besides color, the increase and decrease of stock may also be represented with candle stick with or without filling colors.</p>\n<p>We use red to represent increasing and blue decreasing by default. If you want to change the configuration, you may change the following parameters.</p>\n<ul>\n<li><a href=\"#series-candlestick.itemStyle.color\">series-candlestick.itemStyle.color</a>: fill color for bullish candle stick (namely, increase)</li>\n<li><a href=\"#series-candlestick.itemStyle.color0\">series-candlestick.itemStyle.color0</a>: fill color for bearish candle stick (namely, decrease)</li>\n<li><a href=\"#series-candlestick.itemStyle.borderColor\">series-candlestick.itemStyle.borderColor</a>: border color for bullish candle stick (namely, increase)</li>\n<li><a href=\"series-candlestick.itemStyle.borderColor0\" target=\"_blank\">series-candlestick.itemStyle.borderColor0</a>: border color for bearish candle stick (namely, decrease)</li>\n</ul>\n<p><br>\n<br></p>\n","properties":{"type":{"type":["string"],"description":"","default":"'candlestick'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;cartesian2d&#39;</code></p>\n<p>  Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-cartesian2d.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-cartesian2d.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n","default":"'cartesian2d'"},"xAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#xAxis\">x axis</a> to combine with, which is  useful for multiple x axes in one chart.</p>\n","default":0},"yAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#yAxis\">y axis</a> to combine with, which is  useful for multiple y axes in one chart.</p>\n","default":0},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"legendHoverLink":{"type":["boolean"],"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n","default":true},"hoverAnimation":{"type":["boolean"],"description":"<p>Whether to enable animation when hovering on box.</p>\n","default":true},"layout":{"type":["string"],"description":"<p>Layout method, whose values may be:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;horizontal&#39;</code>: horizontally layout all boxs.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;vertical&#39;</code>: vertically layout all boxs.</p>\n</li>\n</ul>\n<p>The default value is decided by:</p>\n<ul>\n<li>if there is a <code class=\"codespan\">category</code> axis:<ul>\n<li>if it is horizontal, use <code class=\"codespan\">&#39;horizontal&#39;</code>;</li>\n<li>otherwise use <code class=\"codespan\">&#39;vertical&#39;</code>;</li>\n</ul>\n</li>\n<li>otherwise use <code class=\"codespan\">&#39;horizontal&#39;</code>.</li>\n</ul>\n","default":null},"barWidth":{"type":["number"],"description":"<p>Specify bar width. Absolute value (like <code class=\"codespan\">10</code>) or percentage (like <code class=\"codespan\">&#39;20%&#39;</code>, according to band width) can be used. Auto adapt by default.</p>\n"},"barMinWidth":{"type":["number","string"],"description":"<p>Specify bar min width. Absolute value (like <code class=\"codespan\">10</code>) or percentage (like <code class=\"codespan\">&#39;20%&#39;</code>, according to band width) can be used. Auto adapt by default.</p>\n"},"barMaxWidth":{"type":["number","string"],"description":"<p>Specify bar max width. Absolute value (like <code class=\"codespan\">10</code>) or percentage (like <code class=\"codespan\">&#39;20%&#39;</code>, according to band width) can be used. Auto adapt by default.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Item style of candlestick.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color of bullish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#c23531"},"color0":{"type":["Color"],"description":"<p>Fill color of bearish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#314656"},"borderColor":{"type":["Color"],"description":"<p>Border color of bullish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#c23531"},"borderColor0":{"type":["Color"],"description":"<p>Border color of bearish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#314656"},"borderWidth":{"type":["number"],"description":"<p>Border width of candlestick. There is no border when it is <code class=\"codespan\">0</code>.</p>\n","default":1},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"<p>Emphasis style of candlestick.</p>\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Fill color of bullish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#c23531"},"color0":{"type":["Color"],"description":"<p>Fill color of bearish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#314656"},"borderColor":{"type":["Color"],"description":"<p>Border color of bullish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#c23531"},"borderColor0":{"type":["Color"],"description":"<p>Border color of bearish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#314656"},"borderWidth":{"type":["number"],"description":"<p>Border width of candlestick. There is no border when it is <code class=\"codespan\">0</code>.</p>\n","default":2},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"large":{"type":["boolean"],"description":"<p>Whether to enable the optimization of large-scale data. It could be set when large data causes performance problem.</p>\n<p>After being enabled, <code class=\"codespan\">largeThreshold</code> can be used to indicate the minimum number for turning on the optimization.</p>\n<p>But when the optimization enabled, the style of single data item can&#39;t be customized any more.</p>\n","default":true},"largeThreshold":{"type":["number"],"description":"<p>The threshold enabling the drawing optimization.</p>\n","default":600},"progressive":{"type":["number"],"description":"<p><code class=\"codespan\">progressive</code> specifies the amount of graphic elements that can be rendered within a frame (about 16ms) if &quot;progressive rendering&quot; enabled.</p>\n<p>When data amount is from thousand to more than 10 million, it will take too long time to render all of the graphic elements. Since ECharts 4, &quot;progressive rendering&quot; is supported in its workflow, which processes and renders data chunk by chunk alone with each frame, avoiding to block the UI thread of the browser.</p>\n<p>Set <code class=\"codespan\">progressive: 0</code> to disable progressive permanently. By default, progressive is auto-enabled when data amount is bigger than <code class=\"codespan\">progressiveThreshold</code>.</p>\n","default":3000},"progressiveThreshold":{"type":["number"],"description":"<p>If current data amount is over the threshold, &quot;progressive rendering&quot; is enabled.</p>\n","default":10000},"progressiveChunkMode":{"type":["string"],"description":"<p>Chunk approach, optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;sequential&#39;</code>: slice data by data index.</li>\n<li><code class=\"codespan\">&#39;mod&#39;</code>: slice data by mod, which make the data items of each chunk coming from all over the data, bringing better visual effect while progressive rendering.</li>\n</ul>\n","default":"mod"},"dimensions":{"type":["Array"],"description":"<p><code class=\"codespan\">dimensions</code> can be used to define dimension info for <code class=\"codespan\">series.data</code> or <code class=\"codespan\">dataset.source</code>.</p>\n<p>Notice: if <a href=\"#dataset\">dataset</a> is used, we can provide dimension names in the first column/row of <a href=\"#dataset.source\">dataset.source</a>, and not need to specify <code class=\"codespan\">dimensions</code> here. But if <code class=\"codespan\">dimensions</code> is specified here, echarts will not retrieve dimension names from the first row/column of <code class=\"codespan\">dataset.source</code> any more.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\n    ]\n}\n</code></pre>\n<p>Each data item of <code class=\"codespan\">dimensions</code> can be:</p>\n<ul>\n<li><code class=\"codespan\">string</code>, for example, <code class=\"codespan\">&#39;someName&#39;</code>, which equals to <code class=\"codespan\">{name: &#39;someName&#39;}</code>.</li>\n<li><code class=\"codespan\">Object</code>, where the attributes can be:<ul>\n<li>name: <code class=\"codespan\">string</code>.</li>\n<li>type: <code class=\"codespan\">string</code>, supports:<ul>\n<li><code class=\"codespan\">number</code></li>\n<li><code class=\"codespan\">float</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array\" target=\"_blank\">Float64Array</a></li>\n<li><code class=\"codespan\">int</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array\" target=\"_blank\">Int32Array</a></li>\n<li><code class=\"codespan\">ordinal</code>, discrete value, which represents string generally.</li>\n<li><code class=\"codespan\">time</code>, time value, see <a href=\"#series.data\">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code class=\"codespan\">string</code>, generally used in tooltip for dimension display. If not specified, use <code class=\"codespan\">name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code class=\"codespan\">dimensions</code> is specified, the default <code class=\"codespan\">tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code class=\"codespan\">tooltip</code> will displayed only value horizontally.</p>\n"},"encode":{"type":["Object"],"description":"<p>Define what is encoded to for each dimension of <code class=\"codespan\">data</code>. For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n</code></pre>\n<p>When <a href=\"#series.dimensions\">dimensions</a> is used to defined name for a certain dimension, <code class=\"codespan\">encode</code> can refer the name directly. For example:</p>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<p>The basic structure of <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code> or some special reserved names like &quot;tooltip&quot;, &quot;itemName&quot; etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code class=\"codespan\">encode</code> listed as follows:</p>\n<pre><code class=\"lang-js\">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension &quot;product&quot; and &quot;score&quot; in the tooltip.\n    tooltip: [&#39;product&#39;, &#39;score&#39;]\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // &#39;pie&#39;, &#39;funnel&#39;, where data item name can be displayed in legend.\n    itemName: 3\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension &quot;score&quot; to the X axis.\n    x: [1, 5, &#39;score&#39;],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like &#39;pie&#39;, &#39;funnel&#39; etc.:\nencode: {\n    value: 3\n}\n</code></pre>\n<p>This is an <a href=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a> for <code class=\"codespan\">encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code class=\"codespan\">encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href=\"#dataZoom\">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class=\"lang-js\">var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            return {\n                type: &#39;circle&#39;,\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: &#39;blue&#39;\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n</code></pre>\n"},"data":{"type":["Array"],"description":"<p>Data should be the two-dimensional array shown as follows.</p>\n<pre><code class=\"lang-javascript\">[\n    [2320.26, 2320.26, 2287.3,  2362.94],\n    [2300,    2291.3,  2288.26, 2308.38],\n    { // the data item could also be an Object, so that it could contains special settings for this data item.\n        value: [2300,    2291.3,  2288.26, 2308.38],\n        itemStyle: {...}\n    },\n    ...\n]\n</code></pre>\n<p>Every data item (each line in the example above) represents a box, which contains 4 values. They are:</p>\n<pre><code class=\"lang-javascript\">[open, close, lowest, highest]  (namely: [opening value, closing value, lowest value, highest value])\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Name of data item.</p>\n"},"value":{"type":["Array"],"description":"<p>Value of data item.</p>\n<pre><code class=\"lang-javascript\">[open, close, lowest, highest]  (namely: [opening value, closing value, lowest value, highest value])\n</code></pre>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of a candle box.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color of bullish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#c23531"},"color0":{"type":["Color"],"description":"<p>Fill color of bearish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#314656"},"borderColor":{"type":["Color"],"description":"<p>Border color of bullish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#c23531"},"borderColor0":{"type":["Color"],"description":"<p>Border color of bearish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#314656"},"borderWidth":{"type":["number"],"description":"<p>Border width of candlestick. There is no border when it is <code class=\"codespan\">0</code>.</p>\n","default":1},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"<p>Emphasis style of a candle box.</p>\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Fill color of bullish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#c23531"},"color0":{"type":["Color"],"description":"<p>Fill color of bearish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#314656"},"borderColor":{"type":["Color"],"description":"<p>Border color of bullish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#c23531"},"borderColor0":{"type":["Color"],"description":"<p>Border color of bearish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#314656"},"borderWidth":{"type":["number"],"description":"<p>Border width of candlestick. There is no border when it is <code class=\"codespan\">0</code>.</p>\n","default":2},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-candlestick.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-candlestick.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-candlestick.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-candlestick.markPoint.data.x\">x</a>, <a href=\"#series-candlestick.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-candlestick.markPoint.data.coord\">coord</a> attribute, in which <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-candlestick.markPoint.data.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-candlestick.markPoint.data.valueIndex\">valueIndex</a> or <a href=\"#series-candlestick.markPoint.data.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n    {\n        name: &#39;maximum&#39;,\n        type: &#39;max&#39;\n    }, \n    {\n        name: &#39;coordinate&#39;,\n        coord: [10, 20]\n    }, {\n        name: &#39;fixed x position&#39;,\n        yAxis: 10,\n        x: &#39;90%&#39;\n    }, \n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Available when using <a href=\"#series-candlestick.markPoint.data.type\">type</a> it is used to assign maximum value and minimum value in dimensions, it could be <code class=\"codespan\">0</code> (xAxis, radiusAxis), <code class=\"codespan\">1</code> (yAxis, angleAxis), and use the first value axis dimension by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-candlestick.markPoint.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["Object"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-candlestick.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class=\"codespan\">symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-candlestick.markLine.data.0.x\">x</a>, <a href=\"#series-candlestick.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-candlestick.markLine.data.0.coord\">coord</a> attribute, in which <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-candlestick.markLine.data.0.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-candlestick.markLine.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-candlestick.markLine.data.0.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n<li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code class=\"codespan\">xAxis</code> or <code class=\"codespan\">yAxis</code>. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a> for example.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p>You may also set the type of mark line through <code class=\"codespan\">type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code class=\"codespan\">valueIndex</code>.</p>\n<pre><code>data: [\n    {\n        name: &#39;average line&#39;,\n        // &#39;average&#39;, &#39;min&#39;, and &#39;max&#39; are supported\n        type: &#39;average&#39;\n    },\n    {\n        name: &#39;Horizontal line with Y value at 100&#39;,\n        yAxis: 100\n    },\n    [\n        {\n            // Use the same name with starting and ending point\n            name: &#39;Minimum to Maximum&#39;,\n            type: &#39;min&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n    [\n        {\n            name: &#39;Markline between two points&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [{\n        // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n        yAxis: &#39;max&#39;,\n        x: &#39;90%&#39;\n    }, {\n        type: &#39;max&#39;\n    }],\n    [\n        {\n            name: &#39;Mark line between two points&#39;,\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n<li><code class=\"codespan\">&#39;median&#39;</code> median value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-candlestick.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-candlestick.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'starting point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n<li><code class=\"codespan\">&#39;median&#39;</code> median value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-candlestick.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-candlestick.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'ending point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code class=\"codespan\">data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li><p>Specify the coordinate in screen coordinate system using <a href=\"#series-candlestick.markArea.data.0.x\">x</a>, <a href=\"#series-candlestick.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code class=\"codespan\">5</code>), or percent (e.g., the value is <code class=\"codespan\">&#39;35%&#39;</code>).</p>\n</li>\n<li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using\n<a href=\"#series-candlestick.markArea.data.0.coord\">coord</a>, which can be also set as <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> (e.g, <code class=\"codespan\">coord: [23, &#39;min&#39;]</code>, or <code class=\"codespan\">coord: [&#39;average&#39;, &#39;max&#39;]</code>).</p>\n</li>\n</ol>\n<ol start=\"3\">\n<li>Locate the point on the min value or max value of <code class=\"codespan\">series.data</code> using <a href=\"#series-candlestick.markArea.data.0.type\">type</a>, where <a href=\"#series-candlestick.markArea.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-candlestick.markPoint.data.0.valueDim\">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</li>\n<li>If in cartesian, you can only specify <code class=\"codespan\">xAxis</code> or <code class=\"codespan\">yAxis</code> to define a mark area based on only X or Y axis, see sample <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a></li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n\n    [\n        {\n            name: &#39;From average to max&#39;,\n            type: &#39;average&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n\n    [\n        {\n            name: &#39;Mark area between two points in data coordiantes&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [\n        {\n            name: &#39;From 60 to 80&#39;,\n            yAxis: 60\n        },\n        {\n            yAxis: 80\n        }\n    ], [\n        {\n            name: &#39;Mark area covers all data&#39;\n            coord: [&#39;min&#39;, &#39;min&#39;]\n        },\n        {\n            coord: [&#39;max&#39;, &#39;max&#39;]\n        }\n    ],\n    [\n        {\n            name: &#39;Mark area in two screen points&#39;,\n            x: 100,\n            y: 100\n        }, {\n            x: &#39;90%&#39;,\n            y: &#39;10%&#39;\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> max value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> min value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-candlestick.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-candlestick.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'start'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> max value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> min value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-candlestick.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-candlestick.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'end'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"clip":{"type":["boolean"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.5.0</code></p>\n</blockquote>\n<p>If clip the overflow on the coordinate system. Clip results varies between series:</p>\n<ul>\n<li>Scatter:Ignore the symbols exceeds the coordinate system. Not clip the elements.</li>\n<li>Bar:Clip all the overflowed. With bar width kept.</li>\n<li>Line:Clip the overflowed line.</li>\n<li>Lines: Clip all the overflowed.</li>\n<li>Candlestick: Ignore the elements exceeds the coordinate system.</li>\n<li>Custom: Clip all the olverflowed.</li>\n</ul>\n<p>All these series have default value <code class=\"codespan\">true</code> except custom series. Set it to <code class=\"codespan\">false</code> if you don&#39;t want to clip.</p>\n","default":true},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in candlestick.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in candlestick, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"linear"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong>heat map</strong></p>\n<p>Heat map mainly use colors to represent values, which must be used along with <a href=\"#visualMap\">visualMap</a> component.</p>\n<p>It can be used in either <a href=\"#grid\">rectangular coordinate</a> or <a href=\"#geo\">geographic coordinate</a>. But the behaviour on them are quite different. Rectangular coordinate must have two catagories to use it.</p>\n<p>Here are the examples using it in rectangular coordinate and geographic coordinate:</p>\n<p><strong>rectangular coordinate: </strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=heatmap-cartesian&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n","properties":{"type":{"type":["string"],"description":"","default":"'heatmap'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;cartesian2d&#39;</code></p>\n<p>  Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-heatmap.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-heatmap.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">&#39;geo&#39;</code></p>\n<p>  Use geographic coordinate, with <a href=\"#series-heatmap.geoIndex\">geoIndex</a> to assign the corresponding geographic coordinate components.</p>\n</li>\n</ul>\n","default":"'cartesian2d'"},"xAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#xAxis\">x axis</a> to combine with, which is  useful for multiple x axes in one chart.</p>\n","default":0},"yAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#yAxis\">y axis</a> to combine with, which is  useful for multiple y axes in one chart.</p>\n","default":0},"geoIndex":{"type":["number"],"description":"<p>Index of <a href=\"#geo\">geographic coordinate</a> to combine with, which is useful for multiple geographic axes in one chart.</p>\n","default":0},"calendarIndex":{"type":["number"],"description":"<p>Index of <a href=\"#calendar\">calendar coordinates</a> to combine with, which is useful for multiple calendar coordinates in one chart.</p>\n","default":0},"pointSize":{"type":["number"],"description":"<p>Point size of each data point. It is valid with <a href=\"#series-heatmap.coordinateSystem\">coordinateSystem</a> of &#39;geo&#39; value.</p>\n","default":20},"blurSize":{"type":["number"],"description":"<p>Blur size of each data point. It is valid with <a href=\"#series-heatmap.coordinateSystem\">coordinateSystem</a> of &#39;geo&#39; value.</p>\n","default":20},"minOpacity":{"type":["number"],"description":"<p>Minimum opacity. It is valid with <a href=\"#series-heatmap.coordinateSystem\">coordinateSystem</a> of &#39;geo&#39; value.</p>\n","default":0},"maxOpacity":{"type":["number"],"description":"<p>Maximum opacity. It is valid with <a href=\"#series-heatmap.coordinateSystem\">coordinateSystem</a> of &#39;geo&#39; value.</p>\n","default":1},"progressive":{"type":["number"],"description":"<p><code class=\"codespan\">progressive</code> specifies the amount of graphic elements that can be rendered within a frame (about 16ms) if &quot;progressive rendering&quot; enabled.</p>\n<p>When data amount is from thousand to more than 10 million, it will take too long time to render all of the graphic elements. Since ECharts 4, &quot;progressive rendering&quot; is supported in its workflow, which processes and renders data chunk by chunk alone with each frame, avoiding to block the UI thread of the browser.</p>\n<p>Set <code class=\"codespan\">progressive: 0</code> to disable progressive permanently. By default, progressive is auto-enabled when data amount is bigger than <code class=\"codespan\">progressiveThreshold</code>.</p>\n","default":400},"progressiveThreshold":{"type":["number"],"description":"<p>If current data amount is over the threshold, &quot;progressive rendering&quot; is enabled.</p>\n","default":3000},"label":{"type":["Object"],"description":"<p>Work for <a href=\"#series-heatmap.coordinateSystem\">coordinateSystem</a>: &#39;cartesian2d&#39;.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"inside"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Work for <a href=\"#series-heatmap.coordinateSystem\">coordinateSystem</a>: &#39;cartesian2d&#39;.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"inside"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"data":{"type":["Array"],"description":"<p>Data array of series, which can be in the following forms:</p>\n<p>Notice, if no <code class=\"codespan\">data</code> specified in series, and there is <a href=\"#dataset\">dataset</a> in option, series will use the first <a href=\"#dataset\">dataset</a> as its datasource. If <code class=\"codespan\">data</code> has been specified, <a href=\"#dataset\">dataset</a> will not used.</p>\n<p><code class=\"codespan\">series.datasetIndex</code> can be used to specify other <a href=\"#dataset\">dataset</a>.</p>\n<p>Basically, data is represented by a two-dimension array, like the example below, where each column is named as a &quot;dimension&quot;.</p>\n<pre><code class=\"lang-js\">series: [{\n    data: [\n        // dimX   dimY   other dimensions ...\n        [  3.4,    4.5,   15,   43],\n        [  4.2,    2.3,   20,   91],\n        [  10.8,   9.5,   30,   18],\n        [  7.2,    8.8,   18,   57]\n    ]\n}]\n</code></pre>\n<ul>\n<li>In <a href=\"#grid\">cartesian (grid)</a>, &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href=\"#xAxis\">xAxis</a> and <a href=\"#yAxis\">yAxis</a> respectively.</li>\n<li>In <a href=\"#polar\">polar</a> &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href=\"#radiusAxis\">radiusAxis</a> 和 <a href=\"#anbleAxis\">angleAxis</a> respectively.</li>\n<li>Other dimensions are optional, which can be used in other places. For example:<ul>\n<li><a href=\"#visualMap\">visualMap</a> can map one or more dimensions to visual (color, symbol size ...).</li>\n<li><a href=\"#series.symbolSize\">series.symbolSize</a> can be set as a callback function, where symbol size can be calculated by values of a certain dimension.</li>\n<li>Values in other dimensions can be shown by <a href=\"#tooltip.formatter\">tooltip.formatter</a> or <a href=\"#series.label.formatter\">series.label.formatter</a>.</li>\n</ul>\n</li>\n</ul>\n<p>Especially, when there is one and only one category axis (axis.type is <code class=\"codespan\">&#39;category&#39;</code>), data can be simply be represented by a one-dimension array, like:</p>\n<pre><code class=\"lang-js\">xAxis: {\n    data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;]\n},\nseries: [{\n    // Each item corresponds to each item in xAxis.data.\n    data: [23,  44,  55,  19]\n    // In fact, it is the simplification of the format below:\n    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n</code></pre>\n<p><br>\n<strong>Relationship between &quot;value&quot; and <a href=\"#xAxis.type\">axis.type</a></strong></p>\n<ul>\n<li><p>When a dimension corresponds to a value axis (axis.type is <code class=\"codespan\">&#39;value&#39;</code> or <code class=\"codespan\">&#39;log&#39;</code>):</p>\n<p>  The value can be a <code class=\"codespan\">number</code> (like <code class=\"codespan\">12</code>) (can also be a number in a <code class=\"codespan\">string</code> format, like <code class=\"codespan\">&#39;12&#39;</code>).</p>\n</li>\n<li><p>When a dimension corresponds to a category axis (axis.type is <code class=\"codespan\">&#39;category&#39;</code>):</p>\n<p>  The value should be the ordinal of the axis.data (based on <code class=\"codespan\">0</code>), the string value of the axis.data. For example:</p>\n<pre><code class=\"lang-js\">  xAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;]\n  },\n  yAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;, &#39;p&#39;, &#39;q&#39;]\n  },\n  series: [{\n      data: [\n          // xAxis      yAxis\n          [  0,           0,    2  ], // This point is located at xAxis: &#39;Monday&#39;, yAxis: &#39;a&#39;.\n          [  &#39;Thursday&#39;,  2,    1  ], // This point is located at xAxis: &#39;Thursday&#39;, yAxis: &#39;m&#39;.\n          [  2,          &#39;p&#39;,   2  ], // This point is located at xAxis: &#39;Wednesday&#39;, yAxis: &#39;p&#39;.\n          [  3,           3,    5  ]\n      ]\n  }]\n</code></pre>\n<p>  There is an example of double category axes: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-punchCard\" target=\"_blank\">Github Punchcard</a>.</p>\n</li>\n<li><p>When a dimension corresponds to a time axis (type is <code class=\"codespan\">&#39;time&#39;</code>), the value can be:</p>\n<ul>\n<li>a timestamp, like <code class=\"codespan\">1484141700832</code>, which represents a UTC time.</li>\n<li>a date string, in one of the formats below:<ul>\n<li>a subset of <a href=\"http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15\" target=\"_blank\">ISO 8601</a>, only including (all of these are treated as local time unless timezone is specified, which is consistent with <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>):<ul>\n<li>only part of year/month/date/time are specified: <code class=\"codespan\">&#39;2012-03&#39;</code>, <code class=\"codespan\">&#39;2012-03-01&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 05&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 05:06&#39;</code>.</li>\n<li>separated by <code class=\"codespan\">&quot;T&quot;</code> or a space: <code class=\"codespan\">&#39;2012-03-01T12:22:33.123&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 12:22:33.123&#39;</code>.</li>\n<li>timezone specified: <code class=\"codespan\">&#39;2012-03-01T12:22:33Z&#39;</code>, <code class=\"codespan\">&#39;2012-03-01T12:22:33+8000&#39;</code>, <code class=\"codespan\">&#39;2012-03-01T12:22:33-05:00&#39;</code>.</li>\n</ul>\n</li>\n<li>other date string format (all of these are treated as local time):\n<code class=\"codespan\">&#39;2012&#39;</code>, <code class=\"codespan\">&#39;2012-3-1&#39;</code>, <code class=\"codespan\">&#39;2012/3/1&#39;</code>, <code class=\"codespan\">&#39;2012/03/01&#39;</code>,\n<code class=\"codespan\">&#39;2009/6/12 2:00&#39;</code>, <code class=\"codespan\">&#39;2009/6/12 2:05:08&#39;</code>, <code class=\"codespan\">&#39;2009/6/12 2:05:08.123&#39;</code>.</li>\n</ul>\n</li>\n<li>a JavaScript Date instance created by user:<ul>\n<li>Caution, when using a data string to create a Date instance, <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">browser differences and inconsistencies</a> should be considered.</li>\n<li>For example: In chrome, <code class=\"codespan\">new Date(&#39;2012-01-01&#39;)</code> is treated as a Jan 1st 2012 in UTC, while <code class=\"codespan\">new Date(&#39;2012-1-1&#39;)</code> and <code class=\"codespan\">new Date(&#39;2012/01/01&#39;)</code> are treated as Jan 1st 2012 in local timezone. In safari <code class=\"codespan\">new Date(&#39;2012-1-1&#39;)</code> is not supported.</li>\n<li>So if you intent to perform <code class=\"codespan\">new Date(dateString)</code>, it is strongly recommended to use a time parse library (e.g., <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>), or use <code class=\"codespan\">echarts.number.parseDate</code>, or check <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">this</a>.</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<strong>Customize a data item:</strong></p>\n<p>When needing to customize a data item, it can be set as an object, where property <code class=\"codespan\">value</code> reprensent real value. For example:</p>\n<pre><code class=\"lang-js\">[\n    12,\n    24,\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    33\n]\n// Or\n[\n    [12, 332],\n    [24, 32],\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    [33, 31]\n]\n</code></pre>\n<p><br>\n<strong>Empty value:</strong></p>\n<p><code class=\"codespan\">&#39;-&#39;</code> or <code class=\"codespan\">null</code> or <code class=\"codespan\">undefined</code> or <code class=\"codespan\">NaN</code> can be used to describe that a data item does not exist (ps:<em>not exist</em> does not means its value is <code class=\"codespan\">0</code>).</p>\n<p>For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.</p>\n<p><br><br></p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Name of data item.</p>\n"},"value":{"type":["Array"],"description":"<p>Value of data item.</p>\n"},"label":{"type":["Object"],"description":"<p>It is valid with <a href=\"#series-heatmap.coordinateSystem\">coordinateSystem</a> of &#39;cartesian2d&#39; value.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"inside"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of a single data point. It is valid with <a href=\"#series-heatmap.coordinateSystem\">coordinateSystem</a> of &#39;cartesian2d&#39; value.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"inside"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-heatmap.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-heatmap.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-heatmap.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li>Assign coordinate according to container with <a href=\"#series-heatmap.markPoint.data.x\">x</a>, <a href=\"#series-heatmap.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["Object"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-heatmap.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class=\"codespan\">symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li>Assign coordinate according to container with <a href=\"#series-heatmap.markLine.data.0.x\">x</a>, <a href=\"#series-heatmap.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<pre><code>data: [\n    [\n        {\n            name: &#39;Mark line between two points&#39;,\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'starting point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'ending point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code class=\"codespan\">data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li>Specify the coordinate in screen coordinate system using <a href=\"#series-heatmap.markArea.data.0.x\">x</a>, <a href=\"#series-heatmap.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code class=\"codespan\">5</code>), or percent (e.g., the value is <code class=\"codespan\">&#39;35%&#39;</code>).</li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n    [\n        {\n            name: &#39;Mark area in two screen points&#39;,\n            x: 100,\n            y: 100\n        }, {\n            x: &#39;90%&#39;,\n            y: &#39;10%&#39;\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'start'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'end'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in heatmap.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in heatmap, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong>Map.</strong></p>\n<p>Map is mainly used in the visualization of geographic area data, which can be used with <a href=\"#visualMap\">visualMap</a> component to visualize the datas such as population distribution density in diffrent areas.</p>\n<p>Series of same <a href=\"#series-map.map\">map type</a> will show in one map. At this point, the configuration of the first series will be used for the map configuration.</p>\n","properties":{"type":{"type":["string"],"description":"","default":"'map'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"map":{"type":["string"],"description":"<p>Map charts.</p>\n<p>Due to the increase of fineness of map, ECharts 3 doesn&#39;t include map data by default for package size consideration. You may find map files you need on <a href=\"http://ecomfe.github.io/echarts-builder-web/map3.html\" target=\"_blank\">map download page</a> and then include and register them in ECharts.</p>\n<p>Two formats of map data are provided in ECharts, one of which can be included in <code class=\"codespan\">&lt;script&gt;</code> tag as JavaScript file, and the other of is in JSON format and should be loaded using AJAX. Map name and data will be loaded automatically once the JavaScript file is loaded, while in the JSON form, you have to assign name explicitly.</p>\n<p>Here are examples of these two types:</p>\n<p><strong> JavaScript importing example </strong></p>\n<pre><code class=\"lang-html\">&lt;script src=&quot;echarts.js&quot;&gt;&lt;/script&gt;\n&lt;script src=&quot;map/js/china.js&quot;&gt;&lt;/script&gt;\n&lt;script&gt;\nvar chart = echarts.init(document.getElmentById(&#39;main&#39;));\nchart.setOption({\n    series: [{\n        type: &#39;map&#39;,\n        map: &#39;china&#39;\n    }]\n});\n&lt;/script&gt;\n</code></pre>\n<p><strong> JSON importing example </strong></p>\n<pre><code class=\"lang-js\">$.get(&#39;map/json/china.json&#39;, function (chinaJson) {\n    echarts.registerMap(&#39;china&#39;, chinaJson);\n    var chart = echarts.init(document.getElmentById(&#39;main&#39;));\n    chart.setOption({\n        series: [{\n            type: &#39;map&#39;,\n            map: &#39;china&#39;\n        }]\n    });\n});\n</code></pre>\n<p>ECharts uses <a href=\"http://geojson.org/\" target=\"_blank\">geoJSON</a> format as map outline. Besides the methods introduced above, you can also get <a href=\"http://geojson.org/\" target=\"_blank\">geoJSON</a> data through in other methods if you like and register it in ECharts. Reference to <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=map-usa\" target=\"_blank\">USA Population Estimates</a> for more information.</p>\n","default":"''"},"roam":{"type":["boolean","string"],"description":"<p>Whether to enable mouse zooming and translating. <code class=\"codespan\">false</code> by default. If either zooming or translating is wanted, it can be set to <code class=\"codespan\">&#39;scale&#39;</code> or <code class=\"codespan\">&#39;move&#39;</code>. Otherwise, set it to be <code class=\"codespan\">true</code> to enable both.</p>\n","default":false},"center":{"type":["Array"],"description":"<p>Center of current view-port, in longitude and latitude.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">center: [115.97, 29.71]\n</code></pre>\n"},"aspectScale":{"type":["number"],"description":"<p>Used to scale aspect of geo.</p>\n<p>The final aspect is calculated by: <code class=\"codespan\">geoBoundingRect.width / geoBoundingRect.height * aspectScale</code>.</p>\n","default":0.75},"boundingCoords":{"type":["Array"],"description":"<p>Two dimension array. Define coord of left-top, right-bottom in layout box.</p>\n<pre><code class=\"lang-js\">// A complete world map\nmap: &#39;world&#39;,\nleft: 0, top: 0, right: 0, bottom: 0,\nboundingCoords: [\n    // [lng, lat] of left-top corner\n    [-180, 90],\n    // [lng, lat] of right-bottom corner\n    [180, -90]\n],\n</code></pre>\n","default":null},"zoom":{"type":["number"],"description":"<p>Zoom rate of current view-port.</p>\n","default":1},"scaleLimit":{"type":["Object"],"description":"<p>Limit of scaling, with <code class=\"codespan\">min</code> and <code class=\"codespan\">max</code>. <code class=\"codespan\">1</code> by default.</p>\n","properties":{"min":{"type":["number"],"description":"<p>Minimum scaling</p>\n"},"max":{"type":["number"],"description":"<p>Maximum scaling</p>\n"}}},"nameMap":{"type":["Object"],"description":"<p>Name mapping for customized areas. For example:</p>\n<pre><code class=\"lang-js\">{\n    &#39;China&#39; : &#39;中国&#39;\n}\n</code></pre>\n"},"nameProperty":{"type":["string"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.8.0</code></p>\n</blockquote>\n<p>customized property key for GeoJSON feature. By default, &#39;name&#39; is used as primary key to identify GeoJSON feature.\nFor example:</p>\n<pre><code class=\"lang-js\">{\n    nameProperty: &#39;NAME&#39;, // key to connect following data point to GeoJSON region {&quot;type&quot;:&quot;Feature&quot;,&quot;id&quot;:&quot;01&quot;,&quot;properties&quot;:{&quot;NAME&quot;:&quot;Alabama&quot;}, &quot;geometry&quot;: { ... }}\n    data:[\n        {name: &#39;Alabama&#39;, value: 4822023},\n        {name: &#39;Alaska&#39;, value: 731449},\n    ]\n}\n</code></pre>\n","default":"'name'"},"selectedMode":{"type":["boolean","string"],"description":"<p>Selected mode decides whether multiple selecting is supported. By default, <code class=\"codespan\">false</code> is used for disabling selection. Its value can also be <code class=\"codespan\">&#39;single&#39;</code> for selecting single area, or <code class=\"codespan\">&#39;multiple&#39;</code> for selecting multiple areas.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of Map Area Border, <code class=\"codespan\">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"areaColor":{"type":["Color"],"description":"<p>Area filling color.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#eee'"},"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"<p>Map area style in highlighted state.</p>\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"areaColor":{"type":["Color"],"description":"<p>Area filling color.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#eee'"},"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between  component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"top":{"type":["string","number"],"description":"<p>Distance between  component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"right":{"type":["string","number"],"description":"<p>Distance between  component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"<p>Distance between  component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"layoutCenter":{"type":["Array"],"description":"<p><code class=\"codespan\">layoutCenter</code> and <code class=\"codespan\">layoutSize</code> provides layout strategy other than <code class=\"codespan\">left/right/top/bottom/width/height</code>.</p>\n<p>When using <code class=\"codespan\">left/right/top/bottom/width/height</code>, it is hard to put the map inside a box area with a fixed width-height ratio. In this case, <code class=\"codespan\">layoutCenter</code> attribute can be used to define the center position of map, and <code class=\"codespan\">layoutSize</code> can be used to define the size of map. For example:</p>\n<pre><code class=\"lang-js\">layoutCenter: [&#39;30%&#39;, &#39;30%&#39;],\n// If width-height ratio is larger than 1, then width is set to be 100.\n// Otherwise, height is set to be 100.\n// This makes sure that it will not exceed the area of 100x100\nlayoutSize: 100\n</code></pre>\n<p>After setting these two values, <code class=\"codespan\">left/right/top/bottom/width/height</code> becomes invalid.</p>\n","default":null},"layoutSize":{"type":["number","string"],"description":"<p>Size of map, see <code class=\"codespan\">layoutCenter</code> for more information. Percentage relative to screen width, and absolute pixel values are supported.</p>\n"},"geoIndex":{"type":["number"],"description":"<p>In default case, map series create exclusive <code class=\"codespan\">geo</code> component for themselves. But <code class=\"codespan\">geoIndex</code> can be used to specify an outer <a href=\"#geo\">geo component</a>, which can be shared with other series like <a href=\"#series-pie\">pie</a>. Moreover, the region color of the outer <a href=\"#geo\">geo component</a> can be controlled by the map series (via <a href=\"#visualMap\">visualMap</a>).</p>\n<p>When <code class=\"codespan\">geoIndex</code> specified, <a href=\"#series-map.map\">series-map.map</a> other style configurations like <a href=\"#series-map.itemStyle\">series-map.itemStyle</a> will not work, but corresponding configurations in <a href=\"#geo\">geo component</a> will be used.</p>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=geo-map-scatter&reset=1&edit=1\" width=\"600\" height=\"400\"><iframe />\n\n\n","default":null},"mapValueCalculation":{"type":["string"],"description":"<p>Value of multiple series with the same <a href=\"#series-map.map\">map type</a> can use this option to get a statistical value.</p>\n<p>Supported statistical methods:</p>\n<ul>\n<li><code class=\"codespan\">&#39;sum&#39;</code></li>\n<li><code class=\"codespan\">&#39;average&#39;</code></li>\n<li><code class=\"codespan\">&#39;max&#39;</code></li>\n<li><code class=\"codespan\">&#39;min&#39;</code></li>\n</ul>\n","default":"'sum'"},"showLegendSymbol":{"type":["boolean"],"description":"<p>Show the symbol in related area (dot of series symbol). Available when <a href=\"#legend\">legend</a> component exists.</p>\n"},"seriesLayoutBy":{"type":["string"],"description":"<p>When <a href=\"#dataset\">dataset</a> is used, <code class=\"codespan\">seriesLayoutBy</code> specifies whether the column or the row of <code class=\"codespan\">dataset</code> is mapped to the series, namely, the series is &quot;layout&quot; on columns or rows. Optional values:</p>\n<ul>\n<li>&#39;column&#39;: by default, the columns of <code class=\"codespan\">dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>&#39;row&#39;:the rows of <code class=\"codespan\">dataset</code> are mapped to the series. In this case, each row represents a dimension.</li>\n</ul>\n<p>Check this <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=dataset-series-layout-by\" target=\"_blank\">example</a>.</p>\n","default":"'column'"},"datasetIndex":{"type":["number"],"description":"<p>If <a href=\"#series.data\">series.data</a> is not specified, and <a href=\"#dataset\">dataset</a> exists, the series will use <code class=\"codespan\">dataset</code>. <code class=\"codespan\">datasetIndex</code> specifies which dataset will be used.</p>\n","default":0},"data":{"type":["Array"],"description":"<p>Data array of map series, which can be a single data value, like:</p>\n<pre><code class=\"lang-js\">[12, 34, 56, 10, 23]\n</code></pre>\n<p>Or, if need extra dimensions for components like <a href=\"#visualMap\">visualMap</a> to map to graphic attributes like color, it can also be in the form of array. For example:</p>\n<pre><code class=\"lang-js\">[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]\n</code></pre>\n<p>In this case, we can assgin the second value in each array item to <a href=\"#visualMap\">visualMap</a> component.</p>\n<p>More likely, we need to assign name to each data item, in which case each item should be an object:</p>\n<pre><code class=\"lang-js\">[{\n    // name of date item\n    name: &#39;data1&#39;,\n    // value of date item is 8\n    value: 10\n}, {\n    name: &#39;data2&#39;,\n    value: 20\n}]\n</code></pre>\n<p>Each data item can be further customized:</p>\n<pre><code class=\"lang-js\">[{\n    name: &#39;data1&#39;,\n    value: 10\n}, {\n    // name of data item\n    name: &#39;data2&#39;,\n    value : 56,\n    // user-defined label format that only useful for this data item\n    label: {},\n    // user-defined special itemStyle that only useful for this data item\n    itemStyle:{}\n}]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>The name of the map area where the data belongs to, such as <code class=\"codespan\">&#39;China&#39;</code> or <code class=\"codespan\">&#39;United Kingdom&#39;</code> .</p>\n"},"value":{"type":["number"],"description":"<p>The numerical value of this area.</p>\n"},"selected":{"type":["boolean"],"description":"<p>Whether the are selected.</p>\n","default":false},"itemStyle":{"type":["Object"],"description":"<p>Style of item polygon</p>\n","properties":{"areaColor":{"type":["Color"],"description":"<p>Color of the area.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'bottom'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"areaColor":{"type":["Color"],"description":"<p>Area color in the map.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-map.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-map.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-map.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-map.markPoint.data.x\">x</a>, <a href=\"#series-map.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-map.markPoint.data.coord\">coord</a> attribute, in which <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n    {\n        name: &#39;coordinate&#39;,\n        coord: [10, 20]\n    }, {\n        name: &#39;fixed x position&#39;,\n        yAxis: 10,\n        x: &#39;90%&#39;\n    }, \n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"valueIndex":{"type":["number"],"description":"<p>Available when using <a href=\"#series-map.markPoint.data.type\">type</a> it is used to assign maximum value and minimum value in dimensions, it could be <code class=\"codespan\">0</code> (xAxis, radiusAxis), <code class=\"codespan\">1</code> (yAxis, angleAxis), and use the first value axis dimension by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-map.markPoint.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["Object"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-map.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class=\"codespan\">symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-map.markLine.data.0.x\">x</a>, <a href=\"#series-map.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-map.markLine.data.0.coord\">coord</a> attribute, in which <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<pre><code>data: [\n    [\n        {\n            name: &#39;Markline between two points&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [{\n        // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n        yAxis: &#39;max&#39;,\n        x: &#39;90%&#39;\n    }, {\n        type: &#39;max&#39;\n    }],\n    [\n        {\n            name: &#39;Mark line between two points&#39;,\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-map.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-map.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'starting point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-map.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-map.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'ending point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code class=\"codespan\">data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li><p>Specify the coordinate in screen coordinate system using <a href=\"#series-map.markArea.data.0.x\">x</a>, <a href=\"#series-map.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code class=\"codespan\">5</code>), or percent (e.g., the value is <code class=\"codespan\">&#39;35%&#39;</code>).</p>\n</li>\n<li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using\n<a href=\"#series-map.markArea.data.0.coord\">coord</a>, which can be also set as <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> (e.g, <code class=\"codespan\">coord: [23, &#39;min&#39;]</code>, or <code class=\"codespan\">coord: [&#39;average&#39;, &#39;max&#39;]</code>).</p>\n</li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n\n    [\n        {\n            name: &#39;Mark area between two points in data coordiantes&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [\n        {\n            name: &#39;From 60 to 80&#39;,\n            yAxis: 60\n        },\n        {\n            yAxis: 80\n        }\n    ], [\n        {\n            name: &#39;Mark area covers all data&#39;\n            coord: [&#39;min&#39;, &#39;min&#39;]\n        },\n        {\n            coord: [&#39;max&#39;, &#39;max&#39;]\n        }\n    ],\n    [\n        {\n            name: &#39;Mark area in two screen points&#39;,\n            x: 100,\n            y: 100\n        }, {\n            x: &#39;90%&#39;,\n            y: &#39;10%&#39;\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-map.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-map.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'start'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-map.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-map.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'end'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p>The series in parallel coordinate system.</p>\n<p><br></p>\n<hr>\n<p><strong>Introduction about Parallel coordinates</strong></p>\n<p><a href=\"https://en.wikipedia.org/wiki/Parallel_coordinates\" target=\"_blank\">Parallel Coordinates</a> is a common way of visualizing high-dimensional geometry and analyzing multivariate data.</p>\n<p>For example, <a href=\"#series-parallel.data\">series-parallel.data</a> is the following data:</p>\n<pre><code class=\"lang-javascript\">[\n    [1,  55,  9,   56,  0.46,  18,  6,  &#39;good&#39;],\n    [2,  25,  11,  21,  0.65,  34,  9,  &#39;excellent&#39;],\n    [3,  56,  7,   63,  0.3,   14,  5,  &#39;good&#39;],\n    [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],\n    { // Data item can also be an Object, so that perticular settings of its line can be set here.\n        value: [5,  42,  24,  44,  0.76,  40,  16, &#39;excellent&#39;]\n        lineStyle: {...},\n    }\n    ...\n]\n</code></pre>\n<p>In data above, each row is a &quot;data item&quot;, and each column represents a &quot;dimension&quot;. For example, the meanings of columns above are: &quot;data&quot;, &quot;AQI&quot;, &quot;PM2.5&quot;, &quot;PM10&quot;, &quot;carbon monoxide level&quot;, &quot;nitrogen dioxide level&quot;, and &quot;sulfur dioxide level&quot;.</p>\n<p>Parallel coordinates are often used to visualize multi-dimension data shown above. Each axis represents a dimension (namely, a column), and each line represents a data item. Data can be brush-selected on axes. For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/parallel-all&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n<hr>\n<p><strong>Brief about Configuration</strong></p>\n<p>Basic configuration parallel coordinates is shown as follow:</p>\n<pre><code class=\"lang-javascript\">option = {\n    parallelAxis: [                     // Definitions of axes.\n        {dim: 0, name: schema[0].text}, // Each axis has a &#39;dim&#39; attribute, representing dimension index in data.\n        {dim: 1, name: schema[1].text},\n        {dim: 2, name: schema[2].text},\n        {dim: 3, name: schema[3].text},\n        {dim: 4, name: schema[4].text},\n        {dim: 5, name: schema[5].text},\n        {dim: 6, name: schema[6].text},\n        {dim: 7, name: schema[7].text,\n            type: &#39;category&#39;,           // Also supports category data.\n            data: [&#39;Excellent&#39;, &#39;good&#39;, &#39;light pollution&#39;, &#39;moderate pollution&#39;, &#39;heavy pollution&#39;, &#39;severe pollution&#39;]\n        }\n    ],\n    parallel: {                         // Definition of a parallel coordinate system.\n        left: &#39;5%&#39;,                     // Location of parallel coordinate system.\n        right: &#39;13%&#39;,\n        bottom: &#39;10%&#39;,\n        top: &#39;20%&#39;,\n        parallelAxisDefault: {          // A pattern for axis definition, which can avoid repeating in `parallelAxis`.\n            type: &#39;value&#39;,\n            nameLocation: &#39;end&#39;,\n            nameGap: 20\n        }\n    },\n    series: [                           // Here the three series sharing the same parallel coordinate system.\n        {\n            name: &#39;Beijing&#39;,\n            type: &#39;parallel&#39;,           // The type of this series is &#39;parallel&#39;\n            data: [\n                [1,  55,  9,   56,  0.46,  18,  6,  &#39;good&#39;],\n                [2,  25,  11,  21,  0.65,  34,  9,  &#39;excellent&#39;],\n                ...\n            ]\n        },\n        {\n            name: &#39;Shanghai&#39;,\n            type: &#39;parallel&#39;,\n            data: [\n                [3,  56,  7,   63,  0.3,   14,  5,  &#39;good&#39;],\n                [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],\n                ...\n            ]\n        },\n        {\n            name: &#39;Guangzhou&#39;,\n            type: &#39;parallel&#39;,\n            data: [\n                [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],\n                [5,  42,  24,  44,  0.76,  40,  16, &#39;excellent&#39;],\n                ...\n            ]\n        }\n    ]\n};\n</code></pre>\n<p>Three components are involved here: <a href=\"#parallel\">parallel</a>, <a href=\"#parallelAxis\">parallelAxis</a>, <a href=\"#series-parallel\">series-parallel</a></p>\n<ul>\n<li><p><a href=\"#parallel\">parallel</a></p>\n<p>  This component is the coordinate system. One or more series (like &quot;Beijing&quot;, &quot;Shanghai&quot;, and &quot;Guangzhou&quot; in the above example) can share one coordinate system.</p>\n<p>  Like other coordinate systems, multiple parallel coordinate systems can be created in one echarts instance.</p>\n<p>  Position setting is also carried out here.</p>\n</li>\n<li><p><a href=\"#parallelAxis\">parallelAxis</a></p>\n<p>  This is axis configuration. Multiple axes are needed in parallel coordinates.</p>\n<p>  <a href=\"#parallelAxis.parallelIndex\">parallelAxis.parallelIndex</a> is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.</p>\n</li>\n<li><p><a href=\"#series-parallel\">series-parallel</a></p>\n<p>  This is the definition of parallel series, which will be drawn on parallel coordinate system.</p>\n<p>  <a href=\"#parallelAxis.parallelIndex\">parallelAxis.parallelIndex</a> is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>Notes and Best Practices</strong></p>\n<p>When configuring multiple <a href=\"#parallelAxis\">parallelAxis</a>, there might be some common attributes in each axis configuration. To avoid writing them repeatly, they can be put under <a href=\"#parallel.parallelAxisDefault\">parallel.parallelAxisDefault</a>. Before initializing axis, configurations in <a href=\"#parallel.parallelAxisDefault\">parallel.parallelAxisDefault</a> will be merged into <a href=\"#parallelAxis\">parallelAxis</a> to generate the final axis configuration.</p>\n<p><strong>If data is too large and cause bad performance</strong></p>\n<p>It is suggested to set <a href=\"#series-parallel.lineStyle.width\">series-parallel.lineStyle.width</a> to be <code class=\"codespan\">0.5</code> (or less), which may improve performance significantly.</p>\n<p><br></p>\n<hr>\n<p><strong>Display High-Dimension Data</strong></p>\n<p>When dimension number is extremely large, say, more than 50 dimensions, there will be more than 50 axes, which may hardly display in a page.</p>\n<p>In this case, you may use <a href=\"#parallel.axisExpandable\">parallel.axisExpandable</a> to improve the display. See this example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=map-parallel-prices&edit=1&reset=1\" width=\"600\" height=\"460\"><iframe />\n\n\n\n\n\n\n\n\n","properties":{"type":{"type":["string"],"description":"","default":"'parallel'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;parallel&#39;</code></p>\n<p>  Use parallel coordinates, with <a href=\"#series-parallel.parallelIndex\">parallelIndex</a> to assign the corresponding parallel coordinate components.</p>\n</li>\n</ul>\n","default":"'parallel'"},"parallelIndex":{"type":["number"],"description":"<p>Index of <a href=\"#parallel\">parallel coordinates</a> to combine with, which is useful for multiple parallel axes in one chart.</p>\n","default":0},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"lineStyle":{"type":["Object"],"description":"<p>Line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":2},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":0.45}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":2},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":0.45}}}}},"inactiveOpacity":{"type":["number"],"description":"<p>When perform brush selection, the unselected lines will be set as this transparency rate (which could darken those lines).</p>\n","default":0.05},"activeOpacity":{"type":["number"],"description":"<p>When perform brush selection, the selected lines will be set as this transparency rate (which could highlight those lines).</p>\n","default":1},"realtime":{"type":["boolean"],"description":"<p>Whether to update view in realtime.</p>\n","default":true},"smooth":{"type":["boolean","number"],"description":"<p>Whether to smooth the line. It defaults to be <code class=\"codespan\">false</code> and can be set as <code class=\"codespan\">true</code> or the values from 0 to 1 which indicating the smoothness.</p>\n","default":false},"progressive":{"type":["number"],"description":"<p><code class=\"codespan\">progressive</code> specifies the amount of graphic elements that can be rendered within a frame (about 16ms) if &quot;progressive rendering&quot; enabled.</p>\n<p>When data amount is from thousand to more than 10 million, it will take too long time to render all of the graphic elements. Since ECharts 4, &quot;progressive rendering&quot; is supported in its workflow, which processes and renders data chunk by chunk alone with each frame, avoiding to block the UI thread of the browser.</p>\n<p>Set <code class=\"codespan\">progressive: 0</code> to disable progressive permanently. By default, progressive is auto-enabled when data amount is bigger than <code class=\"codespan\">progressiveThreshold</code>.</p>\n","default":500},"progressiveThreshold":{"type":["number"],"description":"<p>If current data amount is over the threshold, &quot;progressive rendering&quot; is enabled.</p>\n","default":3000},"progressiveChunkMode":{"type":["string"],"description":"<p>Chunk approach, optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;sequential&#39;</code>: slice data by data index.</li>\n<li><code class=\"codespan\">&#39;mod&#39;</code>: slice data by mod, which make the data items of each chunk coming from all over the data, bringing better visual effect while progressive rendering.</li>\n</ul>\n","default":"sequential"},"data":{"type":["Array"],"description":"<p>For example, <a href=\"#series-parallel.data\">series-parallel.data</a> is the following data:</p>\n<pre><code class=\"lang-javascript\">[\n    [1,  55,  9,   56,  0.46,  18,  6,  &#39;good&#39;],\n    [2,  25,  11,  21,  0.65,  34,  9,  &#39;excellent&#39;],\n    [3,  56,  7,   63,  0.3,   14,  5,  &#39;good&#39;],\n    [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],\n    { // Data item can also be an Object, so that perticular settings of its line can be set here.\n        value: [5,  42,  24,  44,  0.76,  40,  16, &#39;excellent&#39;]\n        lineStyle: {...},\n    }\n    ...\n]\n</code></pre>\n<p>In data above, each row is a &quot;data item&quot;, and each column represents a &quot;dimension&quot;. For example, the meanings of columns above are: &quot;data&quot;, &quot;AQI&quot;, &quot;PM2.5&quot;, &quot;PM10&quot;, &quot;carbon monoxide level&quot;, &quot;nitrogen dioxide level&quot;, and &quot;sulfur dioxide level&quot;.</p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>The name of a data item.</p>\n"},"value":{"type":["Array"],"description":"<p>The value of a data item.</p>\n"},"lineStyle":{"type":["Object"],"description":"<p>Line style.</p>\n"},"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":2},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":0.45},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":2},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":0.45}}}}}}}},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in parallel.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in parallel, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"linear"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong>Lines graph</strong></p>\n<p>It is used to draw the line data with the information about &quot;from&quot; and &quot;to&quot;; and it is applied fot drawing the air routes on map, which visualizes these routes.</p>\n<p>ECharts 2.x uses the <code class=\"codespan\">markLine</code> to draw the migrating effect, while in ECharts 3, the <code class=\"codespan\">lines</code> graph is recommended to be used.</p>\n","properties":{"type":{"type":["string"],"description":"","default":"'lines'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;cartesian2d&#39;</code></p>\n<p>  Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-lines.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-lines.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">&#39;geo&#39;</code></p>\n<p>  Use geographic coordinate, with <a href=\"#series-lines.geoIndex\">geoIndex</a> to assign the corresponding geographic coordinate components.</p>\n</li>\n</ul>\n","default":"'geo'"},"xAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#xAxis\">x axis</a> to combine with, which is  useful for multiple x axes in one chart.</p>\n","default":0},"yAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#yAxis\">y axis</a> to combine with, which is  useful for multiple y axes in one chart.</p>\n","default":0},"geoIndex":{"type":["number"],"description":"<p>Index of <a href=\"#geo\">geographic coordinate</a> to combine with, which is useful for multiple geographic axes in one chart.</p>\n","default":0},"polyline":{"type":["boolean"],"description":"<p>If draw as a polyline.</p>\n<p>Default to be <code class=\"codespan\">false</code>. Can only draw a two end straight line.</p>\n<p>If it is set true, <a href=\"#series-lines.data.coords\">data.coords</a> can have more than two coord to draw a polyline. It is useful when visualizing GPS track data. See example <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=lines-bmap-bus\" target=\"_blank\">lines-bus</a>.</p>\n","default":false},"effect":{"type":["Object"],"description":"<p>The setting about the special effects of lines.</p>\n<p><strong>Tips: </strong>All the graphs with trail effect should be put on a individual layer, which means that <a href=\"#series-lines.zlevel\">zlevel</a> need to be different with others. And the animation (<a href=\"#series-lines.animation\">animation</a>: false)  of this layer is suggested to be turned off at the meanwhile. Otherwise, other graphic elements in other series and the <a href=\"#series-lines.label\">label</a> of animation would produce unnecessary ghosts.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show special effect.</p>\n","default":false},"period":{"type":["number"],"description":"<p>The duration of special effect, which unit is second.</p>\n","default":4},"delay":{"type":["number","Function"],"description":"<p>Effect animation delay. Can be number or callback function.</p>\n"},"constantSpeed":{"type":["number"],"description":"<p>If symbol movement of special effect has a constant speed, which unit is pixel per second. <a href=\"#series-lines.effect.period\">period</a> will be ignored if <code class=\"codespan\">constantSpeed</code> is larger than 0.</p>\n","default":0},"symbol":{"type":["string"],"description":"<p>The symbol of special effect.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>The above example uses a custom path of plane shape.</p>\n<p><strong>Tip:</strong> Ahe angle of symbol changes as the tangent of track changes. If you use a custom path, you should make sure that the path shape are upward oriented. It would ensure that the symbol will always move toward the right moving direction when the symbol moves along the track.</p>\n","default":"'circle'"},"symbolSize":{"type":["Array","number"],"description":"<p>The symbol size of special effect, which could be set as single number such as <code class=\"codespan\">10</code>. What&#39;s more, arrays could be used to decribe the width and height respectively. For instance, <code class=\"codespan\">[20, 10]</code> indicates <code class=\"codespan\">20</code> for width and  <code class=\"codespan\">10</code> for height.</p>\n","default":3},"color":{"type":["Color"],"description":"<p>The color of special effect symbol, which defaults to be same with <a href=\"#series-lines.lineStyle.color\">lineStyle.color</a>.</p>\n"},"trailLength":{"type":["number"],"description":"<p>The length of trail of special effect.  The values from 0 to 1 could be set. Trail would be longer as the the value becomes larger.</p>\n","default":0.2},"loop":{"type":["boolean"],"description":"<p>Whether to loop the special effect animation.</p>\n","default":true}}},"large":{"type":["boolean"],"description":"<p>Whether to enable the optimization of large-scale lines graph. It could be enabled when there is a particularly large number of data(&gt;=5k) .</p>\n<p>After being enabled, <a href=\"#series-lines.largeThreshold\">largeThreshold</a> can be used to indicate the minimum number for turning on the optimization.</p>\n<p>The style of a single data item can&#39;t be customized</p>\n","default":true},"largeThreshold":{"type":["number"],"description":"<p>The threshold enabling the drawing optimization.</p>\n","default":2000},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-line.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n","default":"'none'"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class=\"codespan\">symbolSize</code>.</p>\n","default":10},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<p>Supports callback functions, in the form of:</p>\n<pre><code class=\"lang-js\">(params: Object) =&gt; Color\n</code></pre>\n<p>Input parameters are <code class=\"codespan\">seriesIndex</code>, <code class=\"codespan\">dataIndex</code>, <code class=\"codespan\">data</code>, <code class=\"codespan\">value</code>, and etc. of data item.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'self-adaptive'"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":0.5},"curveness":{"type":["number"],"description":"<p>The curveness of edge. The values from 0 to 1 could be set. The curveness would be larger as the the value becomes larger.</p>\n","default":0}}},"label":{"type":["Object"],"description":"<p>Label settings. Does not work when <a href=\"#series-lines.polyline\">polyline</a> is <code class=\"codespan\">true</code>.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string"],"description":"<p>the position of label, options:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;end&#39;</code></li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"emphasis":{"type":["Object"],"description":"<p>Emphasis style.</p>\n","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string"],"description":"<p>the position of label, options:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;end&#39;</code></li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"progressive":{"type":["number"],"description":"<p><code class=\"codespan\">progressive</code> specifies the amount of graphic elements that can be rendered within a frame (about 16ms) if &quot;progressive rendering&quot; enabled.</p>\n<p>When data amount is from thousand to more than 10 million, it will take too long time to render all of the graphic elements. Since ECharts 4, &quot;progressive rendering&quot; is supported in its workflow, which processes and renders data chunk by chunk alone with each frame, avoiding to block the UI thread of the browser.</p>\n<p>Set <code class=\"codespan\">progressive: 0</code> to disable progressive permanently. By default, progressive is auto-enabled when data amount is bigger than <code class=\"codespan\">progressiveThreshold</code>.</p>\n","default":400},"progressiveThreshold":{"type":["number"],"description":"<p>If current data amount is over the threshold, &quot;progressive rendering&quot; is enabled.</p>\n","default":3000},"data":{"type":["Array"],"description":"<p>The data set of lines.</p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>the name of data.</p>\n"},"coords":{"type":["Array"],"description":"<p>An array includes two ore more than two coordinates. Each coordinate could be <code class=\"codespan\">[x, y]</code> in <a href=\"#grid\">rectangular coordinate</a> and <code class=\"codespan\">[lng, lat]</code> in <a href=\"#geo\">geographic coordinate</a>.</p>\n"},"lineStyle":{"type":["Object"],"description":"<p>The line style of this data item.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string"],"description":"<p>the position of label, options:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;end&#39;</code></li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string"],"description":"<p>the position of label, options:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;end&#39;</code></li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-lines.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-lines.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-lines.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li>Assign coordinate according to container with <a href=\"#series-lines.markPoint.data.x\">x</a>, <a href=\"#series-lines.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["Object"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-lines.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class=\"codespan\">symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li>Assign coordinate according to container with <a href=\"#series-lines.markLine.data.0.x\">x</a>, <a href=\"#series-lines.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<pre><code>data: [\n    [\n        {\n            name: &#39;Mark line between two points&#39;,\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'starting point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'ending point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code class=\"codespan\">data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li>Specify the coordinate in screen coordinate system using <a href=\"#series-lines.markArea.data.0.x\">x</a>, <a href=\"#series-lines.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code class=\"codespan\">5</code>), or percent (e.g., the value is <code class=\"codespan\">&#39;35%&#39;</code>).</li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n    [\n        {\n            name: &#39;Mark area in two screen points&#39;,\n            x: 100,\n            y: 100\n        }, {\n            x: &#39;90%&#39;,\n            y: &#39;10%&#39;\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'start'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'end'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"clip":{"type":["boolean"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.4.0</code></p>\n</blockquote>\n<p>If clip the overflow on the coordinate system. Clip results varies between series:</p>\n<ul>\n<li>Scatter:Ignore the symbols exceeds the coordinate system. Not clip the elements.</li>\n<li>Bar:Clip all the overflowed. With bar width kept.</li>\n<li>Line:Clip the overflowed line.</li>\n<li>Lines: Clip all the overflowed.</li>\n<li>Candlestick: Ignore the elements exceeds the coordinate system.</li>\n<li>Custom: Clip all the olverflowed.</li>\n</ul>\n<p>All these series have default value <code class=\"codespan\">true</code> except custom series. Set it to <code class=\"codespan\">false</code> if you don&#39;t want to clip.</p>\n","default":true},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in lines graph.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in lines graph, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},{"type":["Object"],"description":"<p><strong>relation graph</strong></p>\n<p>Graph is a diagram to represent <a href=\"#series-graph.nodes\">nodes</a> and the <a href=\"#series-graph.links\">links</a> connecting nodes.</p>\n<p><strong>Example: </strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=graph&reset=1&edit=1\" width=\"600\" height=\"400\"><iframe />\n\n\n","properties":{"type":{"type":["string"],"description":"","default":"'graph'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"legendHoverLink":{"type":["boolean"],"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n","default":true},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">null</code> or <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>  No coordinate.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">&#39;cartesian2d&#39;</code></p>\n<p>  Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-graph.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-graph.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">&#39;polar&#39;</code></p>\n<p>  Use polar coordinates, with <a href=\"#series-graph.polarIndex\">polarIndex</a> to assign the corresponding polar coordinate component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">&#39;geo&#39;</code></p>\n<p>  Use geographic coordinate, with <a href=\"#series-graph.geoIndex\">geoIndex</a> to assign the corresponding geographic coordinate components.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">&#39;none&#39;</code></p>\n<p>  Do not use coordinate system.</p>\n</li>\n</ul>\n","default":null},"xAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#xAxis\">x axis</a> to combine with, which is  useful for multiple x axes in one chart.</p>\n","default":0},"yAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#yAxis\">y axis</a> to combine with, which is  useful for multiple y axes in one chart.</p>\n","default":0},"polarIndex":{"type":["number"],"description":"<p>Index of <a href=\"#polar\">polar coordinate</a> to combine with, which is useful for multiple polar axes in one chart.</p>\n","default":0},"geoIndex":{"type":["number"],"description":"<p>Index of <a href=\"#geo\">geographic coordinate</a> to combine with, which is useful for multiple geographic axes in one chart.</p>\n","default":0},"calendarIndex":{"type":["number"],"description":"<p>Index of <a href=\"#calendar\">calendar coordinates</a> to combine with, which is useful for multiple calendar coordinates in one chart.</p>\n","default":0},"hoverAnimation":{"type":["boolean"],"description":"<p>Whether to enable the highlight animation effect of mousr hover node.</p>\n"},"center":{"type":["Array"],"description":"<p>Center of current view-port.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">center: [115.97, 29.71]\n</code></pre>\n"},"zoom":{"type":["number"],"description":"<p>Zoom rate of current view-port.</p>\n","default":1},"layout":{"type":["string"],"description":"<p>Graph layout.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><p><code class=\"codespan\">&#39;none&#39;</code> No any layout, use  <a href=\"#series-graph.data.x\">x</a>,  <a href=\"#series-graph.data.y\">y</a> provided in <a href=\"#series-graph.data\">node</a> as the position of node.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;circular&#39;</code> Adopt circular layout, see the example <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=graph-circular-layout\" target=\"_blank\">Les Miserables</a>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;force&#39;</code> Adopt force-directed layout, see the example <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=graph-force\" target=\"_blank\">Force</a>, the detail about configrations of layout are in <a href=\"#series-graph.force\">graph.force</a></p>\n</li>\n</ul>\n","default":"'none'"},"circular":{"type":["Object"],"description":"<p>Configuration about circular layout.</p>\n","properties":{"rotateLabel":{"type":["boolean"],"description":"<p>Whether to rotate the label automatically.</p>\n","default":false}}},"force":{"type":["Object"],"description":"<p>Configuration items about force-directed layout. Force-directed layout simulates spring/charge model, which will add a repulsion between 2 nodes and add a attraction between 2 nodes of each edge. In each iteration nodes will move under the effect of repulsion and attraction. After several iterations, the nodes will be static in a balanced position. As a result, the energy local minimum of this whole model will be realized.</p>\n<p>The result of force-directed layout has a good symmetries and clustering, which is also aesthetically pleasing.</p>\n","properties":{"initLayout":{"type":["string"],"description":"<p>The initial layout before force-directed layout, which will influence on the result of force-directed layout.</p>\n<p>It defaults not to do any layout and use <a href=\"#series-graph.data.x\">x</a>, <a href=\"#series-graph.data.y\">y</a> provided in <a href=\"#series-graph.data\">node</a> as the position of node. If it doesn&#39;t exist, the position will be generated randomly.</p>\n<p>You can also use circular layout <code class=\"codespan\">&#39;circular&#39;</code>.</p>\n"},"repulsion":{"type":["Array","number"],"description":"<p>The repulsion factor between nodes. The repulsion will be stronger and the distance between 2 nodes becomes further as this value becomes larger.</p>\n<p>It can be an array to represent the range of repulsion. In this case larger value have larger repulsion and smaller value will have smaller repulsion.</p>\n","default":50},"gravity":{"type":["number"],"description":"<p>The gravity factor enforcing nodes approach to the center. The nodes will be closer to the center as the value becomes larger.</p>\n","default":0.1},"edgeLength":{"type":["Array","number"],"description":"<p>The distance between 2 nodes on edge. This distance is also affected by <a href=\"#series-graph.force.repulsion\">repulsion</a>.</p>\n<p>It can be an array to represent the range of edge length. In this case edge with larger value will be shorter, which means two nodes are closer. And edge with smaller value will be longer.</p>\n","default":30},"layoutAnimation":{"type":["boolean"],"description":"<p>Because the force-directed layout will be steady after several iterations, this parameter will be decide whether to show the iteration animation of layout. It is not recommended to be closed on browser when there are a lot of node data (&gt;100) as the layout process will cause browser to hang.</p>\n","default":true},"friction":{"type":["number"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.5.0</code></p>\n</blockquote>\n<p>It will slow down the nodes&#39; movement. The value range is from 0 to 1.</p>\n<p>But it is still an experimental option, see <a href=\"https://github.com/apache/incubator-echarts/issues/11024\" target=\"_blank\">#11024</a>.</p>\n","default":0.6}}},"roam":{"type":["boolean","string"],"description":"<p>Whether to enable mouse zooming and translating. <code class=\"codespan\">false</code> by default. If either zooming or translating is wanted, it can be set to <code class=\"codespan\">&#39;scale&#39;</code> or <code class=\"codespan\">&#39;move&#39;</code>. Otherwise, set it to be <code class=\"codespan\">true</code> to enable both.</p>\n","default":false},"nodeScaleRatio":{"type":["number"],"description":"<p>Related zooming ratio of nodes when mouse zooming in or out. When it is set as 0, the node will not zoom as the mouse zooms.</p>\n","default":0.6},"draggable":{"type":["boolean"],"description":"<p>If node is draggable. Only available when using force-directed layout.</p>\n","default":false},"symbol":{"type":["string","Function"],"description":"<p>Symbol of node of relation graph.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'circle'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>node of relation graph symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":10},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of node of relation graph symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of node of relation graph symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"focusNodeAdjacency":{"type":["boolean"],"description":"<p>Whether to focus/highlight the hover node and it&#39;s adjacencies.</p>\n","default":false},"edgeSymbol":{"type":["Array","string"],"description":"<p>Symbol of two ends of edge line.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">edgeSymbol: [&#39;circle&#39;, &#39;arrow&#39;]\n</code></pre>\n","default":"['none', 'none']"},"edgeSymbolSize":{"type":["Array","number"],"description":"<p>Size of symbol of two ends of edge line. Can be an array or a single number.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">// Start symbol has size 5 and end symbol has size 10\nsymbolSize: [5, 10],\n// All has size 10\nsymbolSize: 10\n</code></pre>\n","default":10},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n","default":"'pointer'"},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of , <code class=\"codespan\">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"color":{"type":["Color","Function"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n<p>Supports callback functions, in the form of:</p>\n<pre><code class=\"lang-js\">(params: Object) =&gt; Color\n</code></pre>\n<p>Input parameters are <code class=\"codespan\">seriesIndex</code>, <code class=\"codespan\">dataIndex</code>, <code class=\"codespan\">data</code>, <code class=\"codespan\">value</code>, and etc. of data item.</p>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"lineStyle":{"type":["Object"],"description":"<p>The style of edge line. <a href=\"#series-graph.lineStyle.color\">lineStyle.color</a> can be <code class=\"codespan\">&#39;source&#39;</code> or <code class=\"codespan\">&#39;target&#39;</code>, which will use the color of source node or target node.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#aaa'"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":0.5},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"edgeLabel":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>If show label on edge.</p>\n","default":false},"position":{"type":["string"],"description":"<p>Label position, options:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;end&#39;</code></li>\n</ul>\n","default":"'middle'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"edgeLabel":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>If show label on edge.</p>\n","default":false},"position":{"type":["string"],"description":"<p>Label position, options:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;end&#39;</code></li>\n</ul>\n","default":"'middle'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"categories":{"type":["Array"],"description":"<p>The categories of node, which is optional.\nIf there is a classification of nodes, the category of each node can be assigned through <a href=\"#series-graph.data.category\">data[i].category</a>. And the style of category will also be applied to the style of nodes. <code class=\"codespan\">categories</code> can also be used in <a href=\"#legend\">legend</a>.</p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Name of category, which is used to correspond with <a href=\"#legend\">legend</a> and the content of <a href=\"#tooltip\">tooltip</a>.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of node of this category.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>node of this category symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of node of this category symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of node of this category symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>The style of node in this category.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"<p>The label style of node in this category.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"inside"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"data":{"type":["Array"],"description":"<p>Nodes list of graph.</p>\n<pre><code class=\"lang-js\">data: [{\n    name: &#39;1&#39;,\n    x: 10,\n    y: 10,\n    value: 10\n}, {\n    name: &#39;2&#39;,\n    x: 100,\n    y: 100,\n    value: 20,\n    symbolSize: 20,\n    itemStyle: {\n        color: &#39;red&#39;\n    }\n}]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Name of data item.</p>\n"},"x":{"type":["number"],"description":"<p><code class=\"codespan\">x</code> value of node position.</p>\n"},"y":{"type":["number"],"description":"<p><code class=\"codespan\">y</code> value of node position.</p>\n"},"fixed":{"type":["boolean"],"description":"<p>If node are fixed when doing force directed layout.</p>\n"},"value":{"type":["number","Array"],"description":"<p>Value of data item.</p>\n"},"category":{"type":["number"],"description":"<p>Index of category which the data item belongs to.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of node of this category.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>node of this category symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of node of this category symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of node of this category symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>The style of this node.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"<p>The label style of this node.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"nodes":{"type":["Array"],"description":"<p>Alias of <a href=\"#series-graph.data\">data</a></p>\n"},"links":{"type":["Array"],"description":"<p>Relational data between nodes. Example:</p>\n<pre><code class=\"lang-js\">links: [{\n    source: &#39;n1&#39;,\n    target: &#39;n2&#39;\n}, {\n    source: &#39;n2&#39;,\n    target: &#39;n3&#39;\n}]\n</code></pre>\n","items":{"type":"Object","properties":{"source":{"type":["string","number"],"description":"<p>A string representing the <a href=\"#series-graph.data.name\">name of source node</a> on edge. Can also be a number representing the node index.</p>\n"},"target":{"type":["string","number"],"description":"<p>A string representing the <a href=\"#series-graph.data.name\">name of target node</a> on edge. Can also be a number representing node index.</p>\n"},"value":{"type":["number"],"description":"<p>value of edge, can be mapped to edge length in force graph.</p>\n"},"lineStyle":{"type":["Object"],"description":"<p>Line style of edges.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>The curveness of edge, supporting values from 0 to 1. The curveness will be larger as the value becomes lager.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>If show label on edge.</p>\n","default":false},"position":{"type":["string"],"description":"<p>Label position, options:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;end&#39;</code></li>\n</ul>\n","default":"'middle'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>If show label on edge.</p>\n","default":false},"position":{"type":["string"],"description":"<p>Label position, options:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;end&#39;</code></li>\n</ul>\n","default":"'middle'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"symbol":{"type":["Array","string"],"description":"<p>Symbol of edge ends. Can be an array with two item to specify two ends, or a string specifies both ends.</p>\n"},"symbolSize":{"type":["Array","string"],"description":"<p>Symbol size of edge ends. Can be an array with two item to specify two ends, or a string specifies both ends.</p>\n"},"ignoreForceLayout":{"type":["boolean"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.5.0</code></p>\n</blockquote>\n<p>Prevent this edge from force layout calculating.</p>\n","default":false}}}},"edges":{"type":["Array"],"description":"<p>Alias of <a href=\"#series-graph.links\">links</a></p>\n"},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-graph.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-graph.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-graph.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-graph.markPoint.data.x\">x</a>, <a href=\"#series-graph.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-graph.markPoint.data.coord\">coord</a> attribute, in which <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-graph.markPoint.data.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-graph.markPoint.data.valueIndex\">valueIndex</a> or <a href=\"#series-graph.markPoint.data.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n    {\n        name: &#39;maximum&#39;,\n        type: &#39;max&#39;\n    }, \n    {\n        name: &#39;coordinate&#39;,\n        coord: [10, 20]\n    }, {\n        name: &#39;fixed x position&#39;,\n        yAxis: 10,\n        x: &#39;90%&#39;\n    }, \n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Available when using <a href=\"#series-graph.markPoint.data.type\">type</a> it is used to assign maximum value and minimum value in dimensions, it could be <code class=\"codespan\">0</code> (xAxis, radiusAxis), <code class=\"codespan\">1</code> (yAxis, angleAxis), and use the first value axis dimension by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-graph.markPoint.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["Object"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-graph.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class=\"codespan\">symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-graph.markLine.data.0.x\">x</a>, <a href=\"#series-graph.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-graph.markLine.data.0.coord\">coord</a> attribute, in which <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-graph.markLine.data.0.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-graph.markLine.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-graph.markLine.data.0.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n<li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code class=\"codespan\">xAxis</code> or <code class=\"codespan\">yAxis</code>. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a> for example.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p>You may also set the type of mark line through <code class=\"codespan\">type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code class=\"codespan\">valueIndex</code>.</p>\n<pre><code>data: [\n    {\n        name: &#39;average line&#39;,\n        // &#39;average&#39;, &#39;min&#39;, and &#39;max&#39; are supported\n        type: &#39;average&#39;\n    },\n    {\n        name: &#39;Horizontal line with Y value at 100&#39;,\n        yAxis: 100\n    },\n    [\n        {\n            // Use the same name with starting and ending point\n            name: &#39;Minimum to Maximum&#39;,\n            type: &#39;min&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n    [\n        {\n            name: &#39;Markline between two points&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [{\n        // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n        yAxis: &#39;max&#39;,\n        x: &#39;90%&#39;\n    }, {\n        type: &#39;max&#39;\n    }],\n    [\n        {\n            name: &#39;Mark line between two points&#39;,\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n<li><code class=\"codespan\">&#39;median&#39;</code> median value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-graph.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-graph.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'starting point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n<li><code class=\"codespan\">&#39;median&#39;</code> median value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-graph.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-graph.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'ending point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code class=\"codespan\">data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li><p>Specify the coordinate in screen coordinate system using <a href=\"#series-graph.markArea.data.0.x\">x</a>, <a href=\"#series-graph.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code class=\"codespan\">5</code>), or percent (e.g., the value is <code class=\"codespan\">&#39;35%&#39;</code>).</p>\n</li>\n<li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using\n<a href=\"#series-graph.markArea.data.0.coord\">coord</a>, which can be also set as <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> (e.g, <code class=\"codespan\">coord: [23, &#39;min&#39;]</code>, or <code class=\"codespan\">coord: [&#39;average&#39;, &#39;max&#39;]</code>).</p>\n</li>\n</ol>\n<ol start=\"3\">\n<li>Locate the point on the min value or max value of <code class=\"codespan\">series.data</code> using <a href=\"#series-graph.markArea.data.0.type\">type</a>, where <a href=\"#series-graph.markArea.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-graph.markPoint.data.0.valueDim\">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</li>\n<li>If in cartesian, you can only specify <code class=\"codespan\">xAxis</code> or <code class=\"codespan\">yAxis</code> to define a mark area based on only X or Y axis, see sample <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a></li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n\n    [\n        {\n            name: &#39;From average to max&#39;,\n            type: &#39;average&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n\n    [\n        {\n            name: &#39;Mark area between two points in data coordiantes&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [\n        {\n            name: &#39;From 60 to 80&#39;,\n            yAxis: 60\n        },\n        {\n            yAxis: 80\n        }\n    ], [\n        {\n            name: &#39;Mark area covers all data&#39;\n            coord: [&#39;min&#39;, &#39;min&#39;]\n        },\n        {\n            coord: [&#39;max&#39;, &#39;max&#39;]\n        }\n    ],\n    [\n        {\n            name: &#39;Mark area in two screen points&#39;,\n            x: 100,\n            y: 100\n        }, {\n            x: &#39;90%&#39;,\n            y: &#39;10%&#39;\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> max value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> min value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-graph.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-graph.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'start'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> max value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> min value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-graph.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-graph.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'end'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between  component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'center'"},"top":{"type":["string","number"],"description":"<p>Distance between  component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'middle'"},"right":{"type":["string","number"],"description":"<p>Distance between  component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"<p>Distance between  component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"width":{"type":["string","number"],"description":"<p>Width of  component. </p>\n","default":"auto"},"height":{"type":["string","number"],"description":"<p>Height of  component. </p>\n","default":"auto"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong> Sankey diagram </strong>\nSankey diagram is a specific type of streamgraph (can also be seen as a directed acyclic graph) in which the width of each branch is shown proportionally to the flow quantity. These graphs are typically used to visualize energy or material or cost transfers between processes. They can also visualize the energy accounts, material flow accounts on a regional or national level, and also the breakdown of cost of item or services.</p>\n<p><strong>Example: </strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sankey-energy&edit=1&reset=1\" width=\"700\" height=\"580\"><iframe />\n\n\n\n<p><br> \n<strong>Visual Encoding: </strong></p>\n<p>The Sankey diagram encodes each <code class=\"codespan\">node</code> of the raw data into a small rectangle. Different nodes are presented in different colors as far as possible. The <code class=\"codespan\">label</code> next to the small rectangul encodes the name of the node.</p>\n<p>In addition, the edge between two small rectangles in the diagram encodes the <code class=\"codespan\">link</code> of the raw data. The width of edge is shown proportionally to the <code class=\"codespan\">value</code> of <code class=\"codespan\">link</code>.</p>\n","properties":{"type":{"type":["string"],"description":"","default":"'sankey'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between sankey component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"5%"},"top":{"type":["string","number"],"description":"<p>Distance between sankey component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"5%"},"right":{"type":["string","number"],"description":"<p>Distance between sankey component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n","default":"20%"},"bottom":{"type":["string","number"],"description":"<p>Distance between sankey component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n","default":"5%"},"width":{"type":["string","number"],"description":"<p>Width of sankey component. </p>\n","default":null},"height":{"type":["string","number"],"description":"<p>Height of sankey component. </p>\n","default":null},"nodeWidth":{"type":["number"],"description":"<p>The node width of rectangle in Sankey diagram.</p>\n","default":20},"nodeGap":{"type":["number"],"description":"<p>The gap between any two rectangles in each column of the Sankey diagram.</p>\n","default":8},"nodeAlign":{"type":["string"],"description":"<p>Controls the horizontal alignment of nodes in the diagram. </p>\n<p>May be:</p>\n<ul>\n<li><p><code class=\"codespan\">left</code>: initial nodes (those with no incoming links) are aligned to the left of the diagram.</p>\n</li>\n<li><p><code class=\"codespan\">right</code>: terminal nodes (those with no outgoing links) are aligned to the right of the diagram.</p>\n</li>\n<li><p><code class=\"codespan\">justify</code>: initial and terminal nodes are aligned on the left and right edges. </p>\n</li>\n</ul>\n<p>Note when <a href=\"#series-sankey.orient\">orient</a> is <code class=\"codespan\">vertical</code>, <code class=\"codespan\">nodeAlign</code> controls vertical alignment.</p>\n","default":"'justify'"},"layoutIterations":{"type":["number"],"description":"<p>The iterations of layout, which is used to iteratively optimize the position of the nodes and edges in the Sankey diagram to reduce the overlapping between nodes and edges. The default value is <code class=\"codespan\">32</code>. If you want the order of the nodes in the chart to be the same with the order in the original <a href=\"#series-sankey.data\">data</a>, you can set the value to be <code class=\"codespan\">0</code>.</p>\n","default":32},"orient":{"type":["string"],"description":"<p>The layout direction of the nodes in the Sankey diagram, which can be horizontal from left to right or vertical from top to bottom. The corresponding parameter values ​​are <code class=\"codespan\">horizontal</code> or <code class=\"codespan\">vertical</code>.</p>\n","default":"'horizontal'"},"draggable":{"type":["boolean"],"description":"<p>The drag-and-drop interaction of the node, which is enabled by default. After opening, the user can drag any node in the Sankey diagram to any position. To turn this interaction off, simply set the value to <code class=\"codespan\">false</code>.</p>\n","default":true},"focusNodeAdjacency":{"type":["boolean","string"],"description":"<p>Support when mouse hovering over a node or an edge, the adjacent nodes and edges are also highlighted. Default off, can be manually opened.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">false</code>: When hovering over a node or an edge, only the hovered node or edge is highlighted.</li>\n<li><code class=\"codespan\">true</code>: the same as <code class=\"codespan\">&#39;allEdges&#39;</code>.</li>\n<li><code class=\"codespan\">&#39;allEdges&#39;</code>: When hovering over a node, all of the adjacent edges and nodes are highlighted. When hovering over an edge, the adjacent nodes are highlighted.</li>\n<li><code class=\"codespan\">&#39;outEdges&#39;</code>: When hovering over a node, the outcoming edges and its adjacent nodes are highlighted. When hovering over an edge, the adjacent nodes are highlighted.</li>\n<li><code class=\"codespan\">&#39;inEdges&#39;</code>: When hovering over a node, the incoming edges and its adjacent nodes are highlighted. When hovering over an edge, the adjacent nodes are highlighted.</li>\n</ul>\n","default":false},"levels":{"type":["Array"],"description":"<p>The setting of each layer of Sankey diagram. Can be set layer by layer, as follows:</p>\n<pre><code class=\"lang-js\">levels: [{\n    depth: 0,\n    itemStyle: {\n        color: &#39;#fbb4ae&#39;\n    },\n    lineStyle: {\n        color: &#39;source&#39;,\n        opacity: 0.6\n    }\n}, {\n    depth: 1,\n    itemStyle: {\n        color: &#39;#b3cde3&#39;\n    },\n    lineStyle: {\n        color: &#39;source&#39;,\n        opacity: 0.6\n    }\n}]\n</code></pre>\n<p>You can also only set a certain layer:</p>\n<pre><code class=\"lang-js\">levels: [{\n    depth: 3,\n    itemStyle: {\n        color: &#39;#fbb4ae&#39;\n    },\n    lineStyle: {\n        color: &#39;source&#39;,\n        opacity: 0.6\n    }\n}]\n</code></pre>\n","items":{"type":"Object","properties":{"depth":{"type":["number"],"description":"<p>Specify which layer is set, value starts from 0.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Specify the node style of the specific layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"lineStyle":{"type":["Object"],"description":"<p>Specify the outEdge style of the specific layer. in which <a href=\"#series-sankey.lineStyle.color\">lineStyle.color</a> can be assigned to the value of <code class=\"codespan\">&#39;source&#39;</code> of <code class=\"codespan\">&#39;target&#39;</code>, then the OutEdge will automatically take the source node or target node color as its own color.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>The color of the edge in Sankey diagram.</p>\n","default":"\"'#314656'\""},"opacity":{"type":["number"],"description":"<p>The opacity of the edge in Sankey diagram.</p>\n","default":0.2},"curveness":{"type":["number"],"description":"<p>The curveness of the edge in Sankey diagram.</p>\n","default":0.5},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}}}}},"label":{"type":["Object"],"description":"<p><code class=\"codespan\">label</code> describes the text label style in each rectangular node.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'right'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>The style of node rectangle in Sankey diagram.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"'#aaa'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"lineStyle":{"type":["Object"],"description":"<p>The edge style of Sankey diagram, in which <a href=\"#series-sankey.lineStyle.color\">lineStyle.color</a> can be assigned to the value of <code class=\"codespan\">&#39;source&#39;</code> of <code class=\"codespan\">&#39;target&#39;</code>, then the edge will automatically take the source node or target node color as its own color.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>The color of the edge in Sankey diagram.</p>\n","default":"\"'#314656'\""},"opacity":{"type":["number"],"description":"<p>The opacity of the edge in Sankey diagram.</p>\n","default":0.2},"curveness":{"type":["number"],"description":"<p>The curveness of the edge in Sankey diagram.</p>\n","default":0.5},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>The color of the edge in Sankey diagram.</p>\n","default":"\"'#314656'\""},"opacity":{"type":["number"],"description":"<p>The opacity of the edge in Sankey diagram.</p>\n","default":0.2},"curveness":{"type":["number"],"description":"<p>The curveness of the edge in Sankey diagram.</p>\n","default":0.5},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}}}},"data":{"type":["Array"],"description":"<p>The nodes list of the sankey diagram.</p>\n<pre><code class=\"lang-js\">data: [{\n    name: &#39;node1&#39;,\n    // This attribute decides the layer of the current node.\n    depth: 0\n}, {\n    name: &#39;node2&#39;,\n    depth: 1\n}]\n</code></pre>\n<p><strong>Notice:</strong> The name of the node cannot be repeated.</p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>The name of the node.</p>\n"},"value":{"type":["number"],"description":"<p>The value of the node, which can used to determine the height of the node in horizontal orient or width in the vertical orient.</p>\n"},"depth":{"type":["number"],"description":"<p>The layer of the node, value starts from 0.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>The style of this node.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"<p>The lable style of this node.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"nodes":{"type":["Array"],"description":"<p>Equals to <a href=\"#series-sankey.data\">data</a></p>\n"},"links":{"type":["Array"],"description":"<p>The links between nodes. <strong>Notes: The Sankey diagram theoretically only supports Directed Acyclic Graph(DAG), so please make sure that there is no cycle in the links.</strong> For instance:</p>\n<pre><code class=\"lang-js\">links: [{\n    source: &#39;n1&#39;,\n    target: &#39;n2&#39;\n}, {\n    source: &#39;n2&#39;,\n    target: &#39;n3&#39;\n}]\n</code></pre>\n","items":{"type":"Object","properties":{"source":{"type":["string"],"description":"<p>The <a href=\"#series-sankey.data.name\">name of source node</a> of edge</p>\n"},"target":{"type":["string"],"description":"<p>The <a href=\"#series-sankey.data.name\">name of target node</a> of edge</p>\n"},"value":{"type":["number"],"description":"<p>The value of edge, which decides the width of edge.</p>\n"},"lineStyle":{"type":["Object"],"description":"<p>The line stlye of edge.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>The color of the edge in Sankey diagram.</p>\n","default":"\"'#314656'\""},"opacity":{"type":["number"],"description":"<p>The opacity of the edge in Sankey diagram.</p>\n","default":0.2},"curveness":{"type":["number"],"description":"<p>The curveness of the edge in Sankey diagram.</p>\n","default":0.5},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>The color of the edge in Sankey diagram.</p>\n","default":"\"'#314656'\""},"opacity":{"type":["number"],"description":"<p>The opacity of the edge in Sankey diagram.</p>\n","default":0.2},"curveness":{"type":["number"],"description":"<p>The curveness of the edge in Sankey diagram.</p>\n","default":0.5},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}}}}}}},"edges":{"type":["Array"],"description":"<p>Equals to <a href=\"#series-sankey.links\">links</a></p>\n"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"'linear'"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong>Funnel chart</strong></p>\n<p><strong>sample: </strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=funnel&reset=1&edit=1\" width=\"600\" height=\"400\"><iframe />\n\n\n","properties":{"type":{"type":["string"],"description":"","default":"'funnel'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"min":{"type":["number"],"description":"<p>The specified minimum value.</p>\n","default":0},"max":{"type":["number"],"description":"<p>The specified maximum value.</p>\n","default":100},"minSize":{"type":["number","string"],"description":"<p>The mapped width from minimum data value <a href=\"#series-funnel.min\">min</a>.</p>\n<p>It can be absolute pixel and also the percentage of <a href=\"#series-funnel.width\">layout width</a>. If you don&#39;t want the graph of minimum value to be a triangle, you can set up this property larger than 0.</p>\n","default":"'0%'"},"maxSize":{"type":["number","string"],"description":"<p>The mapped width from maximum data value <a href=\"#series-funnel.max\">max</a>.</p>\n<p>It can be absolute pixel and also the percentage of <a href=\"#series-funnel.width\">layout width</a>.</p>\n","default":"'100%'"},"sort":{"type":["string","Function"],"description":"<p>Data sorting, which can be whether <code class=\"codespan\">&#39;ascending&#39;</code>, <code class=\"codespan\">&#39;descending&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code>(in data order) or a function, which is the same as <code class=\"codespan\">Array.prototype.sort(function (a, b) { ... })</code>;</p>\n","default":"'descending'"},"gap":{"type":["number"],"description":"<p>Gap between each trapezoid.</p>\n","default":0},"legendHoverLink":{"type":["boolean"],"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n","default":true},"funnelAlign":{"type":["string"],"description":"<p>Horizontal align. Defaults to align center. Can be &#39;left&#39;, &#39;right&#39;, &#39;center&#39;.</p>\n","default":"'center'"},"label":{"type":["Object"],"description":"<p>Text label of funnel chart, to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"","default":false},"position":{"type":["string"],"description":"<p>Label position.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left side of funnel chart. The corresponding trapezoid would be related to through <a href=\"#series-funnel.labelLine\">visual guide line</a>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p> Right side of funnel chart. The corresponding trapezoid would be related to through <a href=\"#series-funnel.labelLine\">visual guide line</a>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p>  Inside the trapezoid of funnel chart.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;insideRight&#39;</code></p>\n<p>  Right inside the trapezoid of funnel chart.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;insideLeft&#39;</code></p>\n<p>  Left inside the trapezoid of funnel chart.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;leftTop&#39;</code></p>\n<p>  Top-left of funnel chart.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;leftBottom&#39;</code></p>\n<p>  Bottom-left of funnel chart.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;rightTop&#39;</code></p>\n<p>  Top-right side of funnel chart.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;rightBottom&#39;</code></p>\n<p>  Bottom-right side of funnel chart.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;inner&#39;</code> equals to <code class=\"codespan\">&#39;inside&#39;</code>.</p>\n</li>\n<li><code class=\"codespan\">&#39;center&#39;</code> equals to <code class=\"codespan\">&#39;inside&#39;</code>.</li>\n</ul>\n","default":"'outside'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // percentage\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"labelLine":{"type":["Object"],"description":"<p>The visual guide line style of label. When <a href=\"#series-funnel.label.position\">label position</a> is set as <code class=\"codespan\">&#39;left&#39;</code>or<code class=\"codespan\">&#39;right&#39;</code>, the visual guide line will show.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show visual guide line.</p>\n"},"length":{"type":["number"],"description":"<p>The length of the first part from visual guide line.</p>\n"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of , <code class=\"codespan\">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"color":{"type":["Color","Function"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n<p>Supports callback functions, in the form of:</p>\n<pre><code class=\"lang-js\">(params: Object) =&gt; Color\n</code></pre>\n<p>Input parameters are <code class=\"codespan\">seriesIndex</code>, <code class=\"codespan\">dataIndex</code>, <code class=\"codespan\">data</code>, <code class=\"codespan\">value</code>, and etc. of data item.</p>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"","default":false},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // percentage\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"labelLine":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show visual guide line.</p>\n"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between funnel chart component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":80},"top":{"type":["string","number"],"description":"<p>Distance between funnel chart component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":60},"right":{"type":["string","number"],"description":"<p>Distance between funnel chart component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n","default":80},"bottom":{"type":["string","number"],"description":"<p>Distance between funnel chart component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n","default":60},"width":{"type":["string","number"],"description":"<p>Width of funnel chart component. Adaptive by default.</p>\n","default":"'auto'"},"height":{"type":["string","number"],"description":"<p>Height of funnel chart component. Adaptive by default.</p>\n","default":"'auto'"},"seriesLayoutBy":{"type":["string"],"description":"<p>When <a href=\"#dataset\">dataset</a> is used, <code class=\"codespan\">seriesLayoutBy</code> specifies whether the column or the row of <code class=\"codespan\">dataset</code> is mapped to the series, namely, the series is &quot;layout&quot; on columns or rows. Optional values:</p>\n<ul>\n<li>&#39;column&#39;: by default, the columns of <code class=\"codespan\">dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>&#39;row&#39;:the rows of <code class=\"codespan\">dataset</code> are mapped to the series. In this case, each row represents a dimension.</li>\n</ul>\n<p>Check this <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=dataset-series-layout-by\" target=\"_blank\">example</a>.</p>\n","default":"'column'"},"datasetIndex":{"type":["number"],"description":"<p>If <a href=\"#series.data\">series.data</a> is not specified, and <a href=\"#dataset\">dataset</a> exists, the series will use <code class=\"codespan\">dataset</code>. <code class=\"codespan\">datasetIndex</code> specifies which dataset will be used.</p>\n","default":0},"dimensions":{"type":["Array"],"description":"<p><code class=\"codespan\">dimensions</code> can be used to define dimension info for <code class=\"codespan\">series.data</code> or <code class=\"codespan\">dataset.source</code>.</p>\n<p>Notice: if <a href=\"#dataset\">dataset</a> is used, we can provide dimension names in the first column/row of <a href=\"#dataset.source\">dataset.source</a>, and not need to specify <code class=\"codespan\">dimensions</code> here. But if <code class=\"codespan\">dimensions</code> is specified here, echarts will not retrieve dimension names from the first row/column of <code class=\"codespan\">dataset.source</code> any more.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\n    ]\n}\n</code></pre>\n<p>Each data item of <code class=\"codespan\">dimensions</code> can be:</p>\n<ul>\n<li><code class=\"codespan\">string</code>, for example, <code class=\"codespan\">&#39;someName&#39;</code>, which equals to <code class=\"codespan\">{name: &#39;someName&#39;}</code>.</li>\n<li><code class=\"codespan\">Object</code>, where the attributes can be:<ul>\n<li>name: <code class=\"codespan\">string</code>.</li>\n<li>type: <code class=\"codespan\">string</code>, supports:<ul>\n<li><code class=\"codespan\">number</code></li>\n<li><code class=\"codespan\">float</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array\" target=\"_blank\">Float64Array</a></li>\n<li><code class=\"codespan\">int</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array\" target=\"_blank\">Int32Array</a></li>\n<li><code class=\"codespan\">ordinal</code>, discrete value, which represents string generally.</li>\n<li><code class=\"codespan\">time</code>, time value, see <a href=\"#series.data\">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code class=\"codespan\">string</code>, generally used in tooltip for dimension display. If not specified, use <code class=\"codespan\">name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code class=\"codespan\">dimensions</code> is specified, the default <code class=\"codespan\">tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code class=\"codespan\">tooltip</code> will displayed only value horizontally.</p>\n"},"encode":{"type":["Object"],"description":"<p>Define what is encoded to for each dimension of <code class=\"codespan\">data</code>. For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n</code></pre>\n<p>When <a href=\"#series.dimensions\">dimensions</a> is used to defined name for a certain dimension, <code class=\"codespan\">encode</code> can refer the name directly. For example:</p>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<p>The basic structure of <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code> or some special reserved names like &quot;tooltip&quot;, &quot;itemName&quot; etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code class=\"codespan\">encode</code> listed as follows:</p>\n<pre><code class=\"lang-js\">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension &quot;product&quot; and &quot;score&quot; in the tooltip.\n    tooltip: [&#39;product&#39;, &#39;score&#39;]\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // &#39;pie&#39;, &#39;funnel&#39;, where data item name can be displayed in legend.\n    itemName: 3\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension &quot;score&quot; to the X axis.\n    x: [1, 5, &#39;score&#39;],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like &#39;pie&#39;, &#39;funnel&#39; etc.:\nencode: {\n    value: 3\n}\n</code></pre>\n<p>This is an <a href=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a> for <code class=\"codespan\">encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code class=\"codespan\">encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href=\"#dataZoom\">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class=\"lang-js\">var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            return {\n                type: &#39;circle&#39;,\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: &#39;blue&#39;\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n</code></pre>\n"},"data":{"type":["Array"],"description":"<p>Data array of  series, which can be a single data value, like:</p>\n<pre><code class=\"lang-js\">[12, 34, 56, 10, 23]\n</code></pre>\n<p>Or, if need extra dimensions for components like <a href=\"#visualMap\">visualMap</a> to map to graphic attributes like color, it can also be in the form of array. For example:</p>\n<pre><code class=\"lang-js\">[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]\n</code></pre>\n<p>In this case, we can assgin the second value in each array item to <a href=\"#visualMap\">visualMap</a> component.</p>\n<p>More likely, we need to assign name to each data item, in which case each item should be an object:</p>\n<pre><code class=\"lang-js\">[{\n    // name of date item\n    name: &#39;data1&#39;,\n    // value of date item is 8\n    value: 10\n}, {\n    name: &#39;data2&#39;,\n    value: 20\n}]\n</code></pre>\n<p>Each data item can be further customized:</p>\n<pre><code class=\"lang-js\">[{\n    name: &#39;data1&#39;,\n    value: 10\n}, {\n    // name of data item\n    name: &#39;data2&#39;,\n    value : 56,\n    // user-defined label format that only useful for this data item\n    label: {},\n    // user-defined special itemStyle that only useful for this data item\n    itemStyle:{}\n}]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>the name of data item.</p>\n"},"value":{"type":["number"],"description":"<p>data value.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of , <code class=\"codespan\">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"<p>The label configuration of a single data item.</p>\n","properties":{"show":{"type":["boolean"],"description":"","default":false},"position":{"type":["string"],"description":"<p>Label position.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left side of funnel chart. The corresponding trapezoid would be related to through <a href=\"#series-funnel.labelLine\">visual guide line</a>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p> Right side of funnel chart. The corresponding trapezoid would be related to through <a href=\"#series-funnel.labelLine\">visual guide line</a>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p>  Inside the trapezoid of funnel chart.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;insideRight&#39;</code></p>\n<p>  Right inside the trapezoid of funnel chart.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;insideLeft&#39;</code></p>\n<p>  Left inside the trapezoid of funnel chart.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;leftTop&#39;</code></p>\n<p>  Top-left of funnel chart.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;leftBottom&#39;</code></p>\n<p>  Bottom-left of funnel chart.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;rightTop&#39;</code></p>\n<p>  Top-right side of funnel chart.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;rightBottom&#39;</code></p>\n<p>  Bottom-right side of funnel chart.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;inner&#39;</code> equals to <code class=\"codespan\">&#39;inside&#39;</code>.</p>\n</li>\n<li><code class=\"codespan\">&#39;center&#39;</code> equals to <code class=\"codespan\">&#39;inside&#39;</code>.</li>\n</ul>\n","default":"'outside'"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"labelLine":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show visual guide line.</p>\n"},"length":{"type":["number"],"description":"<p>The length of the first part from visual guide line.</p>\n"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"","default":false},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"labelLine":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show visual guide line.</p>\n"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-funnel.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-funnel.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-funnel.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li>Assign coordinate according to container with <a href=\"#series-funnel.markPoint.data.x\">x</a>, <a href=\"#series-funnel.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["Object"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-funnel.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class=\"codespan\">symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li>Assign coordinate according to container with <a href=\"#series-funnel.markLine.data.0.x\">x</a>, <a href=\"#series-funnel.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<pre><code>data: [\n    [\n        {\n            name: &#39;Mark line between two points&#39;,\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'starting point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'ending point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code class=\"codespan\">data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li>Specify the coordinate in screen coordinate system using <a href=\"#series-funnel.markArea.data.0.x\">x</a>, <a href=\"#series-funnel.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code class=\"codespan\">5</code>), or percent (e.g., the value is <code class=\"codespan\">&#39;35%&#39;</code>).</li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n    [\n        {\n            name: &#39;Mark area in two screen points&#39;,\n            x: 100,\n            y: 100\n        }, {\n            x: &#39;90%&#39;,\n            y: &#39;10%&#39;\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'start'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'end'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong>Gauge chart</strong></p>\n<p><strong>Example: </strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=gauge-car&reset=1&edit=1\" width=\"600\" height=\"500\"><iframe />\n\n\n","properties":{"type":{"type":["string"],"description":"","default":"'gauge'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n\n"},"radius":{"type":["number","string"],"description":"<p>The radius of gauge chart. It can be a percentage value of the smaller of container half width and half height, also can be an absolute value.</p>\n","default":"'75%'"},"legendHoverLink":{"type":["boolean"],"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n","default":true},"startAngle":{"type":["number"],"description":"<p>The start angle of gauge chart. The direct right side of <a href=\"#series-gauge.center\">circle center</a> is <code class=\"codespan\">0</code> degree, the right above it is <code class=\"codespan\">90</code> degree, the direct left side of it is <code class=\"codespan\">180</code> degree.</p>\n","default":225},"endAngle":{"type":["number"],"description":"<p>The end angle of gauge chart.</p>\n","default":-45},"clockwise":{"type":["boolean"],"description":"<p>Whether the scale in gauge chart increases clockwise.</p>\n","default":true},"data":{"type":["Array"],"description":"<p>Data array of  series, which can be a single data value, like:</p>\n<pre><code class=\"lang-js\">[12, 34, 56, 10, 23]\n</code></pre>\n<p>Or, if need extra dimensions for components like <a href=\"#visualMap\">visualMap</a> to map to graphic attributes like color, it can also be in the form of array. For example:</p>\n<pre><code class=\"lang-js\">[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]\n</code></pre>\n<p>In this case, we can assgin the second value in each array item to <a href=\"#visualMap\">visualMap</a> component.</p>\n<p>More likely, we need to assign name to each data item, in which case each item should be an object:</p>\n<pre><code class=\"lang-js\">[{\n    // name of date item\n    name: &#39;data1&#39;,\n    // value of date item is 8\n    value: 10\n}, {\n    name: &#39;data2&#39;,\n    value: 20\n}]\n</code></pre>\n<p>Each data item can be further customized:</p>\n<pre><code class=\"lang-js\">[{\n    name: &#39;data1&#39;,\n    value: 10\n}, {\n    // name of data item\n    name: &#39;data2&#39;,\n    value : 56,\n    // user-defined label format that only useful for this data item\n    label: {},\n    // user-defined special itemStyle that only useful for this data item\n    itemStyle:{}\n}]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Data name.</p>\n"},"value":{"type":["number"],"description":"<p>Data value.</p>\n"}}}},"min":{"type":["number"],"description":"<p>The minimum data value which map to <a href=\"#series-gauge.minAngle\">minAngle</a>.</p>\n","default":0},"max":{"type":["number"],"description":"<p>The maximum data value which map to  <a href=\"#series-gauge.maxAngle\">maxAngle</a>.</p>\n","default":100},"splitNumber":{"type":["number"],"description":"<p>The number of split segments of gauge chart scale.</p>\n","default":10},"axisLine":{"type":["Object"],"description":"<p>The related configuration about the axis line of gauge chart.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the axis line of gauge chart.</p>\n","default":true},"lineStyle":{"type":["Object"],"description":"<p>The style of the axis line of gauge chart.</p>\n","properties":{"color":{"type":["Array"],"description":"<p>The axis line of gauge chart can be divided to several segments in different colors. The end position and color of each segment can be expressed by an array.</p>\n<p>Default value:</p>\n<pre><code class=\"lang-js\">[[0.2, &#39;#91c7ae&#39;], [0.8, &#39;#63869e&#39;], [1, &#39;#c23531&#39;]]\n</code></pre>\n"},"width":{"type":["number"],"description":"<p>The width of axis line.</p>\n","default":30},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"splitLine":{"type":["Object"],"description":"<p>The style of split line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the split line.</p>\n","default":true},"length":{"type":["number","string"],"description":"<p>The length of split line, can be a pecentage value relative to radius.</p>\n","default":30},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#eee"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":2},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"axisTick":{"type":["Object"],"description":"<p>The tick line style.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the scale.</p>\n","default":true},"splitNumber":{"type":["number"],"description":"<p>The split scale number between split line.</p>\n","default":5},"length":{"type":["number","string"],"description":"<p>The length of tick line, can be a pecentage value relative to radius.</p>\n","default":8},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#eee"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"axisLabel":{"type":["Object"],"description":"<p>Axis tick label.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the label.</p>\n","default":true},"distance":{"type":["number"],"description":"<p>The distance between the label and tick line.</p>\n","default":5},"formatter":{"type":["string","Function"],"description":"<p>The content formatter of scale label, which supports both string template and callback function.\nExample:</p>\n<pre><code class=\"lang-js\">// use string template. the template variable {value} represent the default label text\nformatter: &#39;{value} kg&#39;\n\n// use function callback. the function parameters are scale values.\nformatter: function (value) {\n    return value + &#39;km/h&#39;;\n}\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"pointer":{"type":["Object"],"description":"<p>Gauge chart pointer.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the pointer.</p>\n","default":true},"length":{"type":["string","number"],"description":"<p>The length of pointer which could be absolute value and also the percentage relative to <a href=\"#series-gauge.radius\">radius</a>.</p>\n","default":"'80%'"},"width":{"type":["number"],"description":"<p>The width of pointer.</p>\n","default":8}}},"itemStyle":{"type":["Object"],"description":"<p>The style of gauge chart.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>The color of pointer. Defaults to use <a href=\"#series-gauge.axisLine.lineStyle.color\">the color of section</a> where the numerical value belongs to.</p>\n","default":"'auto'"},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"title":{"type":["Object"],"description":"<p>The title of gauge chart.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the title.</p>\n","default":true},"offsetCenter":{"type":["Array"],"description":"<p>The offset position relative to the center of gauge chart. The first item of array is the horizontal offset; the second item of array is the vertical offset. It could be absolute value and also the percentage relative to the radius of gauge chart.</p>\n","default":"[0, '-40%']"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#333'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":15},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"detail":{"type":["Object"],"description":"<p>The detail about gauge chart which is used to show data.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the details.</p>\n","default":true},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"formatter":{"type":["Function","string"],"description":"<p>Formatter is used to format detail, which supports string template and callback function.</p>\n<pre><code class=\"lang-js\">formatter: function (value) {\n    return value.toFixed(0);\n}\n</code></pre>\n"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"offsetCenter":{"type":["Array"],"description":"<p>The offset position relative to the center of gauge chart. The first item of array is the horizontal offset; the second item of array is the vertical offset. It could be absolute value and also the percentage relative to the radius of gauge chart.</p>\n","default":"[0, '40%']"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'auto'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":15},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n\n","default":0}}},"color":{"type":["Color"],"description":"<p>The text color. Defaults to use <a href=\"#series-gauge.axisLine.lineStyle.color\">the color of section</a> where the numerical value belongs to.</p>\n","default":"'auto'"}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-gauge.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-gauge.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-gauge.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li>Assign coordinate according to container with <a href=\"#series-gauge.markPoint.data.x\">x</a>, <a href=\"#series-gauge.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["Object"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-gauge.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class=\"codespan\">symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li>Assign coordinate according to container with <a href=\"#series-gauge.markLine.data.0.x\">x</a>, <a href=\"#series-gauge.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<pre><code>data: [\n    [\n        {\n            name: &#39;Mark line between two points&#39;,\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'starting point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'ending point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code class=\"codespan\">data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li>Specify the coordinate in screen coordinate system using <a href=\"#series-gauge.markArea.data.0.x\">x</a>, <a href=\"#series-gauge.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code class=\"codespan\">5</code>), or percent (e.g., the value is <code class=\"codespan\">&#39;35%&#39;</code>).</li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n    [\n        {\n            name: &#39;Mark area in two screen points&#39;,\n            x: 100,\n            y: 100\n        }, {\n            x: &#39;90%&#39;,\n            y: &#39;10%&#39;\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'start'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'end'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong>pictorial bar chart</strong></p>\n<p>Pictorial bar chart is a type of bar chart that customized glyph (like images, <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a>) can be used instead of rectangular bar. This kind of chart is usually used in infographic.</p>\n<p>Pictorial bar chart can only be used in <a href=\"#grid\">rectangular coordinate</a> with at least 1 category axis.</p>\n<p><strong>Example:</strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=pictorialBar-hill&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n<p><strong>Layout</strong></p>\n<p>Basically <code class=\"codespan\">pictoialBar</code> is a type of bar chart, which follows the bar chart layout. In <code class=\"codespan\">pictorialBar</code>, each bar is named as <code class=\"codespan\">reference bar</code>, which does not be shown, but only be used as a reference for layout of pictorial graphic elements. Each pictorial graphic element is positioned with respect to its <code class=\"codespan\">reference bar</code> according to the setting of <a href=\"#series-pictorialBar.symbolPosition\">symbolPosition</a>、<a href=\"#series-pictorialBar.symbolOffset\">symbolOffset</a>.</p>\n<p>See the example below:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-position&reset=1&edit=1\" width=\"800\" height=\"600\"><iframe />\n\n\n<p><a href=\"#series-pictorialBar.symbolSize\">symbolSize</a> is used to specify the size of graphic elements.</p>\n<p>See the example below:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-symbolSize&reset=1&edit=1\" width=\"800\" height=\"600\"><iframe />\n\n\n\n\n<p><strong>Graphic types</strong></p>\n<p><a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> can be</p>\n<p>Graphic elements can be set as &#39;repeat&#39; or not by <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a>.</p>\n<ul>\n<li>If set as <code class=\"codespan\">false</code> (default), a single graphic element is used to represent a data item.</li>\n<li>If set as <code class=\"codespan\">true</code>, a group of repeat graphic elements are used to represent a data item.</li>\n</ul>\n<p>See the example below:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeat&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n<p>Each graphic element can be basic shape (like <code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, ...), or <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a>, or image. See <a href=\"#series-pictorialBar.symbolType\">symbolType</a>.</p>\n<p>See the example below:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-graphicType&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n<p><a href=\"#series-pictorialBar.symbolClip\">symbolClip</a> can be used to clip graphic elements.</p>\n<p>See the example below:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-clip&reset=1&edit=1\" width=\"800\" height=\"600\"><iframe />\n\n\n\n","properties":{"type":{"type":["string"],"description":"","default":"'pictorialBar'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"legendHoverLink":{"type":["boolean"],"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n","default":true},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;cartesian2d&#39;</code></p>\n<p>  Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-pictorialBar.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-pictorialBar.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n","default":"'cartesian2d'"},"xAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#xAxis\">x axis</a> to combine with, which is  useful for multiple x axes in one chart.</p>\n","default":0},"yAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#yAxis\">y axis</a> to combine with, which is  useful for multiple y axes in one chart.</p>\n","default":0},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n","default":"'pointer'"},"label":{"type":["Object"],"description":"<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of , <code class=\"codespan\">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"barWidth":{"type":["number","string"],"description":"<p>The width of the bar. Adaptive when not specified.</p>\n<p>Can be an absolute value like <code class=\"codespan\">40</code> or a percent value like <code class=\"codespan\">&#39;60%&#39;</code>. The percent is based on the calculated category width.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code class=\"codespan\">&#39;bar&#39;</code> series. This attribute should be set on the last <code class=\"codespan\">&#39;bar&#39;</code> series in the coodinate system, then it will be adopted by all <code class=\"codespan\">&#39;bar&#39;</code> series in the coordinate system.</p>\n","default":null},"barMaxWidth":{"type":["number","string"],"description":"<p>The maximum width of the bar.</p>\n<p>Has higer priority than <a href=\"#series-bar.barWidth\">barWidth</a>.</p>\n<p>Can be an absolute value like <code class=\"codespan\">40</code> or a percent value like <code class=\"codespan\">&#39;60%&#39;</code>. The percent is based on the calculated category width.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code class=\"codespan\">&#39;bar&#39;</code> series. This attribute should be set on the last <code class=\"codespan\">&#39;bar&#39;</code> series in the coodinate system, then it will be adopted by all <code class=\"codespan\">&#39;bar&#39;</code> series in the coordinate system.</p>\n","default":null},"barMinWidth":{"type":["number","string"],"description":"<p>The minimum width of the bar. In cartesian the default value is <code class=\"codespan\">1</code>, otherwise the default value if <code class=\"codespan\">null</code>.</p>\n<p>Has higer priority than <a href=\"#series-bar.barWidth\">barWidth</a>.</p>\n<p>Can be an absolute value like <code class=\"codespan\">40</code> or a percent value like <code class=\"codespan\">&#39;60%&#39;</code>. The percent is based on the calculated category width.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code class=\"codespan\">&#39;bar&#39;</code> series. This attribute should be set on the last <code class=\"codespan\">&#39;bar&#39;</code> series in the coodinate system, then it will be adopted by all <code class=\"codespan\">&#39;bar&#39;</code> series in the coordinate system.</p>\n"},"barMinHeight":{"type":["number"],"description":"<p>The minimum width of bar. It could be used to avoid the following situation: the interaction would be affected when the value of some data item is too small.</p>\n","default":0},"barGap":{"type":["string"],"description":"<p>The gap between bars between different series, is a percent value like <code class=\"codespan\">&#39;30%&#39;</code>, which means <code class=\"codespan\">30%</code> of the bar width.</p>\n<p>Set barGap as <code class=\"codespan\">&#39;-100%&#39;</code> can overlap bars that belong to different series, which is useful when making a series of bar be background.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code class=\"codespan\">&#39;bar&#39;</code> series. This attribute should be set on the last <code class=\"codespan\">&#39;bar&#39;</code> series in the coodinate system, then it will be adopted by all <code class=\"codespan\">&#39;bar&#39;</code> series in the coordinate system.</p>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/barGrid-barGap&reset=1&edit=1\" width=\"600\" height=\"400\"><iframe />\n\n\n","default":"-100%"},"barCategoryGap":{"type":["string"],"description":"<p>The bar gap of a single series, defaults to be <code class=\"codespan\">20%</code> of the category gap, can be set as a fixed value.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code class=\"codespan\">&#39;bar&#39;</code> series. This attribute should be set on the last <code class=\"codespan\">&#39;bar&#39;</code> series in the coodinate system, then it will be adopted by all <code class=\"codespan\">&#39;bar&#39;</code> series in the coordinate system.</p>\n","default":"'20%'"},"symbol":{"type":["string"],"description":"<p>Specify the type of graphic elements.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>Example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-graphicType&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbol\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbol\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbol: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbol: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbol: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n","default":"'circle'"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size.</p>\n<p>It can be set as a array, which means [width, height]. For example, <code class=\"codespan\">[20, 10]</code> means width <code class=\"codespan\">20</code> and height <code class=\"codespan\">10</code>. It can also be set as a single number, like <code class=\"codespan\">10</code>, which is equivalent to <code class=\"codespan\">[10, 10]</code>.</p>\n<p>Absolute value can be used (like <code class=\"codespan\">10</code>), or percent value can be used (like <code class=\"codespan\">&#39;120%&#39;</code>, <code class=\"codespan\">[&#39;55%&#39;, 23]</code>).</p>\n<p>When percent value is used, final size of the graphic element is calculated based on its <a href=\"#series-pictorialBar\">reference bar</a>.</p>\n<p>For example, there is a reference bar based on x axis (that is, it is a vertical bar), and <a href=\"#series-pictorialBar.symbolSize\">symbolSize</a> is set as <code class=\"codespan\">[&#39;30%&#39;, &#39;50%&#39;]</code>, the final size of its graphic elements is:</p>\n<ul>\n<li>width: <code class=\"codespan\">&lt;width of reference bar&gt; * 30%</code>.</li>\n<li>height:<ul>\n<li>If <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used: <code class=\"codespan\">&lt;height of reference bar&gt; * 50%</code>.</li>\n<li>If <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is not used: <code class=\"codespan\">&lt;height of reference bar&gt; * 50%</code>.</li>\n</ul>\n</li>\n</ul>\n<p>Analogously, the case that based on y axis can be obtained by exchanging them.</p>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-symbolSize&reset=1&edit=1\" width=\"800\" height=\"600\"><iframe />\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolSize\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolSize\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolSize: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolSize: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolSize: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n","default":"['100%', '100%']"},"symbolPosition":{"type":["string"],"description":"<p>Specify the location of the graphic elements. Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code>: The edge of graphic element inscribes with the start of the reference bar.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code>: The edge of graphic element inscribes with the end of the reference bar.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: The graphic element is at the center of the reference bar.</li>\n</ul>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-position&reset=1&edit=1\" width=\"800\" height=\"600\"><iframe />\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolPosition\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolPosition\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolPosition: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolPosition: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolPosition: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n","default":"'start'"},"symbolOffset":{"type":["Array"],"description":"<p>Specify the offset of graphic element according to its original position. Adopting <code class=\"codespan\">symbolOffset</code> is the final step in layout, which enables adjustment of graphic element position.</p>\n<p>A absolute value can be set (like <code class=\"codespan\">10</code>), or a percent value can be set (like <code class=\"codespan\">&#39;120%&#39;</code>、<code class=\"codespan\">[&#39;55%&#39;, 23]</code>), which is based on its <a href=\"#series-pictorialBar.symbolSize\">symbolSize</a>.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;-50%&#39;]</code> means the graphic element will be adjusted upward half of the size of itself.</p>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-position&reset=1&edit=1\" width=\"800\" height=\"600\"><iframe />\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolOffset\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolOffset\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolOffset: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolOffset: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolOffset: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n","default":"[0, 0]"},"symbolRotate":{"type":["number"],"description":"<p>The degree of the rotation of a graphic element.</p>\n<p>Notice, <code class=\"codespan\">symbolRotate</code> will not affect the position of the graphic element, but just rotating by its center.</p>\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolRotate\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolRotate\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolRotate: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolRotate: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolRotate: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n"},"symbolRepeat":{"type":["boolean","number","string"],"description":"<p>Whether to repeat a graphic element. Optional values:</p>\n<ul>\n<li><code class=\"codespan\">false</code>/<code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code>: Do not repeat, that is, each graphic element represents a data item.</li>\n<li><code class=\"codespan\">true</code>: Repeat, that is, a group of repeated graphic elements represent a data item. The repeat times is calculated according to <a href=\"#series-pictorialBar.data\">data</a>.</li>\n<li>a number: Repeat, that is a group of repeated graphic elements represent a data item. The repeat times is always the given number.</li>\n<li><code class=\"codespan\">&#39;fixed&#39;</code>: Repeat, that is a group of repeated graphic elements represent a data item. The repeat times is calcuated according to <a href=\"#series-pictorialBar.symbolBoundingData\">symbolBoundingData</a>, that is, the repeat times has nothing to do with <a href=\"#series-pictorialBar.data\">data</a>. The setting is useful when graphic elements are used as background.</li>\n</ul>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeat&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolRepeat\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolRepeat\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolRepeat: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolRepeat: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolRepeat: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n"},"symbolRepeatDirection":{"type":["string"],"description":"<p>When <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used, <code class=\"codespan\">symbolRepeatDirection</code> specifies the render order of the repeated graphic elements. The setting is useful in these cases below:</p>\n<ul>\n<li><p>If <a href=\"#series-pictorialBar.symbolMargin\">symbolMargin</a> is set as a negative value, repeated elements will overlap with each other. <code class=\"codespan\">symbolRepeatDirection</code> can be used to specify the order of overlap.</p>\n</li>\n<li><p>If <a href=\"#series-pictorialBar.animationDelay\">animationDelay</a> or <a href=\"#series-pictorialBar.animationDelayUpdate\">animationDelayUpdate</a> is used, <code class=\"codespan\">symbolRepeatDirection</code> specifies the order of index.</p>\n</li>\n</ul>\n<p>Optional values can be <code class=\"codespan\">&#39;start&#39;</code> and <code class=\"codespan\">&#39;end&#39;</code>.</p>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeatDirection&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolRepeatDirection\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolRepeatDirection\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolRepeatDirection: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolRepeatDirection: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolRepeatDirection: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n","default":"'start'"},"symbolMargin":{"type":["number","string"],"description":"<p>Specify margin of both sides of a graphic element. (&quot;both sides&quot; means the two sides in the direction of its value axis). It works only when <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used.</p>\n<p>Absolute value can be used (like <code class=\"codespan\">20</code>), or percent value can be used (like <code class=\"codespan\">&#39;-30%&#39;</code>), which is based on its <a href=\"#series-pictorialBar.symbolSize\">symbolSize</a>.</p>\n<p><code class=\"codespan\">symbolMargin</code> can be positive value or negative value, which enables overlap of graphic elements when <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used.</p>\n<p>A <code class=\"codespan\">&quot;!&quot;</code> can be appended on the end of the value, like <code class=\"codespan\">&quot;30%!&quot;</code> or <code class=\"codespan\">25!</code>, which means a extra blank will be added on the both ends, otherwise the graphic elements on both ends will reach the boundary by default.</p>\n<p>Notice:</p>\n<ul>\n<li>When <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is <code class=\"codespan\">true</code>/<code class=\"codespan\">&#39;fixed&#39;</code>:\n  The given <code class=\"codespan\">symbolMargin</code> is just a reference value. The final gap of graphic elements will be calculated according to <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a>, <code class=\"codespan\">symbolMargin</code> and <a href=\"#series-pictorialBar.symbolBoundingData\">symbolBoundingData</a>.</li>\n<li>When <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is set as a number:\n  <code class=\"codespan\">symbolMargin</code> does not work any more.</li>\n</ul>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeatLayout&reset=1&edit=1\" width=\"800\" height=\"600\"><iframe />\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolMargin\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolMargin\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolMargin: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolMargin: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolMargin: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n"},"symbolClip":{"type":["boolean"],"description":"<p>Whether to clip graphic elements.</p>\n<ul>\n<li><code class=\"codespan\">false</code>/null/undefined: The whole graphic elements represent the size of value.</li>\n<li><code class=\"codespan\">true</code>: The clipped graphic elements reperent the size of value.</li>\n</ul>\n<p><code class=\"codespan\">symbolClip</code> is usually used in this case: both &quot;amount value&quot; and &quot;current value&quot; should be displayed. In this case, tow series can be used. One for background, using complete graphic elements, while another for current value, using clipped graphic elements.</p>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-clip&reset=1&edit=1\" width=\"800\" height=\"600\"><iframe />\n\n\n<p>Notice, in the example above,</p>\n<ul>\n<li>The same <a href=\"#series.pictorialBar.symbolBoundingData\">symbolBoundingData</a> is used in &quot;background series&quot; and &quot;current value seires&quot;, which makes their graphic elements are the same size.</li>\n<li>A bigger <a href=\"#series.pictorialBar.z\">z</a> is set on &quot;current value series&quot;, which makes it is over &quot;background series&quot;.</li>\n</ul>\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolClip\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolClip\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolClip: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolClip: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolClip: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n","default":false},"symbolBoundingData":{"type":["number"],"description":"<p>Defines a bounding area availble for the graphic elements. This setting gives a data, which will then be translated to a coordinate on the coordinate system. The coordinate specifies the bounding. Namely, if <code class=\"codespan\">symbolBoundingData</code> is set, the final size (or layout) of the graphic elements depend on the <code class=\"codespan\">symbolBoundingData</code>.</p>\n<p>When reference bar is horizontal, <code class=\"codespan\">symbolBoundingData</code> is coresponding to x axis, while reference bar is vertical, <code class=\"codespan\">symbolBoundingData</code> is coresponding to y axis.</p>\n<p>Rule:</p>\n<ul>\n<li><p>If <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is not used:</p>\n<p>  <code class=\"codespan\">symbolBoundingData</code> is the same as the size of reference bar by default. The size of the graphic element is detemined by <code class=\"codespan\">symbolBoundingData</code>. For example, if reference bar is vertical, its data is <code class=\"codespan\">24</code>, <code class=\"codespan\">symbolSize</code> is set as <code class=\"codespan\">[30, &#39;50%&#39;]</code>, <code class=\"codespan\">symbolBoundingData</code> is set as <code class=\"codespan\">124</code>, the final size of the graphic element will be <code class=\"codespan\">124 * 50% = 62</code>. If <code class=\"codespan\">symbolBoundingData</code> is not set, the final size will be <code class=\"codespan\">24 * 50% = 12</code>.</p>\n</li>\n<li><p>If <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used:</p>\n<p>  <code class=\"codespan\">symbolBoundingData</code> is the extreme value of the coordinate system. <code class=\"codespan\">symbolBoundingData</code> defines a bounding area, where repeated graphic elements layout according to <a href=\"#series-pictorialBar.symbolMargin\">symbolMargin</a> and <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> and <a href=\"#series-pictorialBar.symbolSize\">symbolSize</a>. Both these settings determine the gap size of the repeated graphic elements.</p>\n</li>\n</ul>\n<p><code class=\"codespan\">symbolBoundingData</code> is usually used in these cases:</p>\n<ul>\n<li><p>When <a href=\"#series-pictorialBar.symbolClip\">symbolCilp</a> is used:</p>\n<p>  And a series is used to display &quot;amont value&quot;, while another series is used to display &quot;current value&quot;. <code class=\"codespan\">symbolBoundingData</code> can be used to ensure that the graphic elements of these two series are at the same size.</p>\n</li>\n</ul>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-clip&reset=1&edit=1\" width=\"800\" height=\"600\"><iframe />\n\n\n<ul>\n<li><p>When <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used:</p>\n<p>  <code class=\"codespan\">symbolBoundingData</code> can be use to ensure the gaps of the elements in different bars are the same. Of cource, you can do not set <code class=\"codespan\">symbolBoundingData</code>, whose default value is a stable value (extreme value of the coordinate system).</p>\n</li>\n</ul>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeatLayout&reset=1&edit=1\" width=\"800\" height=\"600\"><iframe />\n\n\n<p><br>\n<code class=\"codespan\">symbolBoundingData</code> can also be an array, such as <code class=\"codespan\">[-40, 60]</code>, which specifies both negative and positive symbolBoundingData.</p>\n<p>Check this example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-symbolBoundingDataArray&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolBoundingData\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolBoundingData\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolBoundingData: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolBoundingData: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolBoundingData: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n"},"symbolPatternSize":{"type":["number"],"description":"<p>Image can be used as the pattern of graphic elements.</p>\n<pre><code class=\"lang-js\">var textureImg = new Image();\ntextureImg.src = &#39;data:image/jpeg;base64,...&#39;; // dataURI\n// Or\n// textureImg.src = &#39;http://xxx.xxx.xxx/xx.png&#39;; // URL\n...\nitemStyle: {\n    color: {\n        image: textureImg,\n        repeat: &#39;repeat&#39;\n    }\n}\n</code></pre>\n<p><code class=\"codespan\">symbolPatternSize</code> specifies the size of pattern image. For example, if <code class=\"codespan\">symbolPatternSize</code> is <code class=\"codespan\">400</code>, the pattern image will be displayed at the size of <code class=\"codespan\">400px * 400px</code>.</p>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-patternSize&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolPatternSize\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolPatternSize\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolPatternSize: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolPatternSize: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolPatternSize: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n","default":400},"hoverAnimation":{"type":["boolean"],"description":"<p>Whether to enable hover animation.</p>\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.hoverAnimation\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.hoverAnimation\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    hoverAnimation: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        hoverAnimation: ... // Only affect this data item.\n    }, {\n        value: 56\n        hoverAnimation: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n","default":false,"properties":{"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Specify the delay time before animation start. Callback function can be used, where different delay time can be used on different element.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (dataIndex, params) {\n    return params.index * 30;\n}\n// Or inverse:\nanimationDelay: function (dataIndex, params) {\n    return (params.count - 1 - params.index) * 30;\n}\n</code></pre>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeatDirection&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n","default":0},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Specify the delay time before update animation. Callback function can be used, where different delay time can be used on different element.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (dataIndex, params) {\n    return params.index * 30;\n}\n// Or inverse:\nanimationDelay: function (dataIndex, params) {\n    return (params.count - 1 - params.index) * 30;\n}\n</code></pre>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeatDirection&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","default":0}}},"dimensions":{"type":["Array"],"description":"<p><code class=\"codespan\">dimensions</code> can be used to define dimension info for <code class=\"codespan\">series.data</code> or <code class=\"codespan\">dataset.source</code>.</p>\n<p>Notice: if <a href=\"#dataset\">dataset</a> is used, we can provide dimension names in the first column/row of <a href=\"#dataset.source\">dataset.source</a>, and not need to specify <code class=\"codespan\">dimensions</code> here. But if <code class=\"codespan\">dimensions</code> is specified here, echarts will not retrieve dimension names from the first row/column of <code class=\"codespan\">dataset.source</code> any more.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\n    ]\n}\n</code></pre>\n<p>Each data item of <code class=\"codespan\">dimensions</code> can be:</p>\n<ul>\n<li><code class=\"codespan\">string</code>, for example, <code class=\"codespan\">&#39;someName&#39;</code>, which equals to <code class=\"codespan\">{name: &#39;someName&#39;}</code>.</li>\n<li><code class=\"codespan\">Object</code>, where the attributes can be:<ul>\n<li>name: <code class=\"codespan\">string</code>.</li>\n<li>type: <code class=\"codespan\">string</code>, supports:<ul>\n<li><code class=\"codespan\">number</code></li>\n<li><code class=\"codespan\">float</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array\" target=\"_blank\">Float64Array</a></li>\n<li><code class=\"codespan\">int</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array\" target=\"_blank\">Int32Array</a></li>\n<li><code class=\"codespan\">ordinal</code>, discrete value, which represents string generally.</li>\n<li><code class=\"codespan\">time</code>, time value, see <a href=\"#series.data\">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code class=\"codespan\">string</code>, generally used in tooltip for dimension display. If not specified, use <code class=\"codespan\">name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code class=\"codespan\">dimensions</code> is specified, the default <code class=\"codespan\">tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code class=\"codespan\">tooltip</code> will displayed only value horizontally.</p>\n"},"encode":{"type":["Object"],"description":"<p>Define what is encoded to for each dimension of <code class=\"codespan\">data</code>. For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n</code></pre>\n<p>When <a href=\"#series.dimensions\">dimensions</a> is used to defined name for a certain dimension, <code class=\"codespan\">encode</code> can refer the name directly. For example:</p>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<p>The basic structure of <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code> or some special reserved names like &quot;tooltip&quot;, &quot;itemName&quot; etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code class=\"codespan\">encode</code> listed as follows:</p>\n<pre><code class=\"lang-js\">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension &quot;product&quot; and &quot;score&quot; in the tooltip.\n    tooltip: [&#39;product&#39;, &#39;score&#39;]\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // &#39;pie&#39;, &#39;funnel&#39;, where data item name can be displayed in legend.\n    itemName: 3\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension &quot;score&quot; to the X axis.\n    x: [1, 5, &#39;score&#39;],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like &#39;pie&#39;, &#39;funnel&#39; etc.:\nencode: {\n    value: 3\n}\n</code></pre>\n<p>This is an <a href=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a> for <code class=\"codespan\">encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code class=\"codespan\">encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href=\"#dataZoom\">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class=\"lang-js\">var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            return {\n                type: &#39;circle&#39;,\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: &#39;blue&#39;\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n</code></pre>\n"},"data":{"type":["Array"],"description":"<p>Data array of series, which can be in the following forms:</p>\n<p>Notice, if no <code class=\"codespan\">data</code> specified in series, and there is <a href=\"#dataset\">dataset</a> in option, series will use the first <a href=\"#dataset\">dataset</a> as its datasource. If <code class=\"codespan\">data</code> has been specified, <a href=\"#dataset\">dataset</a> will not used.</p>\n<p><code class=\"codespan\">series.datasetIndex</code> can be used to specify other <a href=\"#dataset\">dataset</a>.</p>\n<p>Basically, data is represented by a two-dimension array, like the example below, where each column is named as a &quot;dimension&quot;.</p>\n<pre><code class=\"lang-js\">series: [{\n    data: [\n        // dimX   dimY   other dimensions ...\n        [  3.4,    4.5,   15,   43],\n        [  4.2,    2.3,   20,   91],\n        [  10.8,   9.5,   30,   18],\n        [  7.2,    8.8,   18,   57]\n    ]\n}]\n</code></pre>\n<ul>\n<li>In <a href=\"#grid\">cartesian (grid)</a>, &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href=\"#xAxis\">xAxis</a> and <a href=\"#yAxis\">yAxis</a> respectively.</li>\n<li>In <a href=\"#polar\">polar</a> &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href=\"#radiusAxis\">radiusAxis</a> 和 <a href=\"#anbleAxis\">angleAxis</a> respectively.</li>\n<li>Other dimensions are optional, which can be used in other places. For example:<ul>\n<li><a href=\"#visualMap\">visualMap</a> can map one or more dimensions to visual (color, symbol size ...).</li>\n<li><a href=\"#series.symbolSize\">series.symbolSize</a> can be set as a callback function, where symbol size can be calculated by values of a certain dimension.</li>\n<li>Values in other dimensions can be shown by <a href=\"#tooltip.formatter\">tooltip.formatter</a> or <a href=\"#series.label.formatter\">series.label.formatter</a>.</li>\n</ul>\n</li>\n</ul>\n<p>Especially, when there is one and only one category axis (axis.type is <code class=\"codespan\">&#39;category&#39;</code>), data can be simply be represented by a one-dimension array, like:</p>\n<pre><code class=\"lang-js\">xAxis: {\n    data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;]\n},\nseries: [{\n    // Each item corresponds to each item in xAxis.data.\n    data: [23,  44,  55,  19]\n    // In fact, it is the simplification of the format below:\n    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n</code></pre>\n<p><br>\n<strong>Relationship between &quot;value&quot; and <a href=\"#xAxis.type\">axis.type</a></strong></p>\n<ul>\n<li><p>When a dimension corresponds to a value axis (axis.type is <code class=\"codespan\">&#39;value&#39;</code> or <code class=\"codespan\">&#39;log&#39;</code>):</p>\n<p>  The value can be a <code class=\"codespan\">number</code> (like <code class=\"codespan\">12</code>) (can also be a number in a <code class=\"codespan\">string</code> format, like <code class=\"codespan\">&#39;12&#39;</code>).</p>\n</li>\n<li><p>When a dimension corresponds to a category axis (axis.type is <code class=\"codespan\">&#39;category&#39;</code>):</p>\n<p>  The value should be the ordinal of the axis.data (based on <code class=\"codespan\">0</code>), the string value of the axis.data. For example:</p>\n<pre><code class=\"lang-js\">  xAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;]\n  },\n  yAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;, &#39;p&#39;, &#39;q&#39;]\n  },\n  series: [{\n      data: [\n          // xAxis      yAxis\n          [  0,           0,    2  ], // This point is located at xAxis: &#39;Monday&#39;, yAxis: &#39;a&#39;.\n          [  &#39;Thursday&#39;,  2,    1  ], // This point is located at xAxis: &#39;Thursday&#39;, yAxis: &#39;m&#39;.\n          [  2,          &#39;p&#39;,   2  ], // This point is located at xAxis: &#39;Wednesday&#39;, yAxis: &#39;p&#39;.\n          [  3,           3,    5  ]\n      ]\n  }]\n</code></pre>\n<p>  There is an example of double category axes: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-punchCard\" target=\"_blank\">Github Punchcard</a>.</p>\n</li>\n<li><p>When a dimension corresponds to a time axis (type is <code class=\"codespan\">&#39;time&#39;</code>), the value can be:</p>\n<ul>\n<li>a timestamp, like <code class=\"codespan\">1484141700832</code>, which represents a UTC time.</li>\n<li>a date string, in one of the formats below:<ul>\n<li>a subset of <a href=\"http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15\" target=\"_blank\">ISO 8601</a>, only including (all of these are treated as local time unless timezone is specified, which is consistent with <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>):<ul>\n<li>only part of year/month/date/time are specified: <code class=\"codespan\">&#39;2012-03&#39;</code>, <code class=\"codespan\">&#39;2012-03-01&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 05&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 05:06&#39;</code>.</li>\n<li>separated by <code class=\"codespan\">&quot;T&quot;</code> or a space: <code class=\"codespan\">&#39;2012-03-01T12:22:33.123&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 12:22:33.123&#39;</code>.</li>\n<li>timezone specified: <code class=\"codespan\">&#39;2012-03-01T12:22:33Z&#39;</code>, <code class=\"codespan\">&#39;2012-03-01T12:22:33+8000&#39;</code>, <code class=\"codespan\">&#39;2012-03-01T12:22:33-05:00&#39;</code>.</li>\n</ul>\n</li>\n<li>other date string format (all of these are treated as local time):\n<code class=\"codespan\">&#39;2012&#39;</code>, <code class=\"codespan\">&#39;2012-3-1&#39;</code>, <code class=\"codespan\">&#39;2012/3/1&#39;</code>, <code class=\"codespan\">&#39;2012/03/01&#39;</code>,\n<code class=\"codespan\">&#39;2009/6/12 2:00&#39;</code>, <code class=\"codespan\">&#39;2009/6/12 2:05:08&#39;</code>, <code class=\"codespan\">&#39;2009/6/12 2:05:08.123&#39;</code>.</li>\n</ul>\n</li>\n<li>a JavaScript Date instance created by user:<ul>\n<li>Caution, when using a data string to create a Date instance, <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">browser differences and inconsistencies</a> should be considered.</li>\n<li>For example: In chrome, <code class=\"codespan\">new Date(&#39;2012-01-01&#39;)</code> is treated as a Jan 1st 2012 in UTC, while <code class=\"codespan\">new Date(&#39;2012-1-1&#39;)</code> and <code class=\"codespan\">new Date(&#39;2012/01/01&#39;)</code> are treated as Jan 1st 2012 in local timezone. In safari <code class=\"codespan\">new Date(&#39;2012-1-1&#39;)</code> is not supported.</li>\n<li>So if you intent to perform <code class=\"codespan\">new Date(dateString)</code>, it is strongly recommended to use a time parse library (e.g., <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>), or use <code class=\"codespan\">echarts.number.parseDate</code>, or check <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">this</a>.</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<strong>Customize a data item:</strong></p>\n<p>When needing to customize a data item, it can be set as an object, where property <code class=\"codespan\">value</code> reprensent real value. For example:</p>\n<pre><code class=\"lang-js\">[\n    12,\n    24,\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    33\n]\n// Or\n[\n    [12, 332],\n    [24, 32],\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    [33, 31]\n]\n</code></pre>\n<p><br>\n<strong>Empty value:</strong></p>\n<p><code class=\"codespan\">&#39;-&#39;</code> or <code class=\"codespan\">null</code> or <code class=\"codespan\">undefined</code> or <code class=\"codespan\">NaN</code> can be used to describe that a data item does not exist (ps:<em>not exist</em> does not means its value is <code class=\"codespan\">0</code>).</p>\n<p>For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.</p>\n<p><br><br></p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>The name of data item.</p>\n"},"value":{"type":["number"],"description":"<p>The value of a single data item.</p>\n"},"symbol":{"type":["string"],"description":"<p>Specify the type of graphic elements.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>Example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-graphicType&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbol\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbol\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbol: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbol: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbol: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n","default":"'circle'"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size.</p>\n<p>It can be set as a array, which means [width, height]. For example, <code class=\"codespan\">[20, 10]</code> means width <code class=\"codespan\">20</code> and height <code class=\"codespan\">10</code>. It can also be set as a single number, like <code class=\"codespan\">10</code>, which is equivalent to <code class=\"codespan\">[10, 10]</code>.</p>\n<p>Absolute value can be used (like <code class=\"codespan\">10</code>), or percent value can be used (like <code class=\"codespan\">&#39;120%&#39;</code>, <code class=\"codespan\">[&#39;55%&#39;, 23]</code>).</p>\n<p>When percent value is used, final size of the graphic element is calculated based on its <a href=\"#series-pictorialBar\">reference bar</a>.</p>\n<p>For example, there is a reference bar based on x axis (that is, it is a vertical bar), and <a href=\"#series-pictorialBar.symbolSize\">symbolSize</a> is set as <code class=\"codespan\">[&#39;30%&#39;, &#39;50%&#39;]</code>, the final size of its graphic elements is:</p>\n<ul>\n<li>width: <code class=\"codespan\">&lt;width of reference bar&gt; * 30%</code>.</li>\n<li>height:<ul>\n<li>If <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used: <code class=\"codespan\">&lt;height of reference bar&gt; * 50%</code>.</li>\n<li>If <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is not used: <code class=\"codespan\">&lt;height of reference bar&gt; * 50%</code>.</li>\n</ul>\n</li>\n</ul>\n<p>Analogously, the case that based on y axis can be obtained by exchanging them.</p>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-symbolSize&reset=1&edit=1\" width=\"800\" height=\"600\"><iframe />\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolSize\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolSize\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolSize: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolSize: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolSize: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n","default":"['100%', '100%']"},"symbolPosition":{"type":["string"],"description":"<p>Specify the location of the graphic elements. Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code>: The edge of graphic element inscribes with the start of the reference bar.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code>: The edge of graphic element inscribes with the end of the reference bar.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: The graphic element is at the center of the reference bar.</li>\n</ul>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-position&reset=1&edit=1\" width=\"800\" height=\"600\"><iframe />\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolPosition\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolPosition\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolPosition: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolPosition: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolPosition: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n","default":"'start'"},"symbolOffset":{"type":["Array"],"description":"<p>Specify the offset of graphic element according to its original position. Adopting <code class=\"codespan\">symbolOffset</code> is the final step in layout, which enables adjustment of graphic element position.</p>\n<p>A absolute value can be set (like <code class=\"codespan\">10</code>), or a percent value can be set (like <code class=\"codespan\">&#39;120%&#39;</code>、<code class=\"codespan\">[&#39;55%&#39;, 23]</code>), which is based on its <a href=\"#series-pictorialBar.symbolSize\">symbolSize</a>.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;-50%&#39;]</code> means the graphic element will be adjusted upward half of the size of itself.</p>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-position&reset=1&edit=1\" width=\"800\" height=\"600\"><iframe />\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolOffset\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolOffset\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolOffset: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolOffset: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolOffset: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n","default":"[0, 0]"},"symbolRotate":{"type":["number"],"description":"<p>The degree of the rotation of a graphic element.</p>\n<p>Notice, <code class=\"codespan\">symbolRotate</code> will not affect the position of the graphic element, but just rotating by its center.</p>\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolRotate\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolRotate\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolRotate: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolRotate: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolRotate: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n"},"symbolRepeat":{"type":["boolean","number","string"],"description":"<p>Whether to repeat a graphic element. Optional values:</p>\n<ul>\n<li><code class=\"codespan\">false</code>/<code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code>: Do not repeat, that is, each graphic element represents a data item.</li>\n<li><code class=\"codespan\">true</code>: Repeat, that is, a group of repeated graphic elements represent a data item. The repeat times is calculated according to <a href=\"#series-pictorialBar.data\">data</a>.</li>\n<li>a number: Repeat, that is a group of repeated graphic elements represent a data item. The repeat times is always the given number.</li>\n<li><code class=\"codespan\">&#39;fixed&#39;</code>: Repeat, that is a group of repeated graphic elements represent a data item. The repeat times is calcuated according to <a href=\"#series-pictorialBar.symbolBoundingData\">symbolBoundingData</a>, that is, the repeat times has nothing to do with <a href=\"#series-pictorialBar.data\">data</a>. The setting is useful when graphic elements are used as background.</li>\n</ul>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeat&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolRepeat\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolRepeat\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolRepeat: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolRepeat: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolRepeat: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n"},"symbolRepeatDirection":{"type":["string"],"description":"<p>When <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used, <code class=\"codespan\">symbolRepeatDirection</code> specifies the render order of the repeated graphic elements. The setting is useful in these cases below:</p>\n<ul>\n<li><p>If <a href=\"#series-pictorialBar.symbolMargin\">symbolMargin</a> is set as a negative value, repeated elements will overlap with each other. <code class=\"codespan\">symbolRepeatDirection</code> can be used to specify the order of overlap.</p>\n</li>\n<li><p>If <a href=\"#series-pictorialBar.animationDelay\">animationDelay</a> or <a href=\"#series-pictorialBar.animationDelayUpdate\">animationDelayUpdate</a> is used, <code class=\"codespan\">symbolRepeatDirection</code> specifies the order of index.</p>\n</li>\n</ul>\n<p>Optional values can be <code class=\"codespan\">&#39;start&#39;</code> and <code class=\"codespan\">&#39;end&#39;</code>.</p>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeatDirection&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolRepeatDirection\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolRepeatDirection\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolRepeatDirection: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolRepeatDirection: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolRepeatDirection: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n","default":"'start'"},"symbolMargin":{"type":["number","string"],"description":"<p>Specify margin of both sides of a graphic element. (&quot;both sides&quot; means the two sides in the direction of its value axis). It works only when <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used.</p>\n<p>Absolute value can be used (like <code class=\"codespan\">20</code>), or percent value can be used (like <code class=\"codespan\">&#39;-30%&#39;</code>), which is based on its <a href=\"#series-pictorialBar.symbolSize\">symbolSize</a>.</p>\n<p><code class=\"codespan\">symbolMargin</code> can be positive value or negative value, which enables overlap of graphic elements when <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used.</p>\n<p>A <code class=\"codespan\">&quot;!&quot;</code> can be appended on the end of the value, like <code class=\"codespan\">&quot;30%!&quot;</code> or <code class=\"codespan\">25!</code>, which means a extra blank will be added on the both ends, otherwise the graphic elements on both ends will reach the boundary by default.</p>\n<p>Notice:</p>\n<ul>\n<li>When <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is <code class=\"codespan\">true</code>/<code class=\"codespan\">&#39;fixed&#39;</code>:\n  The given <code class=\"codespan\">symbolMargin</code> is just a reference value. The final gap of graphic elements will be calculated according to <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a>, <code class=\"codespan\">symbolMargin</code> and <a href=\"#series-pictorialBar.symbolBoundingData\">symbolBoundingData</a>.</li>\n<li>When <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is set as a number:\n  <code class=\"codespan\">symbolMargin</code> does not work any more.</li>\n</ul>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeatLayout&reset=1&edit=1\" width=\"800\" height=\"600\"><iframe />\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolMargin\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolMargin\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolMargin: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolMargin: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolMargin: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n"},"symbolClip":{"type":["boolean"],"description":"<p>Whether to clip graphic elements.</p>\n<ul>\n<li><code class=\"codespan\">false</code>/null/undefined: The whole graphic elements represent the size of value.</li>\n<li><code class=\"codespan\">true</code>: The clipped graphic elements reperent the size of value.</li>\n</ul>\n<p><code class=\"codespan\">symbolClip</code> is usually used in this case: both &quot;amount value&quot; and &quot;current value&quot; should be displayed. In this case, tow series can be used. One for background, using complete graphic elements, while another for current value, using clipped graphic elements.</p>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-clip&reset=1&edit=1\" width=\"800\" height=\"600\"><iframe />\n\n\n<p>Notice, in the example above,</p>\n<ul>\n<li>The same <a href=\"#series.pictorialBar.symbolBoundingData\">symbolBoundingData</a> is used in &quot;background series&quot; and &quot;current value seires&quot;, which makes their graphic elements are the same size.</li>\n<li>A bigger <a href=\"#series.pictorialBar.z\">z</a> is set on &quot;current value series&quot;, which makes it is over &quot;background series&quot;.</li>\n</ul>\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolClip\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolClip\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolClip: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolClip: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolClip: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n","default":false},"symbolBoundingData":{"type":["number"],"description":"<p>Defines a bounding area availble for the graphic elements. This setting gives a data, which will then be translated to a coordinate on the coordinate system. The coordinate specifies the bounding. Namely, if <code class=\"codespan\">symbolBoundingData</code> is set, the final size (or layout) of the graphic elements depend on the <code class=\"codespan\">symbolBoundingData</code>.</p>\n<p>When reference bar is horizontal, <code class=\"codespan\">symbolBoundingData</code> is coresponding to x axis, while reference bar is vertical, <code class=\"codespan\">symbolBoundingData</code> is coresponding to y axis.</p>\n<p>Rule:</p>\n<ul>\n<li><p>If <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is not used:</p>\n<p>  <code class=\"codespan\">symbolBoundingData</code> is the same as the size of reference bar by default. The size of the graphic element is detemined by <code class=\"codespan\">symbolBoundingData</code>. For example, if reference bar is vertical, its data is <code class=\"codespan\">24</code>, <code class=\"codespan\">symbolSize</code> is set as <code class=\"codespan\">[30, &#39;50%&#39;]</code>, <code class=\"codespan\">symbolBoundingData</code> is set as <code class=\"codespan\">124</code>, the final size of the graphic element will be <code class=\"codespan\">124 * 50% = 62</code>. If <code class=\"codespan\">symbolBoundingData</code> is not set, the final size will be <code class=\"codespan\">24 * 50% = 12</code>.</p>\n</li>\n<li><p>If <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used:</p>\n<p>  <code class=\"codespan\">symbolBoundingData</code> is the extreme value of the coordinate system. <code class=\"codespan\">symbolBoundingData</code> defines a bounding area, where repeated graphic elements layout according to <a href=\"#series-pictorialBar.symbolMargin\">symbolMargin</a> and <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> and <a href=\"#series-pictorialBar.symbolSize\">symbolSize</a>. Both these settings determine the gap size of the repeated graphic elements.</p>\n</li>\n</ul>\n<p><code class=\"codespan\">symbolBoundingData</code> is usually used in these cases:</p>\n<ul>\n<li><p>When <a href=\"#series-pictorialBar.symbolClip\">symbolCilp</a> is used:</p>\n<p>  And a series is used to display &quot;amont value&quot;, while another series is used to display &quot;current value&quot;. <code class=\"codespan\">symbolBoundingData</code> can be used to ensure that the graphic elements of these two series are at the same size.</p>\n</li>\n</ul>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-clip&reset=1&edit=1\" width=\"800\" height=\"600\"><iframe />\n\n\n<ul>\n<li><p>When <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used:</p>\n<p>  <code class=\"codespan\">symbolBoundingData</code> can be use to ensure the gaps of the elements in different bars are the same. Of cource, you can do not set <code class=\"codespan\">symbolBoundingData</code>, whose default value is a stable value (extreme value of the coordinate system).</p>\n</li>\n</ul>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeatLayout&reset=1&edit=1\" width=\"800\" height=\"600\"><iframe />\n\n\n<p><br>\n<code class=\"codespan\">symbolBoundingData</code> can also be an array, such as <code class=\"codespan\">[-40, 60]</code>, which specifies both negative and positive symbolBoundingData.</p>\n<p>Check this example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-symbolBoundingDataArray&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolBoundingData\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolBoundingData\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolBoundingData: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolBoundingData: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolBoundingData: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n"},"symbolPatternSize":{"type":["number"],"description":"<p>Image can be used as the pattern of graphic elements.</p>\n<pre><code class=\"lang-js\">var textureImg = new Image();\ntextureImg.src = &#39;data:image/jpeg;base64,...&#39;; // dataURI\n// Or\n// textureImg.src = &#39;http://xxx.xxx.xxx/xx.png&#39;; // URL\n...\nitemStyle: {\n    color: {\n        image: textureImg,\n        repeat: &#39;repeat&#39;\n    }\n}\n</code></pre>\n<p><code class=\"codespan\">symbolPatternSize</code> specifies the size of pattern image. For example, if <code class=\"codespan\">symbolPatternSize</code> is <code class=\"codespan\">400</code>, the pattern image will be displayed at the size of <code class=\"codespan\">400px * 400px</code>.</p>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-patternSize&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolPatternSize\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolPatternSize\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolPatternSize: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolPatternSize: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolPatternSize: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n","default":400},"z":{"type":["number"],"description":"<p>Specify the relationship of overlap between graphic elements. A bigger value means higher.</p>\n"},"hoverAnimation":{"type":["boolean"],"description":"<p>Whether to enable hover animation.</p>\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.hoverAnimation\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.hoverAnimation\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    hoverAnimation: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        hoverAnimation: ... // Only affect this data item.\n    }, {\n        value: 56\n        hoverAnimation: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n","default":false},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Specify the delay time before animation start. Callback function can be used, where different delay time can be used on different element.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (dataIndex, params) {\n    return params.index * 30;\n}\n// Or inverse:\nanimationDelay: function (dataIndex, params) {\n    return (params.count - 1 - params.index) * 30;\n}\n</code></pre>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeatDirection&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n","default":0},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Specify the delay time before update animation. Callback function can be used, where different delay time can be used on different element.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (dataIndex, params) {\n    return params.index * 30;\n}\n// Or inverse:\nanimationDelay: function (dataIndex, params) {\n    return (params.count - 1 - params.index) * 30;\n}\n</code></pre>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeatDirection&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","default":0},"label":{"type":["Object"],"description":"<p>The style setting of the text label in a single bar.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"inside"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-pictorialBar.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-pictorialBar.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-pictorialBar.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-pictorialBar.markPoint.data.x\">x</a>, <a href=\"#series-pictorialBar.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-pictorialBar.markPoint.data.coord\">coord</a> attribute, in which <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-pictorialBar.markPoint.data.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-pictorialBar.markPoint.data.valueIndex\">valueIndex</a> or <a href=\"#series-pictorialBar.markPoint.data.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n    {\n        name: &#39;maximum&#39;,\n        type: &#39;max&#39;\n    }, \n    {\n        name: &#39;coordinate&#39;,\n        coord: [10, 20]\n    }, {\n        name: &#39;fixed x position&#39;,\n        yAxis: 10,\n        x: &#39;90%&#39;\n    }, \n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Available when using <a href=\"#series-pictorialBar.markPoint.data.type\">type</a> it is used to assign maximum value and minimum value in dimensions, it could be <code class=\"codespan\">0</code> (xAxis, radiusAxis), <code class=\"codespan\">1</code> (yAxis, angleAxis), and use the first value axis dimension by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-pictorialBar.markPoint.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["Object"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-pictorialBar.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class=\"codespan\">symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-pictorialBar.markLine.data.0.x\">x</a>, <a href=\"#series-pictorialBar.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-pictorialBar.markLine.data.0.coord\">coord</a> attribute, in which <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-pictorialBar.markLine.data.0.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-pictorialBar.markLine.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-pictorialBar.markLine.data.0.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n<li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code class=\"codespan\">xAxis</code> or <code class=\"codespan\">yAxis</code>. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a> for example.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p>You may also set the type of mark line through <code class=\"codespan\">type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code class=\"codespan\">valueIndex</code>.</p>\n<pre><code>data: [\n    {\n        name: &#39;average line&#39;,\n        // &#39;average&#39;, &#39;min&#39;, and &#39;max&#39; are supported\n        type: &#39;average&#39;\n    },\n    {\n        name: &#39;Horizontal line with Y value at 100&#39;,\n        yAxis: 100\n    },\n    [\n        {\n            // Use the same name with starting and ending point\n            name: &#39;Minimum to Maximum&#39;,\n            type: &#39;min&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n    [\n        {\n            name: &#39;Markline between two points&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [{\n        // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n        yAxis: &#39;max&#39;,\n        x: &#39;90%&#39;\n    }, {\n        type: &#39;max&#39;\n    }],\n    [\n        {\n            name: &#39;Mark line between two points&#39;,\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n<li><code class=\"codespan\">&#39;median&#39;</code> median value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-pictorialBar.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-pictorialBar.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'starting point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n<li><code class=\"codespan\">&#39;median&#39;</code> median value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-pictorialBar.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-pictorialBar.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'ending point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code class=\"codespan\">data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li><p>Specify the coordinate in screen coordinate system using <a href=\"#series-pictorialBar.markArea.data.0.x\">x</a>, <a href=\"#series-pictorialBar.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code class=\"codespan\">5</code>), or percent (e.g., the value is <code class=\"codespan\">&#39;35%&#39;</code>).</p>\n</li>\n<li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using\n<a href=\"#series-pictorialBar.markArea.data.0.coord\">coord</a>, which can be also set as <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> (e.g, <code class=\"codespan\">coord: [23, &#39;min&#39;]</code>, or <code class=\"codespan\">coord: [&#39;average&#39;, &#39;max&#39;]</code>).</p>\n</li>\n</ol>\n<ol start=\"3\">\n<li>Locate the point on the min value or max value of <code class=\"codespan\">series.data</code> using <a href=\"#series-pictorialBar.markArea.data.0.type\">type</a>, where <a href=\"#series-pictorialBar.markArea.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-pictorialBar.markPoint.data.0.valueDim\">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</li>\n<li>If in cartesian, you can only specify <code class=\"codespan\">xAxis</code> or <code class=\"codespan\">yAxis</code> to define a mark area based on only X or Y axis, see sample <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a></li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n\n    [\n        {\n            name: &#39;From average to max&#39;,\n            type: &#39;average&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n\n    [\n        {\n            name: &#39;Mark area between two points in data coordiantes&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [\n        {\n            name: &#39;From 60 to 80&#39;,\n            yAxis: 60\n        },\n        {\n            yAxis: 80\n        }\n    ], [\n        {\n            name: &#39;Mark area covers all data&#39;\n            coord: [&#39;min&#39;, &#39;min&#39;]\n        },\n        {\n            coord: [&#39;max&#39;, &#39;max&#39;]\n        }\n    ],\n    [\n        {\n            name: &#39;Mark area in two screen points&#39;,\n            x: 100,\n            y: 100\n        }, {\n            x: &#39;90%&#39;,\n            y: &#39;10%&#39;\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> max value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> min value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-pictorialBar.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-pictorialBar.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'start'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> max value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> min value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-pictorialBar.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-pictorialBar.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'end'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in pictorial bar chart.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in pictorial bar chart, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut","properties":{"animationDelay":{"type":["number","Function"],"description":"<p>Specify the delay time before animation start. Callback function can be used, where different delay time can be used on different element.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (dataIndex, params) {\n    return params.index * 30;\n}\n// Or inverse:\nanimationDelay: function (dataIndex, params) {\n    return (params.count - 1 - params.index) * 30;\n}\n</code></pre>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeatDirection&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n","default":0},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Specify the delay time before update animation. Callback function can be used, where different delay time can be used on different element.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (dataIndex, params) {\n    return params.index * 30;\n}\n// Or inverse:\nanimationDelay: function (dataIndex, params) {\n    return (params.count - 1 - params.index) * 30;\n}\n</code></pre>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeatDirection&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n\n\n\n\n\n\n\n\n","default":0}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong> Theme river </strong></p>\n<p>It is a special flow graph which is mainly used to present the changes of an event or theme during a period.</p>\n<p><strong>Sample: </strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=themeRiver-lastfm&edit=1&reset=1\" width=\"700\" height=\"580\"><iframe />\n\n\n\n<p><br>\n<strong>visual encoding: </strong></p>\n<p>The ribbon-shape river branches in different colors in theme river encode variable events or themes. The width of river branches encode the value of the original dataset.</p>\n<p>What&#39;s more, the time attribute of the orinigal dataset would map to a single time axis.</p>\n","properties":{"type":{"type":["string"],"description":"","default":"'themeRiver'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between thmemRiver component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"5%"},"top":{"type":["string","number"],"description":"<p>Distance between thmemRiver component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"5%"},"right":{"type":["string","number"],"description":"<p>Distance between thmemRiver component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n","default":"5%"},"bottom":{"type":["string","number"],"description":"<p>Distance between thmemRiver component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n","default":"5%"},"width":{"type":["string","number"],"description":"<p>Width of thmemRiver component. </p>\n","default":null},"height":{"type":["string","number"],"description":"<p>Height of thmemRiver component. </p>\n<p><strong> Notes: </strong>\nThe positional information of the whole theme river view reuses the positional information of a single time axis, which are left, top, right and bottom.</p>\n","default":null},"coordinateSystem":{"type":["string"],"description":"<p>coordinate. The theme river adopts sinle time axis.</p>\n","default":"\"single\""},"boundaryGap":{"type":["Array"],"description":"<p>The boundary gap of the direction orthogonal with coordinate axis in diagram, which is set to adjust the diagram position, keeping it on the screen center instead of the upside or downside of the screen.</p>\n","default":"[\"10%\", \"10%\"]"},"singleAxisIndex":{"type":["number"],"description":"<p>The index of single time axis, which defaults to be 0 because it contains only one axis.</p>\n","default":0},"label":{"type":["Object"],"description":"<p><code class=\"codespan\">label</code> describes style of text labels with which each ribbon-shape river branch corresponds in theme river.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'left'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'#000'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":11},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>style of each ribbon-shape river branch in theme river.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'left'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'#000'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":11},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":20},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"'rgba(0,0,0,0.8)'"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<pre><code class=\"lang-js\">data: [\n    [&quot;2015/11/09&quot;,10,&quot;DQ&quot;],\n    [&quot;2015/11/10&quot;,10,&quot;DQ&quot;],\n    [&quot;2015/11/11&quot;,10,&quot;DQ&quot;],\n    [&quot;2015/11/08&quot;,10,&quot;SS&quot;],\n    [&quot;2015/11/09&quot;,10,&quot;SS&quot;],\n    [&quot;2015/11/10&quot;,10,&quot;SS&quot;],\n    [&quot;2015/11/11&quot;,10,&quot;SS&quot;],\n    [&quot;2015/11/12&quot;,10,&quot;SS&quot;],\n    [&quot;2015/11/13&quot;,10,&quot;QG&quot;],\n    [&quot;2015/11/08&quot;,10,&quot;QG&quot;],\n    [&quot;2015/11/11&quot;,10,&quot;QG&quot;],\n    [&quot;2015/11/13&quot;,10,&quot;QG&quot;],\n]\n</code></pre>\n<p><strong>data specification: </strong></p>\n<p>As what is shown above, the data format of theme river is double dimensional array. Each item of the inner array consists of the time attribute , the value at a time point and the name of an event or theme. It needs to be noticed that you should provide an event or theme with a complete time quantum as main river. Other events and themes are based on the main river. The default value of time point should be set as 0. That is to say other events or themes are included in the main river. Once they are beyond the main river, the layout would be wrong. That is because a baseline should be calculated to draw each event as ribbon shape when the whole diagram layout is calculated. As the example above, the event &quot;SS&quot; is a main river. After dispose, we would complete these 3 default time points with the format of [&quot;2015/11/08&quot;,0,&quot;DQ&quot;], [&quot;2015/11/12&quot;,0,&quot;DQ&quot;], [&quot;2015/11/13&quot;,0,&quot;DQ&quot;], making it align with the main river. From what is mentioned, we could set default value on any position of a complete time period.</p>\n","items":{"type":"Object","properties":{"date":{"type":["string"],"description":"<p>the time attribute of time and theme.</p>\n"},"value":{"type":["number"],"description":"<p>the value of an event or theme at a time point.</p>\n"},"name":{"type":["string"],"description":"<p>the name of an event or theme.</p>\n"}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong>custom series</strong></p>\n<p><code class=\"codespan\">custom series</code> supports customizing graphic elements, and then generate more types of charts.</p>\n<p>echarts manages the creation, deletion, animation and interaction with other components (like <a href=\"#dataZoom\">dataZoom</a>、<a href=\"#visualMap\">visualMap</a>), which frees developers from handling those issue themselves.</p>\n<p><strong>For example, a &quot;x-range&quot; chart is made by custom sereis:</strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=custom-profile&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n<p><strong><a href=\"https://echarts.apache.org/examples/en/index.html#chart-type-custom\" target=\"_blank\">More samples of custom series</a></strong></p>\n<p><strong><a href=\"tutorial.html#Custom%20Series\" target=\"_blank\">A tutotial of custom series</a></strong></p>\n<p><br>\n<strong>Customize the render logic (in renderItem method)</strong></p>\n<p><code class=\"codespan\">custom series</code> requires developers to write a render logic by themselves. This render logic is called <a href=\"#series-custom.renderItem\">renderItem</a>.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">var option = {\n    ...,\n    series: [{\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            var categoryIndex = api.value(0);\n            var start = api.coord([api.value(1), categoryIndex]);\n            var end = api.coord([api.value(2), categoryIndex]);\n            var height = api.size([0, 1])[1] * 0.6;\n\n            var rectShape = echarts.graphic.clipRectByRect({\n                x: start[0],\n                y: start[1] - height / 2,\n                width: end[0] - start[0],\n                height: height\n            }, {\n                x: params.coordSys.x,\n                y: params.coordSys.y,\n                width: params.coordSys.width,\n                height: params.coordSys.height\n            });\n\n            return rectShape &amp;&amp; {\n                type: &#39;rect&#39;,\n                shape: rectShape,\n                style: api.style()\n            };\n        },\n        data: data\n    }]\n}\n</code></pre>\n<p><a href=\"#series-custom.renderItem\">renderItem</a> will be called on each data item.</p>\n<p><a href=\"#series-custom.renderItem\">renderItem</a> provides two parameters:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.arguments.params\">params</a>: provides info about the current series and data and coordinate system.</li>\n<li><a href=\"#series-custom.renderItem.arguments.api\">api</a>: includes some methods.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem\">renderItem</a> method should returns graphic elements definitions.See <a href=\"#series-custom.renderItem.return\">renderItem.return</a>.</p>\n<p>Generally, the main process of <a href=\"#series-custom.renderItem\">renderItem</a> is that retrieve value from data and convert them to graphic elements on the current coordinate system. Two methods in <a href=\"#series-custom.renderItem.arguments.api\">renderItem.arguments.api</a> are always used in this procedure:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.arguments.api.value\">api.value(...)</a> is used to retrieve value from data. For example, <code class=\"codespan\">api.value(0)</code> retrieve the value of the first dimension in the current data item.</li>\n<li><a href=\"#series-custom.renderItem.arguments.api.coord\">api.coord(...)</a> is used to convert data to coordinate. For example, <code class=\"codespan\">var point = api.coord([api.value(0), api.value(1)])</code> converet the data to the point on the current coordinate system.</li>\n</ul>\n<p>Sometimes <a href=\"#series-custom.renderItem.arguments.api.size\">api.size(...)</a> method is needed, which calculates the size on the coordinate system by a given data range.</p>\n<p>Moreover, <a href=\"#series-custom.renderItem.arguments.api.style\">api.style(...)</a> method can be used to set style. It provides not only the style settings specified in <a href=\"#series-custom.itemStyle\">series.itemStyle</a>, but also the result of visual mapping. This method can also be called like <code class=\"codespan\">api.style({fill: &#39;green&#39;, stroke: &#39;yellow&#39;})</code> to override those style settings.</p>\n<p><br>\n<strong>Dimension mapping (by encode and dimension option)</strong></p>\n<p>In most cases, <a href=\"#series-custom.encode\">series.encode</a> needs to be specified when using <code class=\"codespan\">custom series</code> series, which indicate the mapping of dimensions, and then echarts can render appropriate axis by the extent of those data.</p>\n<p><code class=\"codespan\">encode.tooltip</code> and <code class=\"codespan\">encode.label</code> can also be specified to define the content of default <code class=\"codespan\">tooltip</code> and <code class=\"codespan\">label</code>.\n<a href=\"#series-custom.dimensions\">series.dimensions</a> can also be specified to defined names of each dimensions, which will be displayed in tooltip.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;custom&#39;,\n    renderItem: function () {\n        ...\n    },\n    encode: {\n        x: [2, 4, 3],\n        y: 1,\n        label: 0,\n        tooltip: [2, 4, 3]\n    }\n}\n</code></pre>\n<p><br>\n<strong>Controlled by dataZoom</strong></p>\n<p>When use <code class=\"codespan\">custom series</code> with <a href=\"#dataZoom\">dataZoom</a>, <a href=\"#dataZoom.filterMode\">dataZoom.filterMode</a> usually be set as <code class=\"codespan\">&#39;weakFilter&#39;</code>, which prevent <code class=\"codespan\">dataItem</code> from being filtered when only part of its dimensions are out of the current data window.</p>\n<p><br>\n<br>\n<strong>Difference between <code class=\"codespan\">dataIndex</code> and <code class=\"codespan\">dataIndexInside</code></strong></p>\n<ul>\n<li><code class=\"codespan\">dataIndex</code> is the index of a <code class=\"codespan\">dataItem</code> in the original data.</li>\n<li><code class=\"codespan\">dataIndexInside</code> is the index of a <code class=\"codespan\">dataItem</code> in the current data window (see <a href=\"#dataZoom\">dataZoom</a>.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.arguments.api\">renderItem.arguments.api</a> uses <code class=\"codespan\">dataIndexInside</code> as the input parameter but not <code class=\"codespan\">dataIndex</code>, because conversion from <code class=\"codespan\">dataIndex</code> to <code class=\"codespan\">dataIndexInside</code> is time-consuming.</p>\n<p><br>\n<strong>Event listener</strong></p>\n<pre><code class=\"lang-js\">chart.setOption({\n    // ...\n    series: {\n        type: &#39;custom&#39;,\n        renderItem: function () {\n            // ...\n            return {\n                type: &#39;group&#39;,\n                children: [{\n                    type: &#39;circle&#39;\n                    // ...\n                }, {\n                    type: &#39;circle&#39;,\n                    name: &#39;aaa&#39;,\n                    // User specified info, available\n                    // in event handler.\n                    info: 12345,\n                    // ...\n                }]\n            };\n        }\n    }\n});\nchart.on(&#39;click&#39;, {element: &#39;aaa&#39;}, function (params) {\n    // When the element with name &#39;aaa&#39; clicked,\n    // this method called.\n    console.log(params.info);\n});\n</code></pre>\n","properties":{"type":{"type":["string"],"description":"","default":"'custom'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"legendHoverLink":{"type":["boolean"],"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n","default":true},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">null</code> or <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>  No coordinate.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">&#39;cartesian2d&#39;</code></p>\n<p>  Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-custom.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-custom.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">&#39;polar&#39;</code></p>\n<p>  Use polar coordinates, with <a href=\"#series-custom.polarIndex\">polarIndex</a> to assign the corresponding polar coordinate component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">&#39;geo&#39;</code></p>\n<p>  Use geographic coordinate, with <a href=\"#series-custom.geoIndex\">geoIndex</a> to assign the corresponding geographic coordinate components.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">&#39;none&#39;</code></p>\n<p>  Do not use coordinate system.</p>\n</li>\n</ul>\n","default":"'cartesian2d'"},"xAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#xAxis\">x axis</a> to combine with, which is  useful for multiple x axes in one chart.</p>\n","default":0},"yAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#yAxis\">y axis</a> to combine with, which is  useful for multiple y axes in one chart.</p>\n","default":0},"polarIndex":{"type":["number"],"description":"<p>Index of <a href=\"#polar\">polar coordinate</a> to combine with, which is useful for multiple polar axes in one chart.</p>\n","default":0},"geoIndex":{"type":["number"],"description":"<p>Index of <a href=\"#geo\">geographic coordinate</a> to combine with, which is useful for multiple geographic axes in one chart.</p>\n","default":0},"calendarIndex":{"type":["number"],"description":"<p>Index of <a href=\"#calendar\">calendar coordinates</a> to combine with, which is useful for multiple calendar coordinates in one chart.</p>\n","default":0},"renderItem":{"type":["Function"],"description":"<p><code class=\"codespan\">custom series</code> requires developers to write a render logic by themselves. This render logic is called <a href=\"#series-custom.renderItem\">renderItem</a>.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">var option = {\n    ...,\n    series: [{\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            var categoryIndex = api.value(0);\n            var start = api.coord([api.value(1), categoryIndex]);\n            var end = api.coord([api.value(2), categoryIndex]);\n            var height = api.size([0, 1])[1] * 0.6;\n\n            var rectShape = echarts.graphic.clipRectByRect({\n                x: start[0],\n                y: start[1] - height / 2,\n                width: end[0] - start[0],\n                height: height\n            }, {\n                x: params.coordSys.x,\n                y: params.coordSys.y,\n                width: params.coordSys.width,\n                height: params.coordSys.height\n            });\n\n            return rectShape &amp;&amp; {\n                type: &#39;rect&#39;,\n                shape: rectShape,\n                style: api.style()\n            };\n        },\n        data: data\n    }]\n}\n</code></pre>\n<p><a href=\"#series-custom.renderItem\">renderItem</a> will be called on each data item.</p>\n<p><a href=\"#series-custom.renderItem\">renderItem</a> provides two parameters:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.arguments.params\">params</a>: provides info about the current series and data and coordinate system.</li>\n<li><a href=\"#series-custom.renderItem.arguments.api\">api</a>: includes some methods.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem\">renderItem</a> method should returns graphic elements definitions.See <a href=\"#series-custom.renderItem.return\">renderItem.return</a>.</p>\n<p>Generally, the main process of <a href=\"#series-custom.renderItem\">renderItem</a> is that retrieve value from data and convert them to graphic elements on the current coordinate system. Two methods in <a href=\"#series-custom.renderItem.arguments.api\">renderItem.arguments.api</a> are always used in this procedure:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.arguments.api.value\">api.value(...)</a> is used to retrieve value from data. For example, <code class=\"codespan\">api.value(0)</code> retrieve the value of the first dimension in the current data item.</li>\n<li><a href=\"#series-custom.renderItem.arguments.api.coord\">api.coord(...)</a> is used to convert data to coordinate. For example, <code class=\"codespan\">var point = api.coord([api.value(0), api.value(1)])</code> converet the data to the point on the current coordinate system.</li>\n</ul>\n<p>Sometimes <a href=\"#series-custom.renderItem.arguments.api.size\">api.size(...)</a> method is needed, which calculates the size on the coordinate system by a given data range.</p>\n<p>Moreover, <a href=\"#series-custom.renderItem.arguments.api.style\">api.style(...)</a> method can be used to set style. It provides not only the style settings specified in <a href=\"#series-custom.itemStyle\">series.itemStyle</a>, but also the result of visual mapping. This method can also be called like <code class=\"codespan\">api.style({fill: &#39;green&#39;, stroke: &#39;yellow&#39;})</code> to override those style settings.</p>\n","properties":{"arguments":{"type":["*"],"description":"<p>Parameters of <code class=\"codespan\">renderItem</code>.</p>\n","properties":{"params":{"type":["Object"],"description":"<p>The first parameter of <code class=\"codespan\">renderItem</code>, including:</p>\n<pre><code class=\"lang-js\">{\n    context: // {string} An object that developers can store something temporarily here. Life cycle: current round of rendering.\n    seriesId: // {string} The id of this series.\n    seriesName: // {string} The name of this series.\n    seriesIndex: // {number} The index of this series.\n    dataIndex: // {number} The index of this data item.\n    dataIndexInside: // {number} The index of this data item in the current data window (see dataZoom).\n    dataInsideLength: // {number} The count of data in the current data window (see dataZoom).\n    actionType: // {string} The type of action that trigger this render.\n    coordSys: // coordSys is variable by different types of coordinate systems:\n    coordSys: {\n        type: &#39;cartesian2d&#39;,\n        x: // {number} x of grid rect\n        y: // {number} y of grid rect\n        width: // {number} width of grid rect\n        height: // {number} height of grid rect\n    },\n    coordSys: {\n        type: &#39;calendar&#39;,\n        x: // {number} x of calendar rect\n        y: // {number} y of calendar rect\n        width: // {number} width of calendar rect\n        height: // {number} height of calendar rect\n        cellWidth: // {number} calendar cellWidth\n        cellHeight: // {number} calendar cellHeight\n        rangeInfo: {\n            start: // date start of calendar.\n            end: // date end of calendar.\n            weeks: // number of weeks in calendar.\n            dayCount: // day count in calendar.\n        }\n    },\n    coordSys: {\n        type: &#39;geo&#39;,\n        x: // {number} x of geo rect\n        y: // {number} y of geo rect\n        width: // {number} width of geo rect\n        height: // {number} height of geo rect\n        zoom: // {number} zoom ratio, 1 if no zoom, 0.5 means shrink to 50%.\n    },\n    coordSys: {\n        type: &#39;polar&#39;,\n        cx: // {number} x of polar center.\n        cy: // {number} y of polar center.\n        r: // {number} outer radius of polar.\n        r0: // {number} inner radius of polar.\n    },\n    coordSys: {\n        type: &#39;singleAxis&#39;,\n        x: // {number} x of singleAxis rect\n        y: // {number} y of singleAxis rect\n        width: // {number} width of singleAxis rect\n        height: // {number} height of singleAxis rect\n    }\n}\n</code></pre>\n<p>Difference between <code class=\"codespan\">dataIndex</code> and <code class=\"codespan\">dataIndexInside</code>:</p>\n<ul>\n<li><code class=\"codespan\">dataIndex</code> is the index of a <code class=\"codespan\">dataItem</code> in the original data.</li>\n<li><code class=\"codespan\">dataIndexInside</code> is the index of a <code class=\"codespan\">dataItem</code> in the current data window (see <a href=\"#dataZoom\">dataZoom</a>.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.arguments.api\">renderItem.arguments.api</a> uses <code class=\"codespan\">dataIndexInside</code> as the input parameter but not <code class=\"codespan\">dataIndex</code>, because conversion from <code class=\"codespan\">dataIndex</code> to <code class=\"codespan\">dataIndexInside</code> is time-consuming.</p>\n"},"api":{"type":["Object"],"description":"<p>The second parameter of <code class=\"codespan\">renderItem</code>.</p>\n","properties":{"value":{"type":["Function"],"description":"<p>Get value on the given dimension.</p>\n<pre><code>@param {number} dimension The given dimension. (index from 0).\n@param {number} [dataIndexInside] In most cases it is not necessary.\n@return {number} The value.\n</code></pre>"},"coord":{"type":["Function"],"description":"<p>Convert data to coordinate.</p>\n<pre><code>@param {Array.&lt;number&gt;} data.\n@return {Array.&lt;number&gt;} Point on canvas, at least includes [x, y].\n        In polar, it also contains:\n        polar: [x, y, radius, angle]\n</code></pre>"},"size":{"type":["Function"],"description":"<p>Get the size by the given data range.</p>\n<p>For example, in <code class=\"codespan\">cartesian2d</code>, suppose calling <code class=\"codespan\">api.size([2, 4])</code> returns <code class=\"codespan\">[12.4, 55]</code>. It represents that on x axis, data range <code class=\"codespan\">2</code> corresponds to size <code class=\"codespan\">12.4</code>, and on y axis data range <code class=\"codespan\">4</code> corresponds to size <code class=\"codespan\">55</code>.</p>\n<p>In some coordinate systems (for example, polar) or when log axis is used, the size is different in different point. So the second parameter is necessary to calculate size on the given point.</p>\n<pre><code>@param {Array.&lt;number&gt;} dataSize Data range.\n@param {Array.&lt;number&gt;} dataItem The point where the size will be calculated.\n@return {Array.&lt;number&gt;} The size.\n</code></pre>"},"style":{"type":["Function"],"description":"<p>The method obtains style info defined in <a href=\"#series-custom.itemStyle\">series.itemStyle</a>, and visual info obtained by visual mapping, and return them. Those returned info can be assigned to <code class=\"codespan\">style</code> attribute of graphic element definition directly. Developers can also override style info by calling this method like this: <code class=\"codespan\">api.style({fill: &#39;green&#39;, stroke: &#39;yellow&#39;})</code>.</p>\n<pre><code>@param {Object} [extra] Extra style info.\n@param {number} [dataIndexInside] In most cases, this parameter is not necessary.\n@return {Object} Style info, which can be assigned to `style` attribute of graphic element definition directly.\n</code></pre>"},"styleEmphasis":{"type":["Function"],"description":"<p>The method obtains style info defined in <a href=\"#series-custom.itemStyle.emphasis\">series.itemStyle.emphasis</a>, and visual info obtained by visual mapping, and return them. Those returned info can be assigned to <code class=\"codespan\">style</code> attribute of graphic element definition directly. Developers can also override style info by calling this method like this: <code class=\"codespan\">api.style({fill: &#39;green&#39;, stroke: &#39;yellow&#39;})</code>.</p>\n<pre><code>@param {Object} [extra] Extra style info.\n@param {number} [dataIndexInside] In most cases, this parameter is not necessary.\n@return {Object} Style info, which can be assigned to `style` attribute of graphic element definition directly.\n</code></pre>"},"visual":{"type":["Function"],"description":"<p>Get the visual info. It is rarely be used.</p>\n<pre><code>@param {string} visualType &#39;color&#39;, &#39;symbol&#39;, &#39;symbolSize&#39;, ...\n@param {number} [dataIndexInside] In most cases, this parameter is not necessary.\n@return {string|number} The value of visual.\n</code></pre>"},"barLayout":{"type":["Function"],"description":"<p>When <code class=\"codespan\">barLayout</code> is needed, (for example, when attaching some extra graphic elements to bar chart), this method can be used to obtain bar layout info.</p>\n<p>See a <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=custom-bar-trend\" target=\"_blank\">sample</a>.</p>\n<pre><code>@param {Object} opt\n@param {number} opt.count How many bars in each group.\n@param {number|string} [opt.barWidth] Width of a bar.\n        Can be an absolute value like `40` or a percent value like `&#39;60%&#39;`.\n        The percent is based on the calculated category width.\n@param {number|string} [opt.barMaxWidth] Max width of a bar.\n        Can be an absolute value like `40` or a percent value like `&#39;60%&#39;`.\n        The percent is based on the calculated category width.\n        Has higer priority than `opt.barWidth`.\n@param {number|string} [opt.barMinWidth] Min width of a bar.\n        Can be an absolute value like `40` or a percent value like `&#39;60%&#39;`.\n        The percent is based on the calculated category width.\n        Has higer priority than `opt.barWidth`.\n@param {number} [opt.barGap] Gap of bars in a group.\n@param {number} [opt.barCategoryGap] Gap of groups.\n@return {Array.&lt;Object&gt;} [{\n        width: {number} Width of a bar.\n        offset: {number} Offset of a bar, based on the left most edge.\n        offsetCenter: {number} bar Offset of a bar, based on the center of the bar.\n    }, ...]\n</code></pre>"},"currentSeriesIndices":{"type":["Function"],"description":"<p>Obtain the current series index. Notice that the <code class=\"codespan\">currentSeriesIndex</code> is different from <code class=\"codespan\">seriesIndex</code> when legend is used to filter some series.</p>\n<pre><code>@return {number}\n</code></pre>"},"font":{"type":["Function"],"description":"<p>Obtain font string, which can be used on style setting directly.</p>\n<pre><code>@param {Object} opt\n@param {string} [opt.fontStyle]\n@param {number} [opt.fontWeight]\n@param {number} [opt.fontSize]\n@param {string} [opt.fontFamily]\n@return {string} font string.\n</code></pre>"},"getWidth":{"type":["Function"],"description":"<pre><code>@return {number} Width of echarts containter.\n</code></pre>"},"getHeight":{"type":["Function"],"description":"<pre><code>@return {number} Height of echarts container.\n</code></pre>"},"getZr":{"type":["Function"],"description":"<pre><code>@return {module:zrender} zrender instance.\n</code></pre>"},"getDevicePixelRatio":{"type":["Function"],"description":"<pre><code>@return {number} The current devicePixelRatio.\n</code></pre>"}}}}},"return":{"type":["Object"],"description":"<p><code class=\"codespan\">renderItem</code> should returns graphic element definitions. Each graphic element is an object. See <a href=\"#graphic.elements\">graphic</a> for detailed info. (But width\\height\\top\\bottom is not supported here)</p>\n<p>If nothing should be rendered in this data item, just returns nothing.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">// Returns a rectangular.\n{\n    type: &#39;rect&#39;,\n    shape: {\n        x: x, y: y, width: width, height: height\n    },\n    style: api.style()\n}\n</code></pre>\n<pre><code class=\"lang-js\">// Returns a group of elements.\n{\n    type: &#39;group&#39;,\n    // If diffChildrenByName is set as `true`, `child.name` will be used\n    // to diff children, which improves animation transition but degrade\n    // performance. The default value is `false`.\n    // diffChildrenByName: true,\n    children: [{\n        type: &#39;circle&#39;,\n        shape: {\n            cx: cx, cy: cy, r: r\n        },\n        style: api.style()\n    }, {\n        type: &#39;line&#39;,\n        shape: {\n            x1: x1, y1: y1, x2: x2, y2: y2\n        },\n        style: api.style()\n    }]\n}\n</code></pre>\n"},"return_group":{"type":["Object"],"description":"<p><code class=\"codespan\">group</code> is the only type that can contain children, so that a group of elements can be positioned and transformed together.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"group"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>.</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"width":{"type":["number"],"description":"<p>Specify width of this <code class=\"codespan\">group</code>.</p>\n<p>This width is only used for the positioning of its children.</p>\n<p>When width is <code class=\"codespan\">0</code>, children can also be positioned according to its parent using <code class=\"codespan\">left: &#39;center&#39;</code>.</p>\n","default":0},"height":{"type":["number"],"description":"<p>Specify height of this <code class=\"codespan\">group</code>.</p>\n<p>This height is only used for the positioning of its children.</p>\n<p>When height is <code class=\"codespan\">0</code>, children can also be positioned according to its parent using <code class=\"codespan\">top: &#39;middle&#39;</code>.</p>\n","default":0},"diffChildrenByName":{"type":["boolean"],"description":"<p>In <a href=\"#series-custom\">custom series</a>, when <code class=\"codespan\">diffChildrenByName</code> is set as <code class=\"codespan\">true</code>, for each <a href=\"#series-custom.renderItem.return_group\">group</a> returned from <a href=\"#series-custom.renderItem\">renderItem</a>, &quot;diff&quot; will be performed to its <a href=\"#series-custom.renderItem.return_group.children\">children</a> according to the <a href=\"#series-custom.renderItem.return_polygon.name\">name</a> attribute of each graphic elements. Here &quot;diff&quot; means that map the coming graphic elements to the existing graphic elements when repainting according to <code class=\"codespan\">name</code>, which enables the transition animation if data is modified.</p>\n<p>But notice that the operation is performance consuming, do not use it for large data amount.</p>\n","default":false},"children":{"type":["Array"],"description":"<p>A list of children, each item is a declaration of an element.</p>\n"},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}},"return_path":{"type":["Object"],"description":"<p>Use <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> to describe a path. Can be used to draw icons or any other shapes fitting the specified size by auto transforming.</p>\n<p>See examples:\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=custom-calendar-icon\" target=\"_blank\">icons</a> and <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=custom-gantt-flight\" target=\"_blank\">shapes</a>.</p>\n<p>About width/height, cover/contain, see\n<a href=\"#series-custom.renderItem.return_path.shape.layout\">layout</a>.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"path"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>.</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"pathData":{"type":["string"],"description":"<p><a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a>.</p>\n<p>For example, <code class=\"codespan\">&#39;M0,0 L0,-20 L30,-20 C42,-20 38,-1 50,-1 L70,-1 L70,0 Z&#39;</code>.</p>\n<p>If <a href=\"#series-custom.renderItem.return_path.shape.width\">width</a>, <a href=\"#series-custom.renderItem.return_path.shape.height\">height</a>, <a href=\"#series-custom.renderItem.return_path.shape.x\">x</a> and <a href=\"#series-custom.renderItem.return_path.shape.y\">y</a> specified, <code class=\"codespan\">pathData</code> will be transformed to fit the defined rect. If they are not specified, do not do that.</p>\n<p><a href=\"#series-custom.renderItem.return_path.shape.layout\">layout</a> can be used to specify the transform strategy.</p>\n<p>See examples:\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=custom-calendar-icon\" target=\"_blank\">icons</a> and <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=custom-gantt-flight\" target=\"_blank\">shapes</a>.</p>\n"},"d":{"type":["string"],"description":"<p>Alias of <a href=\"#series-custom.renderItem.return_path.shape.pathData\">pathData</a>.</p>\n"},"layout":{"type":["string"],"description":"<p>If <a href=\"#series-custom.renderItem.return_path.shape.width\">width</a>, <a href=\"#series-custom.renderItem.return_path.shape.height\">height</a>, <a href=\"#series-custom.renderItem.return_path.shape.x\">x</a> and <a href=\"#series-custom.renderItem.return_path.shape.y\">y</a> specified, <code class=\"codespan\">pathData</code> will be transformed to fit the defined rect.</p>\n<p><code class=\"codespan\">layout</code> can be used to specify the transform strategy.</p>\n<p>Optional value:</p>\n<ul>\n<li><code class=\"codespan\">&#39;center&#39;</code>: Keep aspect ratio, put the path in the center of the rect, expand as far as possible but never overflow.</li>\n<li><code class=\"codespan\">&#39;cover&#39;</code>: Transform the path according to the aspect ratio of the rect, fill the rect and do not overflow.</li>\n</ul>\n","default":"'center'"},"x":{"type":["number"],"description":"<p>The x value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"y":{"type":["numbr"],"description":"<p>The y value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"width":{"type":["number"],"description":"<p>The width of the shape of the element.</p>\n","default":0},"height":{"type":["numbr"],"description":"<p>The height of the shape of the element.</p>\n","default":0}}},"style":{"type":["Object"],"description":"<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}},"return_image":{"type":["Object"],"description":"","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"image"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>.</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"style":{"type":["Object"],"description":"","properties":{"image":{"type":["string"],"description":"<p>Specify contant of the image, can be a URL, or <a href=\"https://tools.ietf.org/html/rfc2397\" target=\"_blank\">dataURI</a>.</p>\n"},"x":{"type":["number"],"description":"<p>The x value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"y":{"type":["numbr"],"description":"<p>The y value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"width":{"type":["number"],"description":"<p>The width of the shape of the element.</p>\n","default":0},"height":{"type":["numbr"],"description":"<p>The height of the shape of the element.</p>\n<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","default":0},"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}},"return_text":{"type":["Object"],"description":"<p>Text block.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"text"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>.</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"style":{"type":["Object"],"description":"","properties":{"text":{"type":["string"],"description":"<p>Text content. <code class=\"codespan\">\\n</code> can be used as a line break.</p>\n","default":"''"},"x":{"type":["number"],"description":"<p>The x value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"y":{"type":["numbr"],"description":"<p>The y value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"font":{"type":["string"],"description":"<p>Font size, font type, font weight, font color, follow the form of <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font\" target=\"_blank\">css font</a>.</p>\n<p>For example:</p>\n<pre><code>// size | family\nfont: &#39;2em &quot;STHeiti&quot;, sans-serif&#39;\n\n// style | weight | size | family\nfont: &#39;italic bolder 16px cursive&#39;\n\n// weight | size | family\nfont: &#39;bolder 2em &quot;Microsoft YaHei&quot;, sans-serif&#39;\n</code></pre>"},"textAlign":{"type":["string"],"description":"<p>Text horizontal alignment. Optional values: <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;left&#39;</code> means the left side of the text block is specified by the <a href=\"#series-custom.renderItem.return_text.style.x\">style.x</a>, while <code class=\"codespan\">&#39;right&#39;</code> means the right side of the text block is specified by <a href=\"#series-custom.renderItem.return_text.style.y\">style.y</a>.</p>\n","default":"'left'"},"textVerticalAlign":{"type":["string"],"description":"<p>Text vertical alignment. Optional values: <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n"},"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}},"return_rect":{"type":["Object"],"description":"<p>Rectangle element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"rect"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>.</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"x":{"type":["number"],"description":"<p>The x value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"y":{"type":["numbr"],"description":"<p>The y value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"width":{"type":["number"],"description":"<p>The width of the shape of the element.</p>\n","default":0},"height":{"type":["numbr"],"description":"<p>The height of the shape of the element.</p>\n","default":0},"r":{"type":["Array"],"description":"<p>Specify border radius of the rectangular here. Generally, <code class=\"codespan\">r</code> should be <code class=\"codespan\">[topLeftRadius, topRightRadius, BottomRightRadius, bottomLeftRadius]</code>, where each item is a number.</p>\n<p>Abbreviation is enabled, for example:</p>\n<ul>\n<li><code class=\"codespan\">r</code>: <code class=\"codespan\">1</code>         means <code class=\"codespan\">[1, 1, 1, 1]</code></li>\n<li><code class=\"codespan\">r</code>: <code class=\"codespan\">[1]</code>       means <code class=\"codespan\">[1, 1, 1, 1]</code></li>\n<li><code class=\"codespan\">r</code>: <code class=\"codespan\">[1, 2]</code>    means <code class=\"codespan\">[1, 2, 1, 2]</code></li>\n<li><code class=\"codespan\">r</code>: <code class=\"codespan\">[1, 2, 3]</code> means <code class=\"codespan\">[1, 2, 3, 2]</code></li>\n</ul>\n"}}},"style":{"type":["Object"],"description":"<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}},"return_circle":{"type":["Object"],"description":"<p>Circle element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"circle"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>.</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"cx":{"type":["number"],"description":"<p>The x value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"cy":{"type":["numbr"],"description":"<p>The y value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"r":{"type":["number"],"description":"<p>Outside radius.</p>\n","default":0}}},"style":{"type":["Object"],"description":"<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}},"return_ring":{"type":["Object"],"description":"<p>Ring element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"ring"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>.</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"cx":{"type":["number"],"description":"<p>The x value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"cy":{"type":["numbr"],"description":"<p>The y value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"r":{"type":["number"],"description":"<p>Outside radius.</p>\n","default":0},"r0":{"type":["number"],"description":"<p>Inside radius.</p>\n","default":0}}},"style":{"type":["Object"],"description":"<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}},"return_sector":{"type":["Object"],"description":"<p>Sector element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"sector"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>.</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"cx":{"type":["number"],"description":"<p>The x value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"cy":{"type":["numbr"],"description":"<p>The y value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"r":{"type":["number"],"description":"<p>Outside radius.</p>\n","default":0},"r0":{"type":["number"],"description":"<p>Inside radius.</p>\n","default":0},"startAngle":{"type":["number"],"description":"<p>start angle, in radian.</p>\n","default":0},"endAngle":{"type":["number"],"description":"<p>end anble, in radian.</p>\n","default":"Math.PI * 2"},"clockwise":{"type":["boolean"],"description":"<p>Whether draw clockwise.</p>\n","default":true}}},"style":{"type":["Object"],"description":"<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}},"return_arc":{"type":["Object"],"description":"<p>Arc element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"arc"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>.</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"cx":{"type":["number"],"description":"<p>The x value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"cy":{"type":["numbr"],"description":"<p>The y value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"r":{"type":["number"],"description":"<p>Outside radius.</p>\n","default":0},"r0":{"type":["number"],"description":"<p>Inside radius.</p>\n","default":0},"startAngle":{"type":["number"],"description":"<p>start angle, in radian.</p>\n","default":0},"endAngle":{"type":["number"],"description":"<p>end anble, in radian.</p>\n","default":"Math.PI * 2"},"clockwise":{"type":["boolean"],"description":"<p>Whether draw clockwise.</p>\n","default":true}}},"style":{"type":["Object"],"description":"<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":null},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":"\"#000\""},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":1},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}},"return_polygon":{"type":["Object"],"description":"<p>Polygon element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"polygon"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>.</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"points":{"type":["Array"],"description":"<p>A list of points, which defines the shape, like <code class=\"codespan\">[[22, 44], [44, 55], [11, 44], ...]</code>.</p>\n"},"smooth":{"type":["number","string"],"description":"<p>Whether smooth the line.</p>\n<ul>\n<li>If the value is number, bezier interpolation is used, and the value specified the level of smooth, which is in the range of <code class=\"codespan\">[0, 1]</code>.</li>\n<li>If the value is <code class=\"codespan\">&#39;spline&#39;</code>, Catmull-Rom spline interpolation is used.</li>\n</ul>\n","default":"undefined"},"smoothConstraint":{"type":["boolean"],"description":"<p>Whether prevent the smooth process cause the line out of the bounding box.</p>\n<p>Only works when <code class=\"codespan\">smooth</code> is <code class=\"codespan\">number</code> (bezier smooth).</p>\n","default":false}}},"style":{"type":["Object"],"description":"<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}},"return_polyline":{"type":["Object"],"description":"<p>Polyline element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"polyline"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>.</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"points":{"type":["Array"],"description":"<p>A list of points, which defines the shape, like <code class=\"codespan\">[[22, 44], [44, 55], [11, 44], ...]</code>.</p>\n"},"smooth":{"type":["number","string"],"description":"<p>Whether smooth the line.</p>\n<ul>\n<li>If the value is number, bezier interpolation is used, and the value specified the level of smooth, which is in the range of <code class=\"codespan\">[0, 1]</code>.</li>\n<li>If the value is <code class=\"codespan\">&#39;spline&#39;</code>, Catmull-Rom spline interpolation is used.</li>\n</ul>\n","default":"undefined"},"smoothConstraint":{"type":["boolean"],"description":"<p>Whether prevent the smooth process cause the line out of the bounding box.</p>\n<p>Only works when <code class=\"codespan\">smooth</code> is <code class=\"codespan\">number</code> (bezier smooth).</p>\n","default":false}}},"style":{"type":["Object"],"description":"<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":null},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":"\"#000\""},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":5},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}},"return_line":{"type":["Object"],"description":"<p>Line element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"line"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>.</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"x1":{"type":["number"],"description":"<p>x value of the start point.</p>\n","default":0},"y1":{"type":["number"],"description":"<p>y value of the start point.</p>\n","default":0},"x2":{"type":["number"],"description":"<p>x value of the end point.</p>\n","default":0},"y2":{"type":["number"],"description":"<p>y value of the end point.</p>\n","default":0},"percent":{"type":["number"],"description":"<p>Specify the percentage of drawing, useful in animation.</p>\n<p>Value range: [0, 1].</p>\n","default":1}}},"style":{"type":["Object"],"description":"<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":null},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":"\"#000\""},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":5},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}},"return_bezierCurve":{"type":["Object"],"description":"<p>Quadratic bezier curve or cubic bezier curve.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"bezierCurve"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>.</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"x1":{"type":["number"],"description":"<p>x value of the start point.</p>\n","default":0},"y1":{"type":["number"],"description":"<p>y value of the start point.</p>\n","default":0},"x2":{"type":["number"],"description":"<p>x value of the end point.</p>\n","default":0},"y2":{"type":["number"],"description":"<p>y value of the end point.</p>\n","default":0},"cpx1":{"type":["number"],"description":"<p>x of control point.</p>\n","default":0},"cpy1":{"type":["number"],"description":"<p>y of control point.</p>\n","default":0},"cpx2":{"type":["number"],"description":"<p>x of the second control point. If specified, cubic bezier is used.</p>\n<p>If both <code class=\"codespan\">cpx2</code> and <code class=\"codespan\">cpy2</code> are not set, quatratic bezier is used.</p>\n","default":null},"cpy2":{"type":["number"],"description":"<p>y of the second control point. If specified, cubic bezier is used.</p>\n<p>If both <code class=\"codespan\">cpx2</code> and <code class=\"codespan\">cpy2</code> are not set, quatratic bezier is used.</p>\n","default":null},"percent":{"type":["number"],"description":"<p>Specify the percentage of drawing, useful in animation.</p>\n<p>Value range: [0, 1].</p>\n","default":1}}},"style":{"type":["Object"],"description":"<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}}}},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of , <code class=\"codespan\">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"dimensions":{"type":["Array"],"description":"<p><code class=\"codespan\">dimensions</code> can be used to define dimension info for <code class=\"codespan\">series.data</code> or <code class=\"codespan\">dataset.source</code>.</p>\n<p>Notice: if <a href=\"#dataset\">dataset</a> is used, we can provide dimension names in the first column/row of <a href=\"#dataset.source\">dataset.source</a>, and not need to specify <code class=\"codespan\">dimensions</code> here. But if <code class=\"codespan\">dimensions</code> is specified here, echarts will not retrieve dimension names from the first row/column of <code class=\"codespan\">dataset.source</code> any more.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\n    ]\n}\n</code></pre>\n<p>Each data item of <code class=\"codespan\">dimensions</code> can be:</p>\n<ul>\n<li><code class=\"codespan\">string</code>, for example, <code class=\"codespan\">&#39;someName&#39;</code>, which equals to <code class=\"codespan\">{name: &#39;someName&#39;}</code>.</li>\n<li><code class=\"codespan\">Object</code>, where the attributes can be:<ul>\n<li>name: <code class=\"codespan\">string</code>.</li>\n<li>type: <code class=\"codespan\">string</code>, supports:<ul>\n<li><code class=\"codespan\">number</code></li>\n<li><code class=\"codespan\">float</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array\" target=\"_blank\">Float64Array</a></li>\n<li><code class=\"codespan\">int</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array\" target=\"_blank\">Int32Array</a></li>\n<li><code class=\"codespan\">ordinal</code>, discrete value, which represents string generally.</li>\n<li><code class=\"codespan\">time</code>, time value, see <a href=\"#series.data\">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code class=\"codespan\">string</code>, generally used in tooltip for dimension display. If not specified, use <code class=\"codespan\">name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code class=\"codespan\">dimensions</code> is specified, the default <code class=\"codespan\">tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code class=\"codespan\">tooltip</code> will displayed only value horizontally.</p>\n"},"encode":{"type":["Object"],"description":"<p>Define what is encoded to for each dimension of <code class=\"codespan\">data</code>. For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n</code></pre>\n<p>When <a href=\"#series.dimensions\">dimensions</a> is used to defined name for a certain dimension, <code class=\"codespan\">encode</code> can refer the name directly. For example:</p>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<p>The basic structure of <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code> or some special reserved names like &quot;tooltip&quot;, &quot;itemName&quot; etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code class=\"codespan\">encode</code> listed as follows:</p>\n<pre><code class=\"lang-js\">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension &quot;product&quot; and &quot;score&quot; in the tooltip.\n    tooltip: [&#39;product&#39;, &#39;score&#39;]\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // &#39;pie&#39;, &#39;funnel&#39;, where data item name can be displayed in legend.\n    itemName: 3\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension &quot;score&quot; to the X axis.\n    x: [1, 5, &#39;score&#39;],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like &#39;pie&#39;, &#39;funnel&#39; etc.:\nencode: {\n    value: 3\n}\n</code></pre>\n<p>This is an <a href=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a> for <code class=\"codespan\">encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code class=\"codespan\">encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href=\"#dataZoom\">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class=\"lang-js\">var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            return {\n                type: &#39;circle&#39;,\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: &#39;blue&#39;\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n</code></pre>\n"},"seriesLayoutBy":{"type":["string"],"description":"<p>When <a href=\"#dataset\">dataset</a> is used, <code class=\"codespan\">seriesLayoutBy</code> specifies whether the column or the row of <code class=\"codespan\">dataset</code> is mapped to the series, namely, the series is &quot;layout&quot; on columns or rows. Optional values:</p>\n<ul>\n<li>&#39;column&#39;: by default, the columns of <code class=\"codespan\">dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>&#39;row&#39;:the rows of <code class=\"codespan\">dataset</code> are mapped to the series. In this case, each row represents a dimension.</li>\n</ul>\n<p>Check this <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=dataset-series-layout-by\" target=\"_blank\">example</a>.</p>\n","default":"'column'"},"datasetIndex":{"type":["number"],"description":"<p>If <a href=\"#series.data\">series.data</a> is not specified, and <a href=\"#dataset\">dataset</a> exists, the series will use <code class=\"codespan\">dataset</code>. <code class=\"codespan\">datasetIndex</code> specifies which dataset will be used.</p>\n","default":0},"data":{"type":["Array"],"description":"<p>Data array of series, which can be in the following forms:</p>\n<p>Notice, if no <code class=\"codespan\">data</code> specified in series, and there is <a href=\"#dataset\">dataset</a> in option, series will use the first <a href=\"#dataset\">dataset</a> as its datasource. If <code class=\"codespan\">data</code> has been specified, <a href=\"#dataset\">dataset</a> will not used.</p>\n<p><code class=\"codespan\">series.datasetIndex</code> can be used to specify other <a href=\"#dataset\">dataset</a>.</p>\n<p>Basically, data is represented by a two-dimension array, like the example below, where each column is named as a &quot;dimension&quot;.</p>\n<pre><code class=\"lang-js\">series: [{\n    data: [\n        // dimX   dimY   other dimensions ...\n        [  3.4,    4.5,   15,   43],\n        [  4.2,    2.3,   20,   91],\n        [  10.8,   9.5,   30,   18],\n        [  7.2,    8.8,   18,   57]\n    ]\n}]\n</code></pre>\n<ul>\n<li>In <a href=\"#grid\">cartesian (grid)</a>, &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href=\"#xAxis\">xAxis</a> and <a href=\"#yAxis\">yAxis</a> respectively.</li>\n<li>In <a href=\"#polar\">polar</a> &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href=\"#radiusAxis\">radiusAxis</a> 和 <a href=\"#anbleAxis\">angleAxis</a> respectively.</li>\n<li>Other dimensions are optional, which can be used in other places. For example:<ul>\n<li><a href=\"#visualMap\">visualMap</a> can map one or more dimensions to visual (color, symbol size ...).</li>\n<li><a href=\"#series.symbolSize\">series.symbolSize</a> can be set as a callback function, where symbol size can be calculated by values of a certain dimension.</li>\n<li>Values in other dimensions can be shown by <a href=\"#tooltip.formatter\">tooltip.formatter</a> or <a href=\"#series.label.formatter\">series.label.formatter</a>.</li>\n</ul>\n</li>\n</ul>\n<p>Especially, when there is one and only one category axis (axis.type is <code class=\"codespan\">&#39;category&#39;</code>), data can be simply be represented by a one-dimension array, like:</p>\n<pre><code class=\"lang-js\">xAxis: {\n    data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;]\n},\nseries: [{\n    // Each item corresponds to each item in xAxis.data.\n    data: [23,  44,  55,  19]\n    // In fact, it is the simplification of the format below:\n    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n</code></pre>\n<p><br>\n<strong>Relationship between &quot;value&quot; and <a href=\"#xAxis.type\">axis.type</a></strong></p>\n<ul>\n<li><p>When a dimension corresponds to a value axis (axis.type is <code class=\"codespan\">&#39;value&#39;</code> or <code class=\"codespan\">&#39;log&#39;</code>):</p>\n<p>  The value can be a <code class=\"codespan\">number</code> (like <code class=\"codespan\">12</code>) (can also be a number in a <code class=\"codespan\">string</code> format, like <code class=\"codespan\">&#39;12&#39;</code>).</p>\n</li>\n<li><p>When a dimension corresponds to a category axis (axis.type is <code class=\"codespan\">&#39;category&#39;</code>):</p>\n<p>  The value should be the ordinal of the axis.data (based on <code class=\"codespan\">0</code>), the string value of the axis.data. For example:</p>\n<pre><code class=\"lang-js\">  xAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;]\n  },\n  yAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;, &#39;p&#39;, &#39;q&#39;]\n  },\n  series: [{\n      data: [\n          // xAxis      yAxis\n          [  0,           0,    2  ], // This point is located at xAxis: &#39;Monday&#39;, yAxis: &#39;a&#39;.\n          [  &#39;Thursday&#39;,  2,    1  ], // This point is located at xAxis: &#39;Thursday&#39;, yAxis: &#39;m&#39;.\n          [  2,          &#39;p&#39;,   2  ], // This point is located at xAxis: &#39;Wednesday&#39;, yAxis: &#39;p&#39;.\n          [  3,           3,    5  ]\n      ]\n  }]\n</code></pre>\n<p>  There is an example of double category axes: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-punchCard\" target=\"_blank\">Github Punchcard</a>.</p>\n</li>\n<li><p>When a dimension corresponds to a time axis (type is <code class=\"codespan\">&#39;time&#39;</code>), the value can be:</p>\n<ul>\n<li>a timestamp, like <code class=\"codespan\">1484141700832</code>, which represents a UTC time.</li>\n<li>a date string, in one of the formats below:<ul>\n<li>a subset of <a href=\"http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15\" target=\"_blank\">ISO 8601</a>, only including (all of these are treated as local time unless timezone is specified, which is consistent with <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>):<ul>\n<li>only part of year/month/date/time are specified: <code class=\"codespan\">&#39;2012-03&#39;</code>, <code class=\"codespan\">&#39;2012-03-01&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 05&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 05:06&#39;</code>.</li>\n<li>separated by <code class=\"codespan\">&quot;T&quot;</code> or a space: <code class=\"codespan\">&#39;2012-03-01T12:22:33.123&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 12:22:33.123&#39;</code>.</li>\n<li>timezone specified: <code class=\"codespan\">&#39;2012-03-01T12:22:33Z&#39;</code>, <code class=\"codespan\">&#39;2012-03-01T12:22:33+8000&#39;</code>, <code class=\"codespan\">&#39;2012-03-01T12:22:33-05:00&#39;</code>.</li>\n</ul>\n</li>\n<li>other date string format (all of these are treated as local time):\n<code class=\"codespan\">&#39;2012&#39;</code>, <code class=\"codespan\">&#39;2012-3-1&#39;</code>, <code class=\"codespan\">&#39;2012/3/1&#39;</code>, <code class=\"codespan\">&#39;2012/03/01&#39;</code>,\n<code class=\"codespan\">&#39;2009/6/12 2:00&#39;</code>, <code class=\"codespan\">&#39;2009/6/12 2:05:08&#39;</code>, <code class=\"codespan\">&#39;2009/6/12 2:05:08.123&#39;</code>.</li>\n</ul>\n</li>\n<li>a JavaScript Date instance created by user:<ul>\n<li>Caution, when using a data string to create a Date instance, <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">browser differences and inconsistencies</a> should be considered.</li>\n<li>For example: In chrome, <code class=\"codespan\">new Date(&#39;2012-01-01&#39;)</code> is treated as a Jan 1st 2012 in UTC, while <code class=\"codespan\">new Date(&#39;2012-1-1&#39;)</code> and <code class=\"codespan\">new Date(&#39;2012/01/01&#39;)</code> are treated as Jan 1st 2012 in local timezone. In safari <code class=\"codespan\">new Date(&#39;2012-1-1&#39;)</code> is not supported.</li>\n<li>So if you intent to perform <code class=\"codespan\">new Date(dateString)</code>, it is strongly recommended to use a time parse library (e.g., <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>), or use <code class=\"codespan\">echarts.number.parseDate</code>, or check <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">this</a>.</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<strong>Customize a data item:</strong></p>\n<p>When needing to customize a data item, it can be set as an object, where property <code class=\"codespan\">value</code> reprensent real value. For example:</p>\n<pre><code class=\"lang-js\">[\n    12,\n    24,\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    33\n]\n// Or\n[\n    [12, 332],\n    [24, 32],\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    [33, 31]\n]\n</code></pre>\n<p><br>\n<strong>Empty value:</strong></p>\n<p><code class=\"codespan\">&#39;-&#39;</code> or <code class=\"codespan\">null</code> or <code class=\"codespan\">undefined</code> or <code class=\"codespan\">NaN</code> can be used to describe that a data item does not exist (ps:<em>not exist</em> does not means its value is <code class=\"codespan\">0</code>).</p>\n<p>For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.</p>\n<p><br><br></p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Name of data item.</p>\n"},"value":{"type":["number"],"description":"<p>Value of data item.</p>\n"},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"clip":{"type":["boolean"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.4.0</code></p>\n</blockquote>\n<p>If clip the overflow on the coordinate system. Clip results varies between series:</p>\n<ul>\n<li>Scatter:Ignore the symbols exceeds the coordinate system. Not clip the elements.</li>\n<li>Bar:Clip all the overflowed. With bar width kept.</li>\n<li>Line:Clip the overflowed line.</li>\n<li>Lines: Clip all the overflowed.</li>\n<li>Candlestick: Ignore the elements exceeds the coordinate system.</li>\n<li>Custom: Clip all the olverflowed.</li>\n</ul>\n<p>All these series have default value <code class=\"codespan\">true</code> except custom series. Set it to <code class=\"codespan\">false</code> if you don&#39;t want to clip.</p>\n","default":false},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in custom series.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in custom series, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}]},"properties":{}},"color":{"type":["Array"],"description":"<p>The color list of palette. If no color is set in series, the colors would be adopted sequentially and circularly from this list as the colors of series.</p>\n<p>Defaults:</p>\n<pre><code class=\"lang-js\">[&#39;#c23531&#39;,&#39;#2f4554&#39;, &#39;#61a0a8&#39;, &#39;#d48265&#39;, &#39;#91c7ae&#39;,&#39;#749f83&#39;,  &#39;#ca8622&#39;, &#39;#bda29a&#39;,&#39;#6e7074&#39;, &#39;#546570&#39;, &#39;#c4ccd3&#39;]\n</code></pre>\n","properties":{}},"backgroundColor":{"type":["Color"],"description":"<p>Background color. Defaults to have no background.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","properties":{}},"textStyle":{"type":["Object"],"description":"<p>Global font style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true,"properties":{}},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000,"properties":{}},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000,"properties":{}},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut","properties":{}},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0,"properties":{}},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300,"properties":{}},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut","properties":{}},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0,"properties":{}},"blendMode":{"type":["string"],"description":"<p>Sets the type of compositing operation to apply when drawing a new shape. See the different type: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation\" target=\"_blank\">https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation</a>.</p>\n<p>The default is <code class=\"codespan\">&#39;source-over&#39;</code>. Support settings for each series.</p>\n<p><code class=\"codespan\">&#39;lighter&#39;</code> is also a common type of compositing operation. In this mode, the area where the number of graphics is concentrated is superimposed into a high-brightness color (white). It often used to highlight the effect of the area. See example <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=lines-airline\" target=\"_blank\">Global airline</a></p>\n","default":"'source-over'","properties":{}},"useUTC":{"type":["boolean"],"description":"<p>Whether to use UTC in display.</p>\n<ul>\n<li><code class=\"codespan\">true</code>: When <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;time&#39;</code>, ticks is determined according to UTC, and <code class=\"codespan\">axisLabel</code> and <code class=\"codespan\">tooltip</code> use UTC by default.</li>\n<li><code class=\"codespan\">false</code>: When <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;time&#39;</code>, ticks is determined according to local time, and <code class=\"codespan\">axisLabel</code> and <code class=\"codespan\">tooltip</code> use local time by default.</li>\n</ul>\n<p>The default value of <code class=\"codespan\">useUTC</code> is false, for sake of considering:</p>\n<ul>\n<li>In many cases, labels should be displayed in local time (whether the time is stored in server in local time or UTC).</li>\n<li>If user uses time string (like &#39;2012-01-02&#39;) in data, it usually means local time if time zone is not specified. Time should be displayed in its original time zone by default.</li>\n</ul>\n<p>Notice: the setting only affects &quot;display time&quot;, not &quot;parse time&quot;.\nFor how time value (like <code class=\"codespan\">1491339540396</code>, <code class=\"codespan\">&#39;2013-01-04&#39;</code>, ...) is parsed in echarts, see <a href=\"#series-line.data\">the time part in date</a>.</p>\n","default":false,"properties":{}}}}}
\ No newline at end of file
+{"$schema":"https://echarts.apache.org/doc/json-schem","option":{"type":"Object","properties":{"title":{"type":["Object"],"description":"<p>Title component, including main title and subtitle.</p>\n<p>In ECharts 2.x, a single instance of ECharts could contains one title component at most. However, in ECharts 3, there could be one or more than one title components. It is more useful when multiple diagrams in one instance all need titles.</p>\n<p><strong>Here are some instances of different animation easing functions, among which every instance has a title component: </strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-easing&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n\n\n\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the title from showing</p>\n","default":true},"text":{"type":["string"],"description":"<p>The main title text, supporting for <code class=\"codespan\">\\n</code> for newlines.</p>\n","default":"''"},"link":{"type":["string"],"description":"<p>The hyper link of main title text.</p>\n","default":"''"},"target":{"type":["string"],"description":"<p>Open the hyper link of main title in specified tab.</p>\n<p><strong>options: </strong></p>\n<ul>\n<li><p><code class=\"codespan\">&#39;self&#39;</code> opening it in current tab</p>\n</li>\n<li><p><code class=\"codespan\">&#39;blank&#39;</code> opening it in a new tab</p>\n</li>\n</ul>\n","default":"'blank'"},"textStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>main title text color.</p>\n","default":"'#333'"},"fontStyle":{"type":["string"],"description":"<p>main title font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p>main title font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>main title font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>main title font size.</p>\n","default":18},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"subtext":{"type":["string"],"description":"<p>Subtitle text, supporting for <code class=\"codespan\">\\n</code> for newlines.</p>\n","default":"''"},"sublink":{"type":["string"],"description":"<p>The hyper link of subtitle text.</p>\n","default":"''"},"subtarget":{"type":["string"],"description":"<p> Open the hyper link of subtitle in specified tab, options:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;self&#39;</code> opening it in current tab</p>\n</li>\n<li><p><code class=\"codespan\">&#39;blank&#39;</code> opening it in a new tab</p>\n</li>\n</ul>\n","default":"'blank'"},"subtextStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>subtitle text color.</p>\n","default":"'#aaa'"},"fontStyle":{"type":["string"],"description":"<p>subtitle font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p>subtitle font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>subtitle font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>subtitle font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"textAlign":{"type":["string"],"description":"<p>The horizontal align of the component (including &quot;text&quot; and &quot;subtext&quot;).</p>\n<p>Optional values: <code class=\"codespan\">&#39;auto&#39;</code>, <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;right&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>.</p>\n","default":"'auto'"},"textVerticalAlign":{"type":["string"],"description":"<p>The vertical align of the component (including &quot;text&quot; and &quot;subtext&quot;).</p>\n<p>Optional values: <code class=\"codespan\">&#39;auto&#39;</code>, <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;bottom&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>.</p>\n","default":"'auto'"},"triggerEvent":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to enable triggering events</p>\n","default":false},"padding":{"type":["number","Array"],"description":"<p>title space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"itemGap":{"type":["number"],"description":"<p>The gap between the main title and subtitle.</p>\n","default":10},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between title  component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"top":{"type":["string","number"],"description":"<p>Distance between title  component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"right":{"type":["string","number"],"description":"<p>Distance between title  component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"<p>Distance between title  component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"backgroundColor":{"type":["Color"],"description":"<p>Background color of title, which is transparent by default.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>.</p>\n</blockquote>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of title. Support the same color format as backgroundColor.</p>\n","default":"'#ccc'"},"borderWidth":{"type":["number"],"description":"<p>Border width of title.</p>\n","default":1},"borderRadius":{"type":["number","Array"],"description":"<p>The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.</p>\n<p>For example:</p>\n<pre><code>borderRadius: 5, // consistently set the size of 4 rounded corners\nborderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n</code></pre>","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n<p><strong>Attention</strong>: This property works only if <code class=\"codespan\">show: true</code> is configured and <code class=\"codespan\">backgroundColor</code> is defined other than <code class=\"codespan\">transparent</code>.</p>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n<p><strong>Attention</strong>: This property works only if <code class=\"codespan\">show: true</code> configured.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n<p><strong>Attention</strong>: This property works only if <code class=\"codespan\">show: true</code> configured.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n<p><strong>Attention</strong>: This property works only if <code class=\"codespan\">show: true</code> configured.</p>\n","default":0}}},"legend":{"type":["Object"],"description":"<p>Legend component.</p>\n<p>Legend component shows symbol, color and name of different series. You can click legends to toggle displaying series in the chart.</p>\n<p>In ECharts 3, a single echarts instance may contain multiple legend components, which makes it easier for the layout of multiple legend components.</p>\n<p>If there have to be too many legend items, <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">horizontally scrollable legend</a> are options to paginate them. Check <a href=\"#legend.type\">legend.type</a> please.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Type of legend. Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;plain&#39;</code>: Simple legend. (default)</li>\n<li><code class=\"codespan\">&#39;scroll&#39;</code>: Scrollable legend. It helps when too many legend items needed to be shown.</li>\n</ul>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n<p>When <code class=\"codespan\">&#39;scroll&#39;</code> used, these options below can be used for detailed configuration:</p>\n<ul>\n<li><a href=\"#legend.scrollDataIndex\">legend.scrollDataIndex</a></li>\n<li><a href=\"#legend.pageButtonItemGap\">legend.pageButtonItemGap</a></li>\n<li><a href=\"#legend.pageButtonGap\">legend.pageButtonGap</a></li>\n<li><a href=\"#legend.pageButtonPosition\">legend.pageButtonPosition</a></li>\n<li><a href=\"#legend.pageFormatter\">legend.pageFormatter</a></li>\n<li><a href=\"#legend.pageIcons\">legend.pageIcons</a></li>\n<li><a href=\"#legend.pageIconColor\">legend.pageIconColor</a></li>\n<li><a href=\"#legend.pageIconInactiveColor\">legend.pageIconInactiveColor</a></li>\n<li><a href=\"#legend.pageIconSize\">legend.pageIconSize</a></li>\n<li><a href=\"#legend.pageTextStyle\">legend.pageTextStyle</a></li>\n<li><a href=\"#legend.animation\">legend.animation</a></li>\n<li><a href=\"#legend.animationDurationUpdate\">legend.animationDurationUpdate</a></li>\n</ul>\n"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"show":{"type":["boolean"],"description":"","default":true},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between legend component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"top":{"type":["string","number"],"description":"<p>Distance between legend component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"right":{"type":["string","number"],"description":"<p>Distance between legend component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"<p>Distance between legend component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"width":{"type":["string","number"],"description":"<p>Width of legend component. Adaptive by default.</p>\n","default":"'auto'"},"height":{"type":["string","number"],"description":"<p>Height of legend component. Adaptive by default.</p>\n","default":"'auto'"},"orient":{"type":["string"],"description":"<p>The layout orientation of legend.</p>\n<p>Options:</p>\n<ul>\n<li>&#39;horizontal&#39;</li>\n<li>&#39;vertical&#39;</li>\n</ul>\n","default":"'horizontal'"},"align":{"type":["string"],"description":"<p>Legend marker and text aligning. By default, it automatically calculates from component location and orientation. When <a href=\"#legend.left\">left</a> value of this component is &#39;right&#39;, and the vertical layout (<a href=\"#legend.orient\">orient</a> is &#39;vertical&#39;), it would be aligned to &#39;right&#39;.</p>\n<p>Option:</p>\n<ul>\n<li>&#39;auto&#39;</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n</ul>\n","default":"'auto'"},"padding":{"type":["number","Array"],"description":"<p>legend space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"itemGap":{"type":["number"],"description":"<p>The distance between each legend, horizontal distance in horizontal layout, and vertical distance in vertical layout.</p>\n","default":10},"itemWidth":{"type":["number"],"description":"<p>Image width of legend symbol.</p>\n","default":25},"itemHeight":{"type":["number"],"description":"<p>Image height of legend symbol.</p>\n","default":14},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for icons (from <code class=\"codespan\">series.symbol</code> or user-defined <code class=\"codespan\">legend.data.icon</code>) in the form of <code class=\"codespan\">path://</code>.</p>\n","default":true},"formatter":{"type":["string","Function"],"description":"<p>Formatter is used to format label of legend, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// using string template, the template variable is legend name {name}\nformatter: &#39;Legend {name}&#39;\n// using callback function\nformatter: function (name) {\n    return &#39;Legend &#39; + name;\n}\n</code></pre>\n","default":null},"selectedMode":{"type":["string","boolean"],"description":"<p>Selected mode of legend, which controls whether series can be toggled displaying by clicking legends. It is enabled by default, and you may set it to be <code class=\"codespan\">false</code> to disable it.</p>\n<p>Besides, it can be set to <code class=\"codespan\">&#39;single&#39;</code> or <code class=\"codespan\">&#39;multiple&#39;</code>, for single selection and multiple selection.</p>\n","default":true},"inactiveColor":{"type":["Color"],"description":"<p>Legend color when not selected.</p>\n","default":"'#ccc'"},"selected":{"type":["Object"],"description":"<p>State table of selected legend.</p>\n<p>example:</p>\n<pre><code>selected: {\n    // selected&#39;series 1&#39;\n    &#39;series 1&#39;: true,\n    // unselected&#39;series 2&#39;\n    &#39;series 2&#39;: false\n}\n</code></pre>"},"textStyle":{"type":["Object"],"description":"<p>Legend text style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"tooltip":{"type":["Object"],"description":"<p>Tooltip configuration for legend tooltip, which is similar to <a href=\"#tooltip\">tooltip</a>.</p>\n"},"icon":{"type":["string"],"description":"<p>Icon of the legend items.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"data":{"type":["Array"],"description":"<p>Data array of legend. An array item is usually a <code class=\"codespan\">name</code> representing string. (If it is a <a href=\"#series-pie\">pie chart</a>, it could also be the <code class=\"codespan\">name</code> of a single data in the pie chart) of a series. Legend component would automatically calculate the color and icon according to series. Special string <code class=\"codespan\">&#39;&#39;</code> (null string) or <code class=\"codespan\">&#39;\\n&#39;</code> (new line string) can be used for a new line.</p>\n<p>If <code class=\"codespan\">data</code> is not specified, it will be auto collected from series. For most of series, it will be collected from <a href=\"#series.name\">series.name</a> or the dimension name specified by <code class=\"codespan\">seriesName</code> of <a href=\"#series.encode\">series.encode</a>. For some types of series like <a href=\"#series-pie\">pie</a> and <a href=\"#series-funnel\">funnel</a>, it will be collected from the name field of <code class=\"codespan\">series.data</code>.</p>\n<p>If you need to set the style for a single item, you may also set the configuration of it. In this case, <code class=\"codespan\">name</code> attribute is used to represent name of <code class=\"codespan\">series</code>.</p>\n<p>Example:</p>\n<pre><code>data: [{\n    name: &#39;series 1&#39;,\n    // compulsorily set icon as a circle\n    icon: &#39;circle&#39;,\n    // set up the text in red\n    textStyle: {\n        color: &#39;red&#39;\n    }\n}]\n</code></pre>","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Name of legend, which should be the <code class=\"codespan\">name</code> value of a certain series. If it is a pie chart, legend name can also be the name of a single data item.</p>\n"},"icon":{"type":["string"],"description":"<p>Icon of the legend.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"textStyle":{"type":["Object"],"description":"<p>Text style of legend.</p>\n"}}}},"backgroundColor":{"type":["Color"],"description":"<p>Background color of legend, which is transparent by default.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>.</p>\n</blockquote>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of legend. Support the same color format as backgroundColor.</p>\n","default":"'#ccc'"},"borderWidth":{"type":["number"],"description":"<p>Border width of legend.</p>\n","default":1},"borderRadius":{"type":["number","Array"],"description":"<p>The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.</p>\n<p>For example:</p>\n<pre><code>borderRadius: 5, // consistently set the size of 4 rounded corners\nborderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n</code></pre>","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n<p><strong>Attention</strong>: This property works only if <code class=\"codespan\">show: true</code> is configured and <code class=\"codespan\">backgroundColor</code> is defined other than <code class=\"codespan\">transparent</code>.</p>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n<p><strong>Attention</strong>: This property works only if <code class=\"codespan\">show: true</code> configured.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n<p><strong>Attention</strong>: This property works only if <code class=\"codespan\">show: true</code> configured.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n<p><strong>Attention</strong>: This property works only if <code class=\"codespan\">show: true</code> configured.</p>\n","default":0},"scrollDataIndex":{"type":["number"],"description":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">&#39;scroll&#39;</code>.</p>\n<p><code class=\"codespan\">dataIndex</code> of the left top most displayed item.</p>\n<p>Although the scrolling of legend items can be controlled by calling <code class=\"codespan\">setOption</code> and specifying this property, we suggest that do not control legend in this way unless necessary (<code class=\"codespan\">setOption</code> might be time-consuming), but just use action <a href=\"api.html#action.legend.legendScroll\" target=\"_blank\">legendScroll</a> to do that.</p>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n","default":0},"pageButtonItemGap":{"type":["number"],"description":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">&#39;scroll&#39;</code>.</p>\n<p>The gap between page buttons and page info text.</p>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n","default":5},"pageButtonGap":{"type":["number"],"description":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">&#39;scroll&#39;</code>.</p>\n<p>The gap between page buttons and legend items.</p>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n","default":null},"pageButtonPosition":{"type":["string"],"description":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">&#39;scroll&#39;</code>.</p>\n<p>The position of page buttons and page info. Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code>: on the left or top.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code>: on the right or bottom.</li>\n</ul>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n","default":"'end'"},"pageFormatter":{"type":["string","Function"],"description":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">&#39;scroll&#39;</code>.</p>\n<p>Page info formatter. It is <code class=\"codespan\">&#39;{current}/{total}&#39;</code> by default, where <code class=\"codespan\">{current}</code> is current page number (start from 1), and <code class=\"codespan\">{total}</code> is the total page number.</p>\n<p>If <code class=\"codespan\">pageFormatter</code> is a function, it should return a string. The parameters is:</p>\n<pre><code class=\"lang-js\">{\n    current: number\n    total: number\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n","default":"'{current}/{total}'"},"pageIcons":{"type":["Object"],"description":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">&#39;scroll&#39;</code>.</p>\n<p>The icons of page buttons.</p>\n","properties":{"horizontal":{"type":["Array"],"description":"<p>The icons of page buttons when <a href=\"#legend.orient\">legend.orient</a> is <code class=\"codespan\">&#39;horizontal&#39;</code>.</p>\n<p>It should be an array, <code class=\"codespan\">[previous page button, next page button]</code>, <code class=\"codespan\">[&#39;M0,0L12,-10L12,10z&#39;, &#39;M0,0L-12,-10L-12,10z&#39;]</code> by default.</p>\n<p>For the each item of the array,</p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n"},"vertical":{"type":["Array"],"description":"<p>The icons of page buttons when <a href=\"#legend.orient\">legend.orient</a> is <code class=\"codespan\">&#39;vertical&#39;</code>.</p>\n<p>It should be an array, <code class=\"codespan\">[previous page button, next page button]</code>, <code class=\"codespan\">[&#39;M0,0L20,0L10,-20z&#39;, &#39;M0,0L20,0L10,20z&#39;]</code> by default.</p>\n<p>For the each item of the array,</p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n"}}},"pageIconColor":{"type":["string"],"description":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">&#39;scroll&#39;</code>.</p>\n<p>The color of page buttons.</p>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n","default":"'#2f4554'"},"pageIconInactiveColor":{"type":["string"],"description":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">&#39;scroll&#39;</code>.</p>\n<p>The color of page buttons when they are inactive.</p>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n","default":"'#aaa'"},"pageIconSize":{"type":["number","Array"],"description":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">&#39;scroll&#39;</code>.</p>\n<p>The size of page buttons. It can be a number, or an array, like <code class=\"codespan\">[10, 3]</code>, represents <code class=\"codespan\">[width, height]</code>.</p>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n","default":15},"pageTextStyle":{"type":["Object"],"description":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">&#39;scroll&#39;</code>.</p>\n<p>The text style of page info.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"#333"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"animation":{"type":["boolean"],"description":"<p>Whether to use animation when page scrolls.</p>\n"},"animationDurationUpdate":{"type":["number"],"description":"<p>Duration of the page scroll animation.</p>\n","default":800},"emphasis":{"type":["Object"],"description":"","properties":{"selectorLabel":{"type":["Object"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.4.0</code></p>\n</blockquote>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"selector":{"type":["boolean","Array"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.4.0</code></p>\n</blockquote>\n<p>The selector button in the legend component. Currently includes both a full selection and an inverse selection. The selector button doesn&#39;t display by default, the user can manually configure it.</p>\n<p>Usage:</p>\n<pre><code class=\"lang-js\">selector: [\n    {\n        type: &#39;all or inverse&#39;,\n        // can be any title you like\n        title: &#39;All&#39;\n    },\n    {\n        type: &#39;inverse&#39;,\n        title: &#39;Inv&#39;\n    }\n]\n\n// or\nselector: true\n\n// or\nselector: [&#39;all&#39;, &#39;inverse&#39;]\n</code></pre>\n","default":false},"selectorLabel":{"type":["Object"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.4.0</code></p>\n</blockquote>\n<p>The text label style of the selector button, which is displayed by default.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"selectorPosition":{"type":["string"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.4.0</code></p>\n</blockquote>\n<p>The position of the selector button, which can be placed at the end or start of the legend component, the corresponding values are <code class=\"codespan\">&#39;end&#39;</code> and <code class=\"codespan\">&#39;start&#39;</code>. By default, when the legend is laid out horizontally, the selector is placed at the end of it, and when the legend is laid out vertically, the selector is placed at the start of it.</p>\n","default":"'auto'"},"selectorItemGap":{"type":["number"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.4.0</code></p>\n</blockquote>\n<p>The gap between the selector button.</p>\n","default":7},"selectorButtonGap":{"type":["number"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.4.0</code></p>\n</blockquote>\n<p>The gap between selector button and legend component.</p>\n","default":10}}},"grid":{"type":["Object"],"description":"<p>Drawing grid in rectangular coordinate. In a single grid, at most two X and Y axes each is allowed. <a href=\"#series-line\">Line chart</a>, <a href=\"#series-bar\">bar chart</a>, and <a href=\"#series-scatter\">scatter chart (bubble chart)</a> can be drawn in grid.</p>\n<p>In ECharts 2.x, there could only be one single grid component at most in a single echarts instance. But in ECharts 3, there is no limitation.</p>\n<p><strong>Following is an example of Anscombe Quartet:</strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=scatter-anscombe-quartet&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"show":{"type":["boolean"],"description":"<p>Whether to show the grid in rectangular coordinate.</p>\n","default":false},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between grid  component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'10%'"},"top":{"type":["string","number"],"description":"<p>Distance between grid  component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":60},"right":{"type":["string","number"],"description":"<p>Distance between grid  component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n","default":"'10%'"},"bottom":{"type":["string","number"],"description":"<p>Distance between grid  component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n","default":60},"width":{"type":["string","number"],"description":"<p>Width of grid  component. Adaptive by default.</p>\n","default":"'auto'"},"height":{"type":["string","number"],"description":"<p>Height of grid  component. Adaptive by default.</p>\n","default":"'auto'"},"containLabel":{"type":["boolean"],"description":"<p>Whether the grid region contains <a href=\"#yAxis.axisLabel\">axis tick label</a> of axis.</p>\n<ul>\n<li>When containLabel is <code class=\"codespan\">false</code>:<ul>\n<li><code class=\"codespan\">grid.left</code> <code class=\"codespan\">grid.right</code> <code class=\"codespan\">grid.top</code> <code class=\"codespan\">grid.bottom</code> <code class=\"codespan\">grid.width</code> <code class=\"codespan\">grid.height</code> decide the location and size of the rectangle that is made of by xAxis and yAxis.</li>\n<li>Setting to <code class=\"codespan\">false</code> will help when multiple grids need to be aligned at their axes.</li>\n</ul>\n</li>\n<li>When containLabel is <code class=\"codespan\">true</code>:<ul>\n<li><code class=\"codespan\">grid.left</code> <code class=\"codespan\">grid.right</code> <code class=\"codespan\">grid.top</code> <code class=\"codespan\">grid.bottom</code> <code class=\"codespan\">grid.width</code> <code class=\"codespan\">grid.height</code> decide the location and size of the rectangle that contains the axes and the labels of the axes.</li>\n<li>Setting to <code class=\"codespan\">true</code> will help when the length of axis labels is dynamic and is hard to approximate. This will avoid labels from overflowing the container or overlapping other components.</li>\n</ul>\n</li>\n</ul>\n","default":false},"backgroundColor":{"type":["Color"],"description":"<p>Background color of grid, which is transparent by default.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>.</p>\n</blockquote>\n<p><strong>Attention</strong>: Works only if <code class=\"codespan\">show: true</code> is set.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of grid. Support the same color format as backgroundColor.</p>\n<p><strong>Attention</strong>: Works only if <code class=\"codespan\">show: true</code> is set.</p>\n","default":"'#ccc'"},"borderWidth":{"type":["number"],"description":"<p>Border width of grid.</p>\n<p><strong>Attention</strong>: Works only if <code class=\"codespan\">show: true</code> is set.</p>\n","default":1},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n<p><strong>Attention</strong>: This property works only if <code class=\"codespan\">show: true</code> is configured and <code class=\"codespan\">backgroundColor</code> is defined other than <code class=\"codespan\">transparent</code>.</p>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n<p><strong>Attention</strong>: This property works only if <code class=\"codespan\">show: true</code> configured.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n<p><strong>Attention</strong>: This property works only if <code class=\"codespan\">show: true</code> configured.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n<p><strong>Attention</strong>: This property works only if <code class=\"codespan\">show: true</code> configured.</p>\n","default":0},"tooltip":{"type":["Object"],"description":"<p>tooltip settings in the coordinate system component.</p>\n<hr>\n<p><strong>General Introduction:</strong></p>\n<p>tooltip can be configured on different places:</p>\n<ul>\n<li><p>Configured on global: <a href=\"#tooltip\">tooltip</a></p>\n</li>\n<li><p>Configured in a coordinate system: <a href=\"#grid.tooltip\">grid.tooltip</a>, <a href=\"#polar.tooltip\">polar.tooltip</a>, <a href=\"#single.tooltip\">single.tooltip</a></p>\n</li>\n<li><p>Configured in a series: <a href=\"#series.tooltip\">series.tooltip</a></p>\n</li>\n<li><p>Configured in each item of <code class=\"codespan\">series.data</code>: <a href=\"#series.data.tooltip\">series.data.tooltip</a></p>\n</li>\n</ul>\n<hr>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the tooltip component, including tooltip floating layer and <a href=\"#tooltip.axisPointer\">axisPointer</a>.</p>\n","default":true},"trigger":{"type":["string"],"description":"<p>Type of triggering.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;item&#39;</code></p>\n<p>  Triggered by data item, which is mainly used for charts that don&#39;t have a category axis like scatter charts or pie charts.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;axis&#39;</code></p>\n<p>  Triggered by axes, which is mainly used for charts that have category axes, like bar charts or line charts.</p>\n<p> ECharts 2.x only supports axis trigger for category axis. In ECharts 3, it is supported for all types of axes in <a href=\"#grid\">grid</a> or <a href=\"#polar\">polar</a>. Also, you may assign axis with <a href=\"#tooltip.axisPointer.axis\">axisPointer.axis</a>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;none&#39;</code></p>\n<p>  Trigger nothing.</p>\n</li>\n</ul>\n","default":"'item'"},"axisPointer":{"type":["Object"],"description":"<p>Configuration item for axisPointer.</p>\n<p><code class=\"codespan\">tooltip.axisPointer</code> is like syntactic sugar of axisPointer settings on axes (for example, <a href=\"#xAxis.axisPointer\">xAxis.axisPointer</a> or <a href=\"#angleAxis.axisPointer\">angleAxis.axisPointer</a>). More detailed features can be configured on <code class=\"codespan\">someAxis.axisPointer</code>. But in common cases, using <code class=\"codespan\">tooltip.axisPointer</code> is more convenient.</p>\n<blockquote>\n<p><strong>Notice:</strong> configurations of <code class=\"codespan\">tooltip.axisPointer</code> has lower priority than that of <code class=\"codespan\">someAxis.axisPointer</code>.</p>\n</blockquote>\n<hr>\n<p><code class=\"codespan\">axisPointer</code> is a tool for displaying reference line and axis value under mouse pointer.</p>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/candlestick-axisPointer&edit=1&reset=1\" width=\"600\" height=\"450\"><iframe />\n\n\n<p>In the demo above, <a href=\"#axisPointer.link\">axisPointer.link</a> is used to link axisPointer from different coordinate systems.</p>\n<p><code class=\"codespan\">axisPointer</code> can also be used on touch device, where user can drag the button to move the reference line and label.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-tooltip-touch&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n<p>In the cases that more than one axis exist, axisPointer helps to look inside the data.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=multiple-y-axis&edit=1&reset=1\" width=\"600\" height=\"300\"><iframe />\n\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=multiple-x-axis&edit=1&reset=1\" width=\"600\" height=\"300\"><iframe />\n\n\n\n<hr>\n<blockquote>\n<p><strong>Notice:</strong>\nGenerally, axisPointers is configured in each axes who need them (for example <a href=\"#xAxis.axisPointer\">xAxis.axisPointer</a>), or configured in <code class=\"codespan\">tooltip</code> (for example <a href=\"#tooltip.axisPointer\">tooltip.axisPointer</a>).</p>\n</blockquote>\n<blockquote>\n<p>But these configurations can only be configured in global axisPointer:\n<a href=\"#axisPointer.triggerOn\">axisPointer.triggerOn</a>, <a href=\"#axisPointer.link\">axisPointer.link</a>.</p>\n</blockquote>\n<hr>\n<hr>\n<p><strong>How to display axisPointer:</strong></p>\n<p>In <a href=\"#grid\">cartesian (grid)</a> and <a href=\"#single\">polar](~polar) and (single axis</a>, each axis has its own axisPointer.</p>\n<p>Those axisPointer will not be displayed by default, utill configured as follows:</p>\n<ul>\n<li><p>Set <code class=\"codespan\">someAxis.axisPointer.show</code> (like <a href=\"#xAxis.axisPointer.show\">xAxis.axisPointer.show</a>) as <code class=\"codespan\">true</code>. Then axisPointer of this axis will be displayed.</p>\n</li>\n<li><p>Set <a href=\"#tooltip.trigger\">tooltip.trigger</a> as <code class=\"codespan\">&#39;axis&#39;</code>, or set <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> as <code class=\"codespan\">&#39;cross&#39;</code>. Then coordinate system will automatically chose the axes who will display their axisPointers. (<a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> can be used to change the choice.) Notice, <code class=\"codespan\">axis.axisPointer</code> will override <code class=\"codespan\">tooltip.axisPointer</code> settings.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to display the label of axisPointer:</strong></p>\n<p>The label of axisPointer will not be displayed by default(namely, only reference line will be displayed by default), utill configured as follows:</p>\n<ul>\n<li><p>Set <code class=\"codespan\">someAxis.axisPointer.label.show</code> (for example <a href=\"#xAxis.axisPointer.show\">xAxis.axisPointer.label.show</a>) as <code class=\"codespan\">true</code>. Then the label of the axisPointer will be displayed.</p>\n</li>\n<li><p>Set <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> as  <code class=\"codespan\">&#39;cross&#39;</code>. Then the label of the crossed axisPointers will be displayed.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to configure axisPointer on touch device:</strong></p>\n<p>Set <code class=\"codespan\">someAxis.axisPointer.handle.show</code> (for example <a href=\"#xAxis.axisPointer.handle.show\">xAxis.axisPointer.handle.show</a> as <code class=\"codespan\">true</code>. Then the button for dragging will be displayed. (This feature is not supported on polar).</p>\n<p><strong>Notice:</strong>\nIf tooltip does not work well in this case, try to set<a href=\"#tooltip.triggerOn\">tooltip.triggerOn</a> as <code class=\"codespan\">&#39;none&#39;</code> (for the effect: show tooltip when finger holding on the button, and hide tooltip after finger left the button), or set <a href=\"#tooltip.alwaysShowContent\">tooltip.alwaysShowContent</a> as <code class=\"codespan\">true</code> (then tooltip will always be displayed).</p>\n<p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>.</p>\n<hr>\n<p><strong>Snap to point</strong></p>\n<p>In value axis and time axis, if <a href=\"#xAxis.axisPointer.snap\">snap</a> is set as true, axisPointer will snap to point automatically.</p>\n<hr>\n","properties":{"type":{"type":["string"],"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;line&#39;</code> line indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;shadow&#39;</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;none&#39;</code> no indicator displayed.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;cross&#39;</code> crosshair indicator, which is actually the shortcut of enable two axisPointers of two orthometric axes.</p>\n</li>\n</ul>\n","default":"'line'"},"axis":{"type":["string"],"description":"<p>The coordinate axis, which could be <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, <code class=\"codespan\">&#39;radius&#39;</code>, or <code class=\"codespan\">&#39;angle&#39;</code>. By default, each coordinate system will automatically chose the axes whose will display its axisPointer (category axis or time axis is used by default).</p>\n","default":"'auto'"},"snap":{"type":["boolean"],"description":"<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n"},"z":{"type":["number"],"description":"<p>z value, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n"},"label":{"type":["Object"],"description":"<p>label of axisPointer</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label. Label will not show by default. But if <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as  <code class=\"codespan\">&#39;cross&#39;</code>, label will be displayed automatically.</p>\n","default":false},"precision":{"type":["number","string"],"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code class=\"codespan\">&#39;2&#39;</code>, which indicates that two decimal fractions are reserved.</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"<p>The formatter of label.</p>\n<p>If set as <code class=\"codespan\">string</code>, for example it can be: <code class=\"codespan\">formatter: &#39;some text {value} some text</code>, where <code class=\"codespan\">{value}</code> will be replaced by axis value automatically.</p>\n<p>If set as <code class=\"codespan\">function</code>:</p>\n<p><strong>Parameters:</strong></p>\n<p><code class=\"codespan\">{Object}</code> params: Including fields as follows:</p>\n<p><code class=\"codespan\">{Object}</code> params.value: current value of this axis. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;category&#39;</code>, it is one of the value in <code class=\"codespan\">axis.data</code>. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;time&#39;</code>, it is a timestamp.</p>\n<p><code class=\"codespan\">{Array.&lt;Object&gt;}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<p><code class=\"codespan\">{string}</code> params.axisDimension: The dimension name of the axis. For example, in catesian it will be <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, and in polar it will be <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code>.</p>\n<p><code class=\"codespan\">{number}</code> params.axisIndex: The index of the axis, for example, <code class=\"codespan\">0</code>,<code class=\"codespan\">1</code>, <code class=\"codespan\">2</code>, ...</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n    axisDim: &#39;x&#39;, // &#39;x&#39;, &#39;y&#39;, &#39;angle&#39;, &#39;radius&#39;, &#39;single&#39;\n    axisId: &#39;xxx&#39;,\n    axisName: &#39;xxx&#39;,\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: &#39;text of value&#39;\n}\n</code></pre>\n<p><strong>Return:</strong></p>\n<p>The string to be displayed.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n    // If axis.type is &#39;time&#39;\n    return &#39;some text&#39; + echarts.format.formatTime(params.value);\n}\n</code></pre>\n","default":null},"margin":{"type":["boolean"],"description":"<p>Distance between label and axis.</p>\n","default":3},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"padding":{"type":["string","Array"],"description":"<p>axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"<p>Border color of label.</p>\n","default":null},"borderWidth":{"type":["string"],"description":"<p>Border width of label.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"lineStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;line&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"shadowStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;shadow&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"crossStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;cross&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"dashed"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":200},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"exponentialOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"position":{"type":["string","Array"],"description":"<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},"xAxis":{"type":["Object"],"description":"<p>The x axis in cartesian(rectangular) coordinate. Usually a single grid component can place at most 2 x axis, one on the bottom and another on the top. <a href=\"#xAxis.offset\">offset</a> can be used to avoid overlap when you need to put more than two x axis.</p>\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis from showing.</p>\n","default":true},"gridIndex":{"type":["number"],"description":"<p>The index of grid which the x axis belongs to. Defaults to be in the first grid.</p>\n","default":0},"position":{"type":["string"],"description":"<p>The position of x axis.</p>\n<p>options:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>The first x axis in grid defaults to be on the bottom of the grid, and the second x axis is on the other side against the first x axis.</p>\n"},"offset":{"type":["number"],"description":"<p>Offset of x axis relative to default position. Useful when multiple x axis has same <a href=\"#xAxis.position\">position</a> value.</p>\n","default":0},"type":{"type":["string"],"description":"<p>Type of axis.</p>\n<p>Option:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;value&#39;</code>\n  Numerical axis, suitable for continuous data.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;category&#39;</code>\n  Category axis, suitable for discrete category data. Category data can be auto retrieved from <a href=\"#series.data\">series.data</a> or <a href=\"#dataset.source\">dataset.source</a>, or can be specified via <a href=\"#xAxis.data\">xAxis.data</a>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;time&#39;</code>\n  Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;log&#39;</code>\n  Log axis, suitable for log data.</p>\n</li>\n</ul>\n","default":"'category'"},"name":{"type":["string"],"description":"<p>Name of axis.</p>\n"},"nameLocation":{"type":["string"],"description":"<p>Location of axis name.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> or <code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;end&#39;</code></li>\n</ul>\n","default":"'end'"},"nameTextStyle":{"type":["Object"],"description":"<p>Text style of axis name.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Color of axis name uses <a href=\"#xAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"fontStyle":{"type":["string"],"description":"<p>axis name font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p>axis name font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>axis name font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>axis name font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n\n","default":0}}}}}}},"nameGap":{"type":["number"],"description":"<p>Gap between axis name and axis line.</p>\n","default":15},"nameRotate":{"type":["number"],"description":"<p>Rotation of axis name.</p>\n","default":null},"inverse":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to invert the axis.\nThis is a new option available from Echarts 3 and newer.</p>\n","default":false},"boundaryGap":{"type":["boolean","Array"],"description":"<p>The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different.</p>\n<p>The <code class=\"codespan\">boundaryGap</code> of category axis can be set to either <code class=\"codespan\">true</code> or <code class=\"codespan\">false</code>. Default value is set to be <code class=\"codespan\">true</code>, in which case <a href=\"#xAxis.axisTick\">axisTick</a> is served only as a separation line, and labels and data appear only in the center part of two <a href=\"#xAxis.axisTick\">axis ticks</a>, which is called <em>band</em>.</p>\n<p>For non-category axis, including time, numerical value, and log axes, <code class=\"codespan\">boundaryGap</code> is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting <a href=\"#xAxis.min\">min</a> and <a href=\"#xAxis.max\">max</a>.\n<strong>Example: </strong></p>\n<pre><code class=\"lang-js\">boundaryGap: [&#39;20%&#39;, &#39;20%&#39;]\n</code></pre>\n"},"min":{"type":["number","string","Function"],"description":"<p>The minimun value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">&#39;dataMin&#39;</code> so that the minimum value on this axis is set to be the minimum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class=\"codespan\">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class=\"codespan\">2</code> represents <code class=\"codespan\">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class=\"codespan\">-3</code>.</p>\n<p>If <code class=\"codespan\">min</code> is specified as a function, it should return a min value, like:</p>\n<pre><code class=\"lang-js\">min: function (value) {\n    return value.min - 20;\n}\n</code></pre>\n<p><code class=\"codespan\">value</code> is an object, containing the <code class=\"codespan\">min</code> value and <code class=\"codespan\">max</code> value of the data. This function should return the min value of axis, or return <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> to make echarts use the auto calculated min value (<code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> return is only supported since <code class=\"codespan\">v4.8.0</code>).</p>\n","default":null},"max":{"type":["number","string","Function"],"description":"<p>The maximum value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">&#39;dataMax&#39;</code> so that the minimum value on this axis is set to be the maximum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class=\"codespan\">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class=\"codespan\">2</code> represents <code class=\"codespan\">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class=\"codespan\">-3</code>.</p>\n<p>If <code class=\"codespan\">max</code> is specified as a function, it should return a max value, like:</p>\n<pre><code class=\"lang-js\">max: function (value) {\n    return value.max - 20;\n}\n</code></pre>\n<p><code class=\"codespan\">value</code> is an object, containing the <code class=\"codespan\">min</code> value and <code class=\"codespan\">max</code> value of the data. This function should return the max value of axis, or return <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> to make echarts use the auto calculated max value (<code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> return is only supported since <code class=\"codespan\">v4.8.0</code>).</p>\n","default":null},"scale":{"type":["boolean"],"description":"<p>It is available only in numerical axis, i.e., <a href=\"#xAxis.type\">type</a>: &#39;value&#39;.</p>\n<p>It specifies whether not to contain zero position of axis compulsively. When it is set to be <code class=\"codespan\">true</code>, the axis may not contain zero position, which is useful in the scatter chart for both value axes.</p>\n<p>This configuration item is unavailable when the <a href=\"#xAxis.min\">min</a> and <a href=\"#xAxis.max\">max</a> are set.</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.</p>\n<p>This is unavailable for category axis.</p>\n","default":5},"minInterval":{"type":["number"],"description":"<p>Minimum gap between split lines.</p>\n<p>For example, it can be set to be <code class=\"codespan\">1</code> to make sure axis label is show as integer.</p>\n<pre><code class=\"lang-js\">{\n    minInterval: 1\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#xAxis.type\">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n","default":0},"maxInterval":{"type":["number"],"description":"<p>Maximum gap between split lines.</p>\n<p>For example, in time axis (<a href=\"#xAxis.type\">type</a> is &#39;time&#39;), it can be set to be <code class=\"codespan\">3600 * 24 * 1000</code> to make sure that the gap between axis labels is less than or equal to one day.</p>\n<pre><code class=\"lang-js\">{\n    maxInterval: 3600 * 1000 * 24\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#xAxis.type\">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n"},"interval":{"type":["number"],"description":"<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href=\"#xAxis.splitNumber\">splitNumber</a> is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with <a href=\"#xAxis.min\">min</a> and <a href=\"#xAxis.max\">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situations.</p>\n<p>This is unavailable for category axis. Timestamp should be passed for <a href=\"#xAxis.type\">type</a>: &#39;time&#39; axis. Logged value should be passed for <a href=\"#xAxis.type\">type</a>: &#39;log&#39; axis.</p>\n"},"logBase":{"type":["number"],"description":"<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#xAxis.type\">type</a>: &#39;log&#39;.</p>\n","default":10},"silent":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code>, to prevent interaction with the axis.</p>\n","default":false},"triggerEvent":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to enable triggering events.</p>\n<p>Parameters of the event include:</p>\n<pre><code class=\"lang-js\">{\n    // Component type: xAxis, yAxis, radiusAxis, angleAxis\n    // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n    componentType: string,\n    // Value on axis before being formatted.\n    // Click on value label to trigger event.\n    value: &#39;&#39;,\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: &#39;&#39;\n}\n</code></pre>\n","default":false},"axisLine":{"type":["Object"],"description":"<p>Settings related to axis line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n","default":true},"onZero":{"type":["boolean"],"description":"<p>Specifies whether X or Y axis lies on the other&#39;s origin position, where value is 0 on axis. Valid only if the other axis is of value type, and contains 0 value.</p>\n","default":true},"onZeroAxisIndex":{"type":["number"],"description":"<p>When mutiple axes exists, this option can be used to specify which axis can be &quot;onZero&quot; to.</p>\n"},"symbol":{"type":["string","Array"],"description":"<p>Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It&#39;s set to be <code class=\"codespan\">&#39;none&#39;</code> by default, meaning no arrow for either end. If it is set to be <code class=\"codespan\">&#39;arrow&#39;</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code class=\"codespan\">[&#39;none&#39;, &#39;arrow&#39;]</code>.</p>\n","default":"'none'"},"symbolSize":{"type":["Array"],"description":"<p>Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.</p>\n","default":"[10, 15]"},"symbolOffset":{"type":["Array","number"],"description":"<p>Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>line styleLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#333'"},"width":{"type":["number"],"description":"<p>line style line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>line style line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"axisTick":{"type":["Object"],"description":"<p>Settings related to axis tick.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis tick from showing.</p>\n","default":true},"alignWithLabel":{"type":["boolean"],"description":"<p>Align axis tick with label, which is available only when <code class=\"codespan\">boundaryGap</code> is set to be <code class=\"codespan\">true</code> in category axis. See the following picture:</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/axis-align-with-label.png\"></p>\n","default":false},"interval":{"type":["number","Function"],"description":"<p>Interval of axisTick, which is available in category axis.  is set to be the same as <a href=\"#xAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> so the axis labels face the <code class=\"codespan\">inside</code> direction.</p>\n","default":false},"length":{"type":["number"],"description":"<p>The length of the axis tick.</p>\n","default":5},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Color of axis label is set to be <a href=\"#xAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"width":{"type":["number"],"description":"<p>axisTick line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>axisTick line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"minorTick":{"type":["Object"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.6.0</code></p>\n</blockquote>\n<p>Settings related minor ticks.</p>\n<p>Note: <code class=\"codespan\">minorTick</code> is not available in the <code class=\"codespan\">category</code> type axis.</p>\n<p>Examples:</p>\n<p>1) Using minor ticks in function plotting.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-function&edit=1&reset=1\" width=\"600\" height=\"350\"><iframe />\n\n\n<p>2) Using minor ticks in log axis.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-log&edit=1&reset=1\" width=\"600\" height=\"350\"><iframe />\n\n\n","properties":{"show":{"type":["boolean"],"description":"<p>If show minor ticks.</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>Number of interval splited by minor ticks.</p>\n","default":5},"length":{"type":["number"],"description":"<p>Length of minor ticks lines。</p>\n","default":3},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Style configuration of minor ticks lines <a href=\"#xAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。</p>\n"},"width":{"type":["number"],"description":"<p>minorTick line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>minorTick line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"axisLabel":{"type":["Object"],"description":"<p>Settings related to axis label.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis label from appearing.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>Interval of Axis label, which is available in category axis. </p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> so the axis labels face the <code class=\"codespan\">inside</code> direction.</p>\n","default":false},"rotate":{"type":["number"],"description":"<p>Rotation degree of axis label, which is especially useful when there is no enough space for category axis.</p>\n<p>Rotation degree is from -90 to 90.</p>\n","default":0},"margin":{"type":["number"],"description":"<p>The margin between the axis label and the axis line.</p>\n","default":8},"formatter":{"type":["string","Function"],"description":"<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Use string template; template variable is the default label of axis {value}\nformatter: &#39;{value} kg&#39;\n\n// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (idx === 0) {\n        texts.unshift(date.getYear());\n    }\n    return texts.join(&#39;/&#39;);\n}\n</code></pre>\n","default":null},"showMinLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the min tick. Optional values: <code class=\"codespan\">true</code>, <code class=\"codespan\">false</code>, <code class=\"codespan\">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.</p>\n","default":null},"showMaxLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the max tick. Optional values: <code class=\"codespan\">true</code>, <code class=\"codespan\">false</code>, <code class=\"codespan\">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.</p>\n","default":null},"color":{"type":["Color","Function"],"description":"<p>Color of axis label is set to be <a href=\"#xAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class=\"lang-js\">(val: string) =&gt; Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class=\"lang-js\">textStyle: {\n    color: function (value, index) {\n        return value &gt;= 0 ? &#39;green&#39; : &#39;red&#39;;\n    }\n}\n</code></pre>\n"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n\n","default":0}}}}}}},"splitLine":{"type":["Object"],"description":"<p>Split line of axis in <a href=\"#grid\">grid</a> area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the splitLine from showing.\n<code class=\"codespan\">value</code> type axes are shown by default, while <code class=\"codespan\">category</code> type axes are hidden.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>Interval of Axis splitLine, which is available in category axis.  is set to be the same as <a href=\"#xAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Array","string"],"description":"<p>The color of the splitLine, which could be set separately.</p>\n<p>SplitLine color could also be set in color array, which the split lines would take as their colors in turns.</p>\n<p>Example:</p>\n<pre><code>splitLine: {\n    lineStyle: {\n        // Dark and light colors will be used in turns\n        color: [&#39;#aaa&#39;, &#39;#ddd&#39;]\n    }\n}\n</code></pre>","default":"['#ccc']"},"width":{"type":["number"],"description":"<p>splitLine line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>splitLine line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"minorSplitLine":{"type":["Object"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.6.0</code></p>\n</blockquote>\n<p>Minor split lines of axis in the <a href=\"#grid\">grid</a> area。It will align to the <a href=\"#xAxis.minorTick\">minorTick</a></p>\n","properties":{"show":{"type":["boolean"],"description":"<p>If show minor split lines.</p>\n","default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>minorSplitLineLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#eee'"},"width":{"type":["number"],"description":"<p>minorSplitLine line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>minorSplitLine line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"splitArea":{"type":["Object"],"description":"<p>Split area of axis in <a href=\"#grid\">grid</a> area, not shown by default.</p>\n","properties":{"interval":{"type":["number","Function"],"description":"<p>Interval of Axis splitArea, which is available in category axis.  is set to be the same as <a href=\"#xAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to show the splitArea.</p>\n","default":false},"areaStyle":{"type":["Object"],"description":"<p>Split area style.</p>\n","properties":{"color":{"type":["Array"],"description":"<p>Color of split area.\nSplitArea color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.</p>\n","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Category data, available in <a href=\"#xAxis.type\">type</a>: &#39;category&#39; axis.</p>\n<p>If <a href=\"#xAxis.type\">type</a> is not specified, but <code class=\"codespan\">axis.data</code> is specified, the <a href=\"#xAxis.type\">type</a> is auto set as <code class=\"codespan\">&#39;category&#39;</code>.</p>\n<p>If <a href=\"#xAxis.type\">type</a> is specified as <code class=\"codespan\">&#39;category&#39;</code>, but <code class=\"codespan\">axis.data</code> is not specified, <code class=\"codespan\">axis.data</code> will be auto collected from <a href=\"#series.data\">series.data</a>. It brings convenience, but we should notice that <code class=\"codespan\">axis.data</code> provides then value range of the <code class=\"codespan\">&#39;category&#39;</code> axis. If  it is auto collected from <a href=\"#series.data\">series.data</a>, Only the values appearing in <a href=\"#series.data\">series.data</a> can be collected. For example, if <a href=\"#series.data\">series.data</a> is empty, nothing will be collected.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Name list of all categories\ndata: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n// Each item could also be a specific configuration item.\n// In this case, `value` is used as the category name.\ndata: [{\n    value: &#39;Monday&#39;,\n    // Highlight Monday\n    textStyle: {\n        fontSize: 20,\n        color: &#39;red&#39;\n    }\n}, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n</code></pre>\n","items":{"type":"Object","properties":{"value":{"type":["string"],"description":"<p>Name of a category.</p>\n"},"textStyle":{"type":["Object"],"description":"<p>Text style of the category.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}},"axisPointer":{"type":["Object"],"description":"<p>axisPointer settings on the axis.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>axisPointer will not be displayed by default. But if <a href=\"#tooltip.trigger\">tooltip.trigger</a> is set as <code class=\"codespan\">&#39;axis&#39;</code> or <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as  <code class=\"codespan\">&#39;cross&#39;</code>, axisPointer will be displayed automatically. Each coordinate system will automatically chose the axes whose will display its axisPointer. <a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> can be used to change the choice.</p>\n","default":false},"type":{"type":["string"],"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;line&#39;</code> line indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;shadow&#39;</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;none&#39;</code> no indicator displayed.</p>\n</li>\n</ul>\n","default":"'line'"},"snap":{"type":["boolean"],"description":"<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n"},"z":{"type":["number"],"description":"<p>z value, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n"},"label":{"type":["Object"],"description":"<p>label of axisPointer</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label. Label will not show by default. But if <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as  <code class=\"codespan\">&#39;cross&#39;</code>, label will be displayed automatically.</p>\n","default":false},"precision":{"type":["number","string"],"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code class=\"codespan\">&#39;2&#39;</code>, which indicates that two decimal fractions are reserved.</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"<p>The formatter of label.</p>\n<p>If set as <code class=\"codespan\">string</code>, for example it can be: <code class=\"codespan\">formatter: &#39;some text {value} some text</code>, where <code class=\"codespan\">{value}</code> will be replaced by axis value automatically.</p>\n<p>If set as <code class=\"codespan\">function</code>:</p>\n<p><strong>Parameters:</strong></p>\n<p><code class=\"codespan\">{Object}</code> params: Including fields as follows:</p>\n<p><code class=\"codespan\">{Object}</code> params.value: current value of this axis. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;category&#39;</code>, it is one of the value in <code class=\"codespan\">axis.data</code>. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;time&#39;</code>, it is a timestamp.</p>\n<p><code class=\"codespan\">{Array.&lt;Object&gt;}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<p><code class=\"codespan\">{string}</code> params.axisDimension: The dimension name of the axis. For example, in catesian it will be <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, and in polar it will be <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code>.</p>\n<p><code class=\"codespan\">{number}</code> params.axisIndex: The index of the axis, for example, <code class=\"codespan\">0</code>,<code class=\"codespan\">1</code>, <code class=\"codespan\">2</code>, ...</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n    axisDim: &#39;x&#39;, // &#39;x&#39;, &#39;y&#39;, &#39;angle&#39;, &#39;radius&#39;, &#39;single&#39;\n    axisId: &#39;xxx&#39;,\n    axisName: &#39;xxx&#39;,\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: &#39;text of value&#39;\n}\n</code></pre>\n<p><strong>Return:</strong></p>\n<p>The string to be displayed.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n    // If axis.type is &#39;time&#39;\n    return &#39;some text&#39; + echarts.format.formatTime(params.value);\n}\n</code></pre>\n","default":null},"margin":{"type":["boolean"],"description":"<p>Distance between label and axis.</p>\n","default":3},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"padding":{"type":["string","Array"],"description":"<p>axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"<p>Border color of label.</p>\n","default":null},"borderWidth":{"type":["string"],"description":"<p>Border width of label.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"lineStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;line&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"shadowStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;shadow&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"triggerTooltip":{"type":["boolean"],"description":"<p>Whether to trigger tooltip.</p>\n","default":true},"value":{"type":["number"],"description":"<p>current value. When using <a href=\"xAxisPointer.handle\" target=\"_blank\">axisPointer.handle</a>, <code class=\"codespan\">value</code> can be set to define the initail position of axisPointer.</p>\n","default":null},"status":{"type":["boolean"],"description":"<p>Current status, can be <code class=\"codespan\">&#39;show&#39;</code> 和 <code class=\"codespan\">&#39;hide&#39;</code>.</p>\n"},"handle":{"type":["Object"],"description":"<p>A button used to drag axisPointer. This feature is applicable in touch device. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set to <code class=\"codespan\">true</code> to use handle.</p>\n","default":false},"icon":{"type":["*"],"description":"<p>The icon of the handle.</p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/axisPointer-handle-image&amp;edit=1&amp;reset=1\" target=\"_blank\">example of using image</a></p>\n"},"size":{"type":["number","Array"],"description":"<p>The size of the handle, which can be set as a single value or an array (<code class=\"codespan\">[width, height]</code>).</p>\n","default":45},"margin":{"type":["number"],"description":"<p>Distance from handle center to axis.</p>\n","default":50},"color":{"type":["string"],"description":"<p>The color of the handle.</p>\n","default":"'#333'"},"throttle":{"type":["number"],"description":"<p>Throttle rate of trigger view update when dragging handle, in ms. Increase the value to improve performance, but decrease the experience.</p>\n","default":40},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":2},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}}}},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in x axis.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in x axis, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":0}}},"yAxis":{"type":["Object"],"description":"<p>The y axis in cartesian(rectangular) coordinate. Usually a single grid component can place at most 2 y axis, one on the left and another on the right. <a href=\"#yAxis.offset\">offset</a> can be used to avoid overlap when you need to put more than two y axis.</p>\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis from showing.</p>\n","default":true},"gridIndex":{"type":["number"],"description":"<p>The index of grid which the y axis belongs to. Defaults to be in the first grid.</p>\n","default":0},"position":{"type":["string"],"description":"<p>the position of y axis.</p>\n<p>options:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>The first y axis in grid defaults to be the left (<code class=\"codespan\">&#39;left&#39;</code>)  of the grid, and the second y axis is on the other side against the first y axis.</p>\n"},"offset":{"type":["number"],"description":"<p>Offset of y axis relative to default position. Useful when multiple y axis has same <a href=\"#yAxis.position\">position</a> value.</p>\n","default":0},"type":{"type":["string"],"description":"<p>Type of axis.</p>\n<p>Option:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;value&#39;</code>\n  Numerical axis, suitable for continuous data.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;category&#39;</code>\n  Category axis, suitable for discrete category data. Category data can be auto retrieved from <a href=\"#series.data\">series.data</a> or <a href=\"#dataset.source\">dataset.source</a>, or can be specified via <a href=\"#yAxis.data\">yAxis.data</a>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;time&#39;</code>\n  Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;log&#39;</code>\n  Log axis, suitable for log data.</p>\n</li>\n</ul>\n","default":"'value'"},"name":{"type":["string"],"description":"<p>Name of axis.</p>\n"},"nameLocation":{"type":["string"],"description":"<p>Location of axis name.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> or <code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;end&#39;</code></li>\n</ul>\n","default":"'end'"},"nameTextStyle":{"type":["Object"],"description":"<p>Text style of axis name.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Color of axis name uses <a href=\"#yAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"fontStyle":{"type":["string"],"description":"<p>axis name font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p>axis name font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>axis name font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>axis name font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n\n","default":0}}}}}}},"nameGap":{"type":["number"],"description":"<p>Gap between axis name and axis line.</p>\n","default":15},"nameRotate":{"type":["number"],"description":"<p>Rotation of axis name.</p>\n","default":null},"inverse":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to invert the axis.\nThis is a new option available from Echarts 3 and newer.</p>\n","default":false},"boundaryGap":{"type":["boolean","Array"],"description":"<p>The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different.</p>\n<p>The <code class=\"codespan\">boundaryGap</code> of category axis can be set to either <code class=\"codespan\">true</code> or <code class=\"codespan\">false</code>. Default value is set to be <code class=\"codespan\">true</code>, in which case <a href=\"#yAxis.axisTick\">axisTick</a> is served only as a separation line, and labels and data appear only in the center part of two <a href=\"#yAxis.axisTick\">axis ticks</a>, which is called <em>band</em>.</p>\n<p>For non-category axis, including time, numerical value, and log axes, <code class=\"codespan\">boundaryGap</code> is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting <a href=\"#yAxis.min\">min</a> and <a href=\"#yAxis.max\">max</a>.\n<strong>Example: </strong></p>\n<pre><code class=\"lang-js\">boundaryGap: [&#39;20%&#39;, &#39;20%&#39;]\n</code></pre>\n"},"min":{"type":["number","string","Function"],"description":"<p>The minimun value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">&#39;dataMin&#39;</code> so that the minimum value on this axis is set to be the minimum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class=\"codespan\">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class=\"codespan\">2</code> represents <code class=\"codespan\">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class=\"codespan\">-3</code>.</p>\n<p>If <code class=\"codespan\">min</code> is specified as a function, it should return a min value, like:</p>\n<pre><code class=\"lang-js\">min: function (value) {\n    return value.min - 20;\n}\n</code></pre>\n<p><code class=\"codespan\">value</code> is an object, containing the <code class=\"codespan\">min</code> value and <code class=\"codespan\">max</code> value of the data. This function should return the min value of axis, or return <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> to make echarts use the auto calculated min value (<code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> return is only supported since <code class=\"codespan\">v4.8.0</code>).</p>\n","default":null},"max":{"type":["number","string","Function"],"description":"<p>The maximum value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">&#39;dataMax&#39;</code> so that the minimum value on this axis is set to be the maximum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class=\"codespan\">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class=\"codespan\">2</code> represents <code class=\"codespan\">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class=\"codespan\">-3</code>.</p>\n<p>If <code class=\"codespan\">max</code> is specified as a function, it should return a max value, like:</p>\n<pre><code class=\"lang-js\">max: function (value) {\n    return value.max - 20;\n}\n</code></pre>\n<p><code class=\"codespan\">value</code> is an object, containing the <code class=\"codespan\">min</code> value and <code class=\"codespan\">max</code> value of the data. This function should return the max value of axis, or return <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> to make echarts use the auto calculated max value (<code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> return is only supported since <code class=\"codespan\">v4.8.0</code>).</p>\n","default":null},"scale":{"type":["boolean"],"description":"<p>It is available only in numerical axis, i.e., <a href=\"#yAxis.type\">type</a>: &#39;value&#39;.</p>\n<p>It specifies whether not to contain zero position of axis compulsively. When it is set to be <code class=\"codespan\">true</code>, the axis may not contain zero position, which is useful in the scatter chart for both value axes.</p>\n<p>This configuration item is unavailable when the <a href=\"#yAxis.min\">min</a> and <a href=\"#yAxis.max\">max</a> are set.</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.</p>\n<p>This is unavailable for category axis.</p>\n","default":5},"minInterval":{"type":["number"],"description":"<p>Minimum gap between split lines.</p>\n<p>For example, it can be set to be <code class=\"codespan\">1</code> to make sure axis label is show as integer.</p>\n<pre><code class=\"lang-js\">{\n    minInterval: 1\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#yAxis.type\">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n","default":0},"maxInterval":{"type":["number"],"description":"<p>Maximum gap between split lines.</p>\n<p>For example, in time axis (<a href=\"#yAxis.type\">type</a> is &#39;time&#39;), it can be set to be <code class=\"codespan\">3600 * 24 * 1000</code> to make sure that the gap between axis labels is less than or equal to one day.</p>\n<pre><code class=\"lang-js\">{\n    maxInterval: 3600 * 1000 * 24\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#yAxis.type\">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n"},"interval":{"type":["number"],"description":"<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href=\"#yAxis.splitNumber\">splitNumber</a> is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with <a href=\"#yAxis.min\">min</a> and <a href=\"#yAxis.max\">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situations.</p>\n<p>This is unavailable for category axis. Timestamp should be passed for <a href=\"#yAxis.type\">type</a>: &#39;time&#39; axis. Logged value should be passed for <a href=\"#yAxis.type\">type</a>: &#39;log&#39; axis.</p>\n"},"logBase":{"type":["number"],"description":"<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#yAxis.type\">type</a>: &#39;log&#39;.</p>\n","default":10},"silent":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code>, to prevent interaction with the axis.</p>\n","default":false},"triggerEvent":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to enable triggering events.</p>\n<p>Parameters of the event include:</p>\n<pre><code class=\"lang-js\">{\n    // Component type: xAxis, yAxis, radiusAxis, angleAxis\n    // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n    componentType: string,\n    // Value on axis before being formatted.\n    // Click on value label to trigger event.\n    value: &#39;&#39;,\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: &#39;&#39;\n}\n</code></pre>\n","default":false},"axisLine":{"type":["Object"],"description":"<p>Settings related to axis line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n","default":true},"onZero":{"type":["boolean"],"description":"<p>Specifies whether X or Y axis lies on the other&#39;s origin position, where value is 0 on axis. Valid only if the other axis is of value type, and contains 0 value.</p>\n","default":true},"onZeroAxisIndex":{"type":["number"],"description":"<p>When mutiple axes exists, this option can be used to specify which axis can be &quot;onZero&quot; to.</p>\n"},"symbol":{"type":["string","Array"],"description":"<p>Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It&#39;s set to be <code class=\"codespan\">&#39;none&#39;</code> by default, meaning no arrow for either end. If it is set to be <code class=\"codespan\">&#39;arrow&#39;</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code class=\"codespan\">[&#39;none&#39;, &#39;arrow&#39;]</code>.</p>\n","default":"'none'"},"symbolSize":{"type":["Array"],"description":"<p>Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.</p>\n","default":"[10, 15]"},"symbolOffset":{"type":["Array","number"],"description":"<p>Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>line styleLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#333'"},"width":{"type":["number"],"description":"<p>line style line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>line style line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"axisTick":{"type":["Object"],"description":"<p>Settings related to axis tick.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis tick from showing.</p>\n","default":true},"alignWithLabel":{"type":["boolean"],"description":"<p>Align axis tick with label, which is available only when <code class=\"codespan\">boundaryGap</code> is set to be <code class=\"codespan\">true</code> in category axis. See the following picture:</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/axis-align-with-label.png\"></p>\n","default":false},"interval":{"type":["number","Function"],"description":"<p>Interval of axisTick, which is available in category axis.  is set to be the same as <a href=\"#yAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> so the axis labels face the <code class=\"codespan\">inside</code> direction.</p>\n","default":false},"length":{"type":["number"],"description":"<p>The length of the axis tick.</p>\n","default":5},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Color of axis label is set to be <a href=\"#yAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"width":{"type":["number"],"description":"<p>axisTick line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>axisTick line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"minorTick":{"type":["Object"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.6.0</code></p>\n</blockquote>\n<p>Settings related minor ticks.</p>\n<p>Note: <code class=\"codespan\">minorTick</code> is not available in the <code class=\"codespan\">category</code> type axis.</p>\n<p>Examples:</p>\n<p>1) Using minor ticks in function plotting.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-function&edit=1&reset=1\" width=\"600\" height=\"350\"><iframe />\n\n\n<p>2) Using minor ticks in log axis.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-log&edit=1&reset=1\" width=\"600\" height=\"350\"><iframe />\n\n\n","properties":{"show":{"type":["boolean"],"description":"<p>If show minor ticks.</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>Number of interval splited by minor ticks.</p>\n","default":5},"length":{"type":["number"],"description":"<p>Length of minor ticks lines。</p>\n","default":3},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Style configuration of minor ticks lines <a href=\"#yAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。</p>\n"},"width":{"type":["number"],"description":"<p>minorTick line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>minorTick line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"axisLabel":{"type":["Object"],"description":"<p>Settings related to axis label.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis label from appearing.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>Interval of Axis label, which is available in category axis. </p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> so the axis labels face the <code class=\"codespan\">inside</code> direction.</p>\n","default":false},"rotate":{"type":["number"],"description":"<p>Rotation degree of axis label, which is especially useful when there is no enough space for category axis.</p>\n<p>Rotation degree is from -90 to 90.</p>\n","default":0},"margin":{"type":["number"],"description":"<p>The margin between the axis label and the axis line.</p>\n","default":8},"formatter":{"type":["string","Function"],"description":"<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Use string template; template variable is the default label of axis {value}\nformatter: &#39;{value} kg&#39;\n\n// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (idx === 0) {\n        texts.unshift(date.getYear());\n    }\n    return texts.join(&#39;/&#39;);\n}\n</code></pre>\n","default":null},"showMinLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the min tick. Optional values: <code class=\"codespan\">true</code>, <code class=\"codespan\">false</code>, <code class=\"codespan\">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.</p>\n","default":null},"showMaxLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the max tick. Optional values: <code class=\"codespan\">true</code>, <code class=\"codespan\">false</code>, <code class=\"codespan\">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.</p>\n","default":null},"color":{"type":["Color","Function"],"description":"<p>Color of axis label is set to be <a href=\"#yAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class=\"lang-js\">(val: string) =&gt; Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class=\"lang-js\">textStyle: {\n    color: function (value, index) {\n        return value &gt;= 0 ? &#39;green&#39; : &#39;red&#39;;\n    }\n}\n</code></pre>\n"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n\n","default":0}}}}}}},"splitLine":{"type":["Object"],"description":"<p>Split line of axis in <a href=\"#grid\">grid</a> area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the splitLine from showing.\n<code class=\"codespan\">value</code> type axes are shown by default, while <code class=\"codespan\">category</code> type axes are hidden.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>Interval of Axis splitLine, which is available in category axis.  is set to be the same as <a href=\"#yAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Array","string"],"description":"<p>The color of the splitLine, which could be set separately.</p>\n<p>SplitLine color could also be set in color array, which the split lines would take as their colors in turns.</p>\n<p>Example:</p>\n<pre><code>splitLine: {\n    lineStyle: {\n        // Dark and light colors will be used in turns\n        color: [&#39;#aaa&#39;, &#39;#ddd&#39;]\n    }\n}\n</code></pre>","default":"['#ccc']"},"width":{"type":["number"],"description":"<p>splitLine line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>splitLine line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"minorSplitLine":{"type":["Object"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.6.0</code></p>\n</blockquote>\n<p>Minor split lines of axis in the <a href=\"#grid\">grid</a> area。It will align to the <a href=\"#yAxis.minorTick\">minorTick</a></p>\n","properties":{"show":{"type":["boolean"],"description":"<p>If show minor split lines.</p>\n","default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>minorSplitLineLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#eee'"},"width":{"type":["number"],"description":"<p>minorSplitLine line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>minorSplitLine line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"splitArea":{"type":["Object"],"description":"<p>Split area of axis in <a href=\"#grid\">grid</a> area, not shown by default.</p>\n","properties":{"interval":{"type":["number","Function"],"description":"<p>Interval of Axis splitArea, which is available in category axis.  is set to be the same as <a href=\"#yAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to show the splitArea.</p>\n","default":false},"areaStyle":{"type":["Object"],"description":"<p>Split area style.</p>\n","properties":{"color":{"type":["Array"],"description":"<p>Color of split area.\nSplitArea color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.</p>\n","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Category data, available in <a href=\"#yAxis.type\">type</a>: &#39;category&#39; axis.</p>\n<p>If <a href=\"#yAxis.type\">type</a> is not specified, but <code class=\"codespan\">axis.data</code> is specified, the <a href=\"#yAxis.type\">type</a> is auto set as <code class=\"codespan\">&#39;category&#39;</code>.</p>\n<p>If <a href=\"#yAxis.type\">type</a> is specified as <code class=\"codespan\">&#39;category&#39;</code>, but <code class=\"codespan\">axis.data</code> is not specified, <code class=\"codespan\">axis.data</code> will be auto collected from <a href=\"#series.data\">series.data</a>. It brings convenience, but we should notice that <code class=\"codespan\">axis.data</code> provides then value range of the <code class=\"codespan\">&#39;category&#39;</code> axis. If  it is auto collected from <a href=\"#series.data\">series.data</a>, Only the values appearing in <a href=\"#series.data\">series.data</a> can be collected. For example, if <a href=\"#series.data\">series.data</a> is empty, nothing will be collected.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Name list of all categories\ndata: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n// Each item could also be a specific configuration item.\n// In this case, `value` is used as the category name.\ndata: [{\n    value: &#39;Monday&#39;,\n    // Highlight Monday\n    textStyle: {\n        fontSize: 20,\n        color: &#39;red&#39;\n    }\n}, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n</code></pre>\n","items":{"type":"Object","properties":{"value":{"type":["string"],"description":"<p>Name of a category.</p>\n"},"textStyle":{"type":["Object"],"description":"<p>Text style of the category.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}},"axisPointer":{"type":["Object"],"description":"<p>axisPointer settings on the axis.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>axisPointer will not be displayed by default. But if <a href=\"#tooltip.trigger\">tooltip.trigger</a> is set as <code class=\"codespan\">&#39;axis&#39;</code> or <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as  <code class=\"codespan\">&#39;cross&#39;</code>, axisPointer will be displayed automatically. Each coordinate system will automatically chose the axes whose will display its axisPointer. <a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> can be used to change the choice.</p>\n","default":false},"type":{"type":["string"],"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;line&#39;</code> line indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;shadow&#39;</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;none&#39;</code> no indicator displayed.</p>\n</li>\n</ul>\n","default":"'line'"},"snap":{"type":["boolean"],"description":"<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n"},"z":{"type":["number"],"description":"<p>z value, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n"},"label":{"type":["Object"],"description":"<p>label of axisPointer</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label. Label will not show by default. But if <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as  <code class=\"codespan\">&#39;cross&#39;</code>, label will be displayed automatically.</p>\n","default":false},"precision":{"type":["number","string"],"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code class=\"codespan\">&#39;2&#39;</code>, which indicates that two decimal fractions are reserved.</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"<p>The formatter of label.</p>\n<p>If set as <code class=\"codespan\">string</code>, for example it can be: <code class=\"codespan\">formatter: &#39;some text {value} some text</code>, where <code class=\"codespan\">{value}</code> will be replaced by axis value automatically.</p>\n<p>If set as <code class=\"codespan\">function</code>:</p>\n<p><strong>Parameters:</strong></p>\n<p><code class=\"codespan\">{Object}</code> params: Including fields as follows:</p>\n<p><code class=\"codespan\">{Object}</code> params.value: current value of this axis. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;category&#39;</code>, it is one of the value in <code class=\"codespan\">axis.data</code>. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;time&#39;</code>, it is a timestamp.</p>\n<p><code class=\"codespan\">{Array.&lt;Object&gt;}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<p><code class=\"codespan\">{string}</code> params.axisDimension: The dimension name of the axis. For example, in catesian it will be <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, and in polar it will be <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code>.</p>\n<p><code class=\"codespan\">{number}</code> params.axisIndex: The index of the axis, for example, <code class=\"codespan\">0</code>,<code class=\"codespan\">1</code>, <code class=\"codespan\">2</code>, ...</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n    axisDim: &#39;x&#39;, // &#39;x&#39;, &#39;y&#39;, &#39;angle&#39;, &#39;radius&#39;, &#39;single&#39;\n    axisId: &#39;xxx&#39;,\n    axisName: &#39;xxx&#39;,\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: &#39;text of value&#39;\n}\n</code></pre>\n<p><strong>Return:</strong></p>\n<p>The string to be displayed.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n    // If axis.type is &#39;time&#39;\n    return &#39;some text&#39; + echarts.format.formatTime(params.value);\n}\n</code></pre>\n","default":null},"margin":{"type":["boolean"],"description":"<p>Distance between label and axis.</p>\n","default":3},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"padding":{"type":["string","Array"],"description":"<p>axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"<p>Border color of label.</p>\n","default":null},"borderWidth":{"type":["string"],"description":"<p>Border width of label.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"lineStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;line&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"shadowStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;shadow&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"triggerTooltip":{"type":["boolean"],"description":"<p>Whether to trigger tooltip.</p>\n","default":true},"value":{"type":["number"],"description":"<p>current value. When using <a href=\"xAxisPointer.handle\" target=\"_blank\">axisPointer.handle</a>, <code class=\"codespan\">value</code> can be set to define the initail position of axisPointer.</p>\n","default":null},"status":{"type":["boolean"],"description":"<p>Current status, can be <code class=\"codespan\">&#39;show&#39;</code> 和 <code class=\"codespan\">&#39;hide&#39;</code>.</p>\n"},"handle":{"type":["Object"],"description":"<p>A button used to drag axisPointer. This feature is applicable in touch device. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set to <code class=\"codespan\">true</code> to use handle.</p>\n","default":false},"icon":{"type":["*"],"description":"<p>The icon of the handle.</p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/axisPointer-handle-image&amp;edit=1&amp;reset=1\" target=\"_blank\">example of using image</a></p>\n"},"size":{"type":["number","Array"],"description":"<p>The size of the handle, which can be set as a single value or an array (<code class=\"codespan\">[width, height]</code>).</p>\n","default":45},"margin":{"type":["number"],"description":"<p>Distance from handle center to axis.</p>\n","default":50},"color":{"type":["string"],"description":"<p>The color of the handle.</p>\n","default":"'#333'"},"throttle":{"type":["number"],"description":"<p>Throttle rate of trigger view update when dragging handle, in ms. Increase the value to improve performance, but decrease the experience.</p>\n","default":40},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":2},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}}}},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in y axis.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in y axis, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":0}}},"polar":{"type":["Object"],"description":"<p>Polar coordinate can be used in scatter and line chart. Every polar coordinate has an <a href=\"#angleAxis\">angleAxis</a> and a <a href=\"#radiusAxis\">radiusAxis</a>.</p>\n<p><strong>For example: </strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=scatter-polar-punchCard&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"center":{"type":["Array"],"description":"<p>Center position of Polar coordinate, the first of which is the horizontal position, and the second is the vertical position.</p>\n<p>Percentage is supported. When set in percentage, the item is relative to the container width, and the second item to the height.</p>\n<p><strong>Example: </strong></p>\n<pre><code>// Set to absolute pixel values\ncenter: [400, 300]\n// Set to relative percent\ncenter: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>","default":"['50%', '50%']"},"radius":{"type":["number","string","Array"],"description":"<p>Radius of Polar coordinate. Value can be:</p>\n<ul>\n<li><code class=\"codespan\">number</code>: Specify outside radius directly.</li>\n<li><p><code class=\"codespan\">string</code>: For example, <code class=\"codespan\">&#39;20%&#39;</code>, means that the outside radius is 20% of the viewport size (the little one between width and height of the chart container).</p>\n</li>\n<li><p><code class=\"codespan\">Array.&lt;number|string&gt;</code>: The first item specifies the inside radius, and the second item specifies the outside radius. Each item follows the definitions above.</p>\n</li>\n</ul>\n"},"tooltip":{"type":["Object"],"description":"<p>tooltip settings in the coordinate system component.</p>\n<hr>\n<p><strong>General Introduction:</strong></p>\n<p>tooltip can be configured on different places:</p>\n<ul>\n<li><p>Configured on global: <a href=\"#tooltip\">tooltip</a></p>\n</li>\n<li><p>Configured in a coordinate system: <a href=\"#grid.tooltip\">grid.tooltip</a>, <a href=\"#polar.tooltip\">polar.tooltip</a>, <a href=\"#single.tooltip\">single.tooltip</a></p>\n</li>\n<li><p>Configured in a series: <a href=\"#series.tooltip\">series.tooltip</a></p>\n</li>\n<li><p>Configured in each item of <code class=\"codespan\">series.data</code>: <a href=\"#series.data.tooltip\">series.data.tooltip</a></p>\n</li>\n</ul>\n<hr>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the tooltip component, including tooltip floating layer and <a href=\"#tooltip.axisPointer\">axisPointer</a>.</p>\n","default":true},"trigger":{"type":["string"],"description":"<p>Type of triggering.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;item&#39;</code></p>\n<p>  Triggered by data item, which is mainly used for charts that don&#39;t have a category axis like scatter charts or pie charts.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;axis&#39;</code></p>\n<p>  Triggered by axes, which is mainly used for charts that have category axes, like bar charts or line charts.</p>\n<p> ECharts 2.x only supports axis trigger for category axis. In ECharts 3, it is supported for all types of axes in <a href=\"#grid\">grid</a> or <a href=\"#polar\">polar</a>. Also, you may assign axis with <a href=\"#tooltip.axisPointer.axis\">axisPointer.axis</a>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;none&#39;</code></p>\n<p>  Trigger nothing.</p>\n</li>\n</ul>\n","default":"'item'"},"axisPointer":{"type":["Object"],"description":"<p>Configuration item for axisPointer.</p>\n<p><code class=\"codespan\">tooltip.axisPointer</code> is like syntactic sugar of axisPointer settings on axes (for example, <a href=\"#xAxis.axisPointer\">xAxis.axisPointer</a> or <a href=\"#angleAxis.axisPointer\">angleAxis.axisPointer</a>). More detailed features can be configured on <code class=\"codespan\">someAxis.axisPointer</code>. But in common cases, using <code class=\"codespan\">tooltip.axisPointer</code> is more convenient.</p>\n<blockquote>\n<p><strong>Notice:</strong> configurations of <code class=\"codespan\">tooltip.axisPointer</code> has lower priority than that of <code class=\"codespan\">someAxis.axisPointer</code>.</p>\n</blockquote>\n<hr>\n<p><code class=\"codespan\">axisPointer</code> is a tool for displaying reference line and axis value under mouse pointer.</p>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/candlestick-axisPointer&edit=1&reset=1\" width=\"600\" height=\"450\"><iframe />\n\n\n<p>In the demo above, <a href=\"#axisPointer.link\">axisPointer.link</a> is used to link axisPointer from different coordinate systems.</p>\n<p><code class=\"codespan\">axisPointer</code> can also be used on touch device, where user can drag the button to move the reference line and label.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-tooltip-touch&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n<p>In the cases that more than one axis exist, axisPointer helps to look inside the data.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=multiple-y-axis&edit=1&reset=1\" width=\"600\" height=\"300\"><iframe />\n\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=multiple-x-axis&edit=1&reset=1\" width=\"600\" height=\"300\"><iframe />\n\n\n\n<hr>\n<blockquote>\n<p><strong>Notice:</strong>\nGenerally, axisPointers is configured in each axes who need them (for example <a href=\"#xAxis.axisPointer\">xAxis.axisPointer</a>), or configured in <code class=\"codespan\">tooltip</code> (for example <a href=\"#tooltip.axisPointer\">tooltip.axisPointer</a>).</p>\n</blockquote>\n<blockquote>\n<p>But these configurations can only be configured in global axisPointer:\n<a href=\"#axisPointer.triggerOn\">axisPointer.triggerOn</a>, <a href=\"#axisPointer.link\">axisPointer.link</a>.</p>\n</blockquote>\n<hr>\n<hr>\n<p><strong>How to display axisPointer:</strong></p>\n<p>In <a href=\"#grid\">cartesian (grid)</a> and <a href=\"#single\">polar](~polar) and (single axis</a>, each axis has its own axisPointer.</p>\n<p>Those axisPointer will not be displayed by default, utill configured as follows:</p>\n<ul>\n<li><p>Set <code class=\"codespan\">someAxis.axisPointer.show</code> (like <a href=\"#xAxis.axisPointer.show\">xAxis.axisPointer.show</a>) as <code class=\"codespan\">true</code>. Then axisPointer of this axis will be displayed.</p>\n</li>\n<li><p>Set <a href=\"#tooltip.trigger\">tooltip.trigger</a> as <code class=\"codespan\">&#39;axis&#39;</code>, or set <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> as <code class=\"codespan\">&#39;cross&#39;</code>. Then coordinate system will automatically chose the axes who will display their axisPointers. (<a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> can be used to change the choice.) Notice, <code class=\"codespan\">axis.axisPointer</code> will override <code class=\"codespan\">tooltip.axisPointer</code> settings.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to display the label of axisPointer:</strong></p>\n<p>The label of axisPointer will not be displayed by default(namely, only reference line will be displayed by default), utill configured as follows:</p>\n<ul>\n<li><p>Set <code class=\"codespan\">someAxis.axisPointer.label.show</code> (for example <a href=\"#xAxis.axisPointer.show\">xAxis.axisPointer.label.show</a>) as <code class=\"codespan\">true</code>. Then the label of the axisPointer will be displayed.</p>\n</li>\n<li><p>Set <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> as  <code class=\"codespan\">&#39;cross&#39;</code>. Then the label of the crossed axisPointers will be displayed.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to configure axisPointer on touch device:</strong></p>\n<p>Set <code class=\"codespan\">someAxis.axisPointer.handle.show</code> (for example <a href=\"#xAxis.axisPointer.handle.show\">xAxis.axisPointer.handle.show</a> as <code class=\"codespan\">true</code>. Then the button for dragging will be displayed. (This feature is not supported on polar).</p>\n<p><strong>Notice:</strong>\nIf tooltip does not work well in this case, try to set<a href=\"#tooltip.triggerOn\">tooltip.triggerOn</a> as <code class=\"codespan\">&#39;none&#39;</code> (for the effect: show tooltip when finger holding on the button, and hide tooltip after finger left the button), or set <a href=\"#tooltip.alwaysShowContent\">tooltip.alwaysShowContent</a> as <code class=\"codespan\">true</code> (then tooltip will always be displayed).</p>\n<p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>.</p>\n<hr>\n<p><strong>Snap to point</strong></p>\n<p>In value axis and time axis, if <a href=\"#xAxis.axisPointer.snap\">snap</a> is set as true, axisPointer will snap to point automatically.</p>\n<hr>\n","properties":{"type":{"type":["string"],"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;line&#39;</code> line indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;shadow&#39;</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;none&#39;</code> no indicator displayed.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;cross&#39;</code> crosshair indicator, which is actually the shortcut of enable two axisPointers of two orthometric axes.</p>\n</li>\n</ul>\n","default":"'line'"},"axis":{"type":["string"],"description":"<p>The coordinate axis, which could be <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, <code class=\"codespan\">&#39;radius&#39;</code>, or <code class=\"codespan\">&#39;angle&#39;</code>. By default, each coordinate system will automatically chose the axes whose will display its axisPointer (category axis or time axis is used by default).</p>\n","default":"'auto'"},"snap":{"type":["boolean"],"description":"<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n"},"z":{"type":["number"],"description":"<p>z value, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n"},"label":{"type":["Object"],"description":"<p>label of axisPointer</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label. Label will not show by default. But if <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as  <code class=\"codespan\">&#39;cross&#39;</code>, label will be displayed automatically.</p>\n","default":false},"precision":{"type":["number","string"],"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code class=\"codespan\">&#39;2&#39;</code>, which indicates that two decimal fractions are reserved.</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"<p>The formatter of label.</p>\n<p>If set as <code class=\"codespan\">string</code>, for example it can be: <code class=\"codespan\">formatter: &#39;some text {value} some text</code>, where <code class=\"codespan\">{value}</code> will be replaced by axis value automatically.</p>\n<p>If set as <code class=\"codespan\">function</code>:</p>\n<p><strong>Parameters:</strong></p>\n<p><code class=\"codespan\">{Object}</code> params: Including fields as follows:</p>\n<p><code class=\"codespan\">{Object}</code> params.value: current value of this axis. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;category&#39;</code>, it is one of the value in <code class=\"codespan\">axis.data</code>. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;time&#39;</code>, it is a timestamp.</p>\n<p><code class=\"codespan\">{Array.&lt;Object&gt;}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<p><code class=\"codespan\">{string}</code> params.axisDimension: The dimension name of the axis. For example, in catesian it will be <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, and in polar it will be <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code>.</p>\n<p><code class=\"codespan\">{number}</code> params.axisIndex: The index of the axis, for example, <code class=\"codespan\">0</code>,<code class=\"codespan\">1</code>, <code class=\"codespan\">2</code>, ...</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n    axisDim: &#39;x&#39;, // &#39;x&#39;, &#39;y&#39;, &#39;angle&#39;, &#39;radius&#39;, &#39;single&#39;\n    axisId: &#39;xxx&#39;,\n    axisName: &#39;xxx&#39;,\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: &#39;text of value&#39;\n}\n</code></pre>\n<p><strong>Return:</strong></p>\n<p>The string to be displayed.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n    // If axis.type is &#39;time&#39;\n    return &#39;some text&#39; + echarts.format.formatTime(params.value);\n}\n</code></pre>\n","default":null},"margin":{"type":["boolean"],"description":"<p>Distance between label and axis.</p>\n","default":3},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"padding":{"type":["string","Array"],"description":"<p>axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"<p>Border color of label.</p>\n","default":null},"borderWidth":{"type":["string"],"description":"<p>Border width of label.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"lineStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;line&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"shadowStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;shadow&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"crossStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;cross&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"dashed"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":200},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"exponentialOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"position":{"type":["string","Array"],"description":"<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},"radiusAxis":{"type":["Object"],"description":"<p>Radial axis of polar coordinate.</p>\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"polarIndex":{"type":["number"],"description":"<p>Index of radial axis in polor coordinate. It&#39;s the first axis by default.</p>\n","default":0},"type":{"type":["string"],"description":"<p>Type of axis.</p>\n<p>Option:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;value&#39;</code>\n  Numerical axis, suitable for continuous data.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;category&#39;</code>\n  Category axis, suitable for discrete category data. Category data can be auto retrieved from <a href=\"#series.data\">series.data</a> or <a href=\"#dataset.source\">dataset.source</a>, or can be specified via <a href=\"#radiusAxis.data\">radiusAxis.data</a>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;time&#39;</code>\n  Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;log&#39;</code>\n  Log axis, suitable for log data.</p>\n</li>\n</ul>\n","default":"'value'"},"name":{"type":["string"],"description":"<p>Name of axis.</p>\n"},"nameLocation":{"type":["string"],"description":"<p>Location of axis name.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> or <code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;end&#39;</code></li>\n</ul>\n","default":"'end'"},"nameTextStyle":{"type":["Object"],"description":"<p>Text style of axis name.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Color of axis name uses <a href=\"#radiusAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"fontStyle":{"type":["string"],"description":"<p>axis name font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p>axis name font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>axis name font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>axis name font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n\n","default":0}}}}}}},"nameGap":{"type":["number"],"description":"<p>Gap between axis name and axis line.</p>\n","default":15},"nameRotate":{"type":["number"],"description":"<p>Rotation of axis name.</p>\n","default":null},"inverse":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to invert the axis.\nThis is a new option available from Echarts 3 and newer.</p>\n","default":false},"boundaryGap":{"type":["boolean","Array"],"description":"<p>The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different.</p>\n<p>The <code class=\"codespan\">boundaryGap</code> of category axis can be set to either <code class=\"codespan\">true</code> or <code class=\"codespan\">false</code>. Default value is set to be <code class=\"codespan\">true</code>, in which case <a href=\"#radiusAxis.axisTick\">axisTick</a> is served only as a separation line, and labels and data appear only in the center part of two <a href=\"#radiusAxis.axisTick\">axis ticks</a>, which is called <em>band</em>.</p>\n<p>For non-category axis, including time, numerical value, and log axes, <code class=\"codespan\">boundaryGap</code> is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting <a href=\"#radiusAxis.min\">min</a> and <a href=\"#radiusAxis.max\">max</a>.\n<strong>Example: </strong></p>\n<pre><code class=\"lang-js\">boundaryGap: [&#39;20%&#39;, &#39;20%&#39;]\n</code></pre>\n"},"min":{"type":["number","string","Function"],"description":"<p>The minimun value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">&#39;dataMin&#39;</code> so that the minimum value on this axis is set to be the minimum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class=\"codespan\">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class=\"codespan\">2</code> represents <code class=\"codespan\">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class=\"codespan\">-3</code>.</p>\n<p>If <code class=\"codespan\">min</code> is specified as a function, it should return a min value, like:</p>\n<pre><code class=\"lang-js\">min: function (value) {\n    return value.min - 20;\n}\n</code></pre>\n<p><code class=\"codespan\">value</code> is an object, containing the <code class=\"codespan\">min</code> value and <code class=\"codespan\">max</code> value of the data. This function should return the min value of axis, or return <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> to make echarts use the auto calculated min value (<code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> return is only supported since <code class=\"codespan\">v4.8.0</code>).</p>\n","default":null},"max":{"type":["number","string","Function"],"description":"<p>The maximum value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">&#39;dataMax&#39;</code> so that the minimum value on this axis is set to be the maximum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class=\"codespan\">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class=\"codespan\">2</code> represents <code class=\"codespan\">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class=\"codespan\">-3</code>.</p>\n<p>If <code class=\"codespan\">max</code> is specified as a function, it should return a max value, like:</p>\n<pre><code class=\"lang-js\">max: function (value) {\n    return value.max - 20;\n}\n</code></pre>\n<p><code class=\"codespan\">value</code> is an object, containing the <code class=\"codespan\">min</code> value and <code class=\"codespan\">max</code> value of the data. This function should return the max value of axis, or return <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> to make echarts use the auto calculated max value (<code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> return is only supported since <code class=\"codespan\">v4.8.0</code>).</p>\n","default":null},"scale":{"type":["boolean"],"description":"<p>It is available only in numerical axis, i.e., <a href=\"#radiusAxis.type\">type</a>: &#39;value&#39;.</p>\n<p>It specifies whether not to contain zero position of axis compulsively. When it is set to be <code class=\"codespan\">true</code>, the axis may not contain zero position, which is useful in the scatter chart for both value axes.</p>\n<p>This configuration item is unavailable when the <a href=\"#radiusAxis.min\">min</a> and <a href=\"#radiusAxis.max\">max</a> are set.</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.</p>\n<p>This is unavailable for category axis.</p>\n","default":5},"minInterval":{"type":["number"],"description":"<p>Minimum gap between split lines.</p>\n<p>For example, it can be set to be <code class=\"codespan\">1</code> to make sure axis label is show as integer.</p>\n<pre><code class=\"lang-js\">{\n    minInterval: 1\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#radiusAxis.type\">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n","default":0},"maxInterval":{"type":["number"],"description":"<p>Maximum gap between split lines.</p>\n<p>For example, in time axis (<a href=\"#radiusAxis.type\">type</a> is &#39;time&#39;), it can be set to be <code class=\"codespan\">3600 * 24 * 1000</code> to make sure that the gap between axis labels is less than or equal to one day.</p>\n<pre><code class=\"lang-js\">{\n    maxInterval: 3600 * 1000 * 24\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#radiusAxis.type\">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n"},"interval":{"type":["number"],"description":"<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href=\"#radiusAxis.splitNumber\">splitNumber</a> is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with <a href=\"#radiusAxis.min\">min</a> and <a href=\"#radiusAxis.max\">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situations.</p>\n<p>This is unavailable for category axis. Timestamp should be passed for <a href=\"#radiusAxis.type\">type</a>: &#39;time&#39; axis. Logged value should be passed for <a href=\"#radiusAxis.type\">type</a>: &#39;log&#39; axis.</p>\n"},"logBase":{"type":["number"],"description":"<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#radiusAxis.type\">type</a>: &#39;log&#39;.</p>\n","default":10},"silent":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code>, to prevent interaction with the axis.</p>\n","default":false},"triggerEvent":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to enable triggering events.</p>\n<p>Parameters of the event include:</p>\n<pre><code class=\"lang-js\">{\n    // Component type: xAxis, yAxis, radiusAxis, angleAxis\n    // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n    componentType: string,\n    // Value on axis before being formatted.\n    // Click on value label to trigger event.\n    value: &#39;&#39;,\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: &#39;&#39;\n}\n</code></pre>\n","default":false},"axisLine":{"type":["Object"],"description":"<p>Settings related to axis line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n","default":true},"symbol":{"type":["string","Array"],"description":"<p>Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It&#39;s set to be <code class=\"codespan\">&#39;none&#39;</code> by default, meaning no arrow for either end. If it is set to be <code class=\"codespan\">&#39;arrow&#39;</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code class=\"codespan\">[&#39;none&#39;, &#39;arrow&#39;]</code>.</p>\n","default":"'none'"},"symbolSize":{"type":["Array"],"description":"<p>Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.</p>\n","default":"[10, 15]"},"symbolOffset":{"type":["Array","number"],"description":"<p>Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>line styleLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#333'"},"width":{"type":["number"],"description":"<p>line style line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>line style line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"axisTick":{"type":["Object"],"description":"<p>Settings related to axis tick.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis tick from showing.</p>\n","default":true},"alignWithLabel":{"type":["boolean"],"description":"<p>Align axis tick with label, which is available only when <code class=\"codespan\">boundaryGap</code> is set to be <code class=\"codespan\">true</code> in category axis. See the following picture:</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/axis-align-with-label.png\"></p>\n","default":false},"interval":{"type":["number","Function"],"description":"<p>Interval of axisTick, which is available in category axis.  is set to be the same as <a href=\"#radiusAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> so the axis labels face the <code class=\"codespan\">inside</code> direction.</p>\n","default":false},"length":{"type":["number"],"description":"<p>The length of the axis tick.</p>\n","default":5},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Color of axis label is set to be <a href=\"#radiusAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"width":{"type":["number"],"description":"<p>axisTick line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>axisTick line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"minorTick":{"type":["Object"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.6.0</code></p>\n</blockquote>\n<p>Settings related minor ticks.</p>\n<p>Note: <code class=\"codespan\">minorTick</code> is not available in the <code class=\"codespan\">category</code> type axis.</p>\n<p>Examples:</p>\n<p>1) Using minor ticks in function plotting.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-function&edit=1&reset=1\" width=\"600\" height=\"350\"><iframe />\n\n\n<p>2) Using minor ticks in log axis.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-log&edit=1&reset=1\" width=\"600\" height=\"350\"><iframe />\n\n\n","properties":{"show":{"type":["boolean"],"description":"<p>If show minor ticks.</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>Number of interval splited by minor ticks.</p>\n","default":5},"length":{"type":["number"],"description":"<p>Length of minor ticks lines。</p>\n","default":3},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Style configuration of minor ticks lines <a href=\"#radiusAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。</p>\n"},"width":{"type":["number"],"description":"<p>minorTick line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>minorTick line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"axisLabel":{"type":["Object"],"description":"<p>Settings related to axis label.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis label from appearing.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>Interval of Axis label, which is available in category axis. </p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> so the axis labels face the <code class=\"codespan\">inside</code> direction.</p>\n","default":false},"rotate":{"type":["number"],"description":"<p>Rotation degree of axis label, which is especially useful when there is no enough space for category axis.</p>\n<p>Rotation degree is from -90 to 90.</p>\n","default":0},"margin":{"type":["number"],"description":"<p>The margin between the axis label and the axis line.</p>\n","default":8},"formatter":{"type":["string","Function"],"description":"<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Use string template; template variable is the default label of axis {value}\nformatter: &#39;{value} kg&#39;\n\n// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (idx === 0) {\n        texts.unshift(date.getYear());\n    }\n    return texts.join(&#39;/&#39;);\n}\n</code></pre>\n","default":null},"showMinLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the min tick. Optional values: <code class=\"codespan\">true</code>, <code class=\"codespan\">false</code>, <code class=\"codespan\">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.</p>\n","default":null},"showMaxLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the max tick. Optional values: <code class=\"codespan\">true</code>, <code class=\"codespan\">false</code>, <code class=\"codespan\">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.</p>\n","default":null},"color":{"type":["Color","Function"],"description":"<p>Color of axis label is set to be <a href=\"#radiusAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class=\"lang-js\">(val: string) =&gt; Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class=\"lang-js\">textStyle: {\n    color: function (value, index) {\n        return value &gt;= 0 ? &#39;green&#39; : &#39;red&#39;;\n    }\n}\n</code></pre>\n"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n\n","default":0}}}}}}},"splitLine":{"type":["Object"],"description":"<p>Split line of axis in <a href=\"#grid\">grid</a> area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the splitLine from showing.\n<code class=\"codespan\">value</code> type axes are shown by default, while <code class=\"codespan\">category</code> type axes are hidden.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>Interval of Axis splitLine, which is available in category axis.  is set to be the same as <a href=\"#radiusAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Array","string"],"description":"<p>The color of the splitLine, which could be set separately.</p>\n<p>SplitLine color could also be set in color array, which the split lines would take as their colors in turns.</p>\n<p>Example:</p>\n<pre><code>splitLine: {\n    lineStyle: {\n        // Dark and light colors will be used in turns\n        color: [&#39;#aaa&#39;, &#39;#ddd&#39;]\n    }\n}\n</code></pre>","default":"['#ccc']"},"width":{"type":["number"],"description":"<p>splitLine line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>splitLine line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"minorSplitLine":{"type":["Object"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.6.0</code></p>\n</blockquote>\n<p>Minor split lines of axis in the <a href=\"#grid\">grid</a> area。It will align to the <a href=\"#radiusAxis.minorTick\">minorTick</a></p>\n","properties":{"show":{"type":["boolean"],"description":"<p>If show minor split lines.</p>\n","default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>minorSplitLineLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#eee'"},"width":{"type":["number"],"description":"<p>minorSplitLine line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>minorSplitLine line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"splitArea":{"type":["Object"],"description":"<p>Split area of axis in <a href=\"#grid\">grid</a> area, not shown by default.</p>\n","properties":{"interval":{"type":["number","Function"],"description":"<p>Interval of Axis splitArea, which is available in category axis.  is set to be the same as <a href=\"#radiusAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to show the splitArea.</p>\n","default":false},"areaStyle":{"type":["Object"],"description":"<p>Split area style.</p>\n","properties":{"color":{"type":["Array"],"description":"<p>Color of split area.\nSplitArea color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.</p>\n","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Category data, available in <a href=\"#radiusAxis.type\">type</a>: &#39;category&#39; axis.</p>\n<p>If <a href=\"#radiusAxis.type\">type</a> is not specified, but <code class=\"codespan\">axis.data</code> is specified, the <a href=\"#radiusAxis.type\">type</a> is auto set as <code class=\"codespan\">&#39;category&#39;</code>.</p>\n<p>If <a href=\"#radiusAxis.type\">type</a> is specified as <code class=\"codespan\">&#39;category&#39;</code>, but <code class=\"codespan\">axis.data</code> is not specified, <code class=\"codespan\">axis.data</code> will be auto collected from <a href=\"#series.data\">series.data</a>. It brings convenience, but we should notice that <code class=\"codespan\">axis.data</code> provides then value range of the <code class=\"codespan\">&#39;category&#39;</code> axis. If  it is auto collected from <a href=\"#series.data\">series.data</a>, Only the values appearing in <a href=\"#series.data\">series.data</a> can be collected. For example, if <a href=\"#series.data\">series.data</a> is empty, nothing will be collected.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Name list of all categories\ndata: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n// Each item could also be a specific configuration item.\n// In this case, `value` is used as the category name.\ndata: [{\n    value: &#39;Monday&#39;,\n    // Highlight Monday\n    textStyle: {\n        fontSize: 20,\n        color: &#39;red&#39;\n    }\n}, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n</code></pre>\n","items":{"type":"Object","properties":{"value":{"type":["string"],"description":"<p>Name of a category.</p>\n"},"textStyle":{"type":["Object"],"description":"<p>Text style of the category.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}},"axisPointer":{"type":["Object"],"description":"<p>axisPointer settings on the axis.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>axisPointer will not be displayed by default. But if <a href=\"#tooltip.trigger\">tooltip.trigger</a> is set as <code class=\"codespan\">&#39;axis&#39;</code> or <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as  <code class=\"codespan\">&#39;cross&#39;</code>, axisPointer will be displayed automatically. Each coordinate system will automatically chose the axes whose will display its axisPointer. <a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> can be used to change the choice.</p>\n","default":false},"type":{"type":["string"],"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;line&#39;</code> line indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;shadow&#39;</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;none&#39;</code> no indicator displayed.</p>\n</li>\n</ul>\n","default":"'line'"},"snap":{"type":["boolean"],"description":"<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n"},"z":{"type":["number"],"description":"<p>z value, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n"},"label":{"type":["Object"],"description":"<p>label of axisPointer</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label. Label will not show by default. But if <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as  <code class=\"codespan\">&#39;cross&#39;</code>, label will be displayed automatically.</p>\n","default":false},"precision":{"type":["number","string"],"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code class=\"codespan\">&#39;2&#39;</code>, which indicates that two decimal fractions are reserved.</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"<p>The formatter of label.</p>\n<p>If set as <code class=\"codespan\">string</code>, for example it can be: <code class=\"codespan\">formatter: &#39;some text {value} some text</code>, where <code class=\"codespan\">{value}</code> will be replaced by axis value automatically.</p>\n<p>If set as <code class=\"codespan\">function</code>:</p>\n<p><strong>Parameters:</strong></p>\n<p><code class=\"codespan\">{Object}</code> params: Including fields as follows:</p>\n<p><code class=\"codespan\">{Object}</code> params.value: current value of this axis. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;category&#39;</code>, it is one of the value in <code class=\"codespan\">axis.data</code>. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;time&#39;</code>, it is a timestamp.</p>\n<p><code class=\"codespan\">{Array.&lt;Object&gt;}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<p><code class=\"codespan\">{string}</code> params.axisDimension: The dimension name of the axis. For example, in catesian it will be <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, and in polar it will be <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code>.</p>\n<p><code class=\"codespan\">{number}</code> params.axisIndex: The index of the axis, for example, <code class=\"codespan\">0</code>,<code class=\"codespan\">1</code>, <code class=\"codespan\">2</code>, ...</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n    axisDim: &#39;x&#39;, // &#39;x&#39;, &#39;y&#39;, &#39;angle&#39;, &#39;radius&#39;, &#39;single&#39;\n    axisId: &#39;xxx&#39;,\n    axisName: &#39;xxx&#39;,\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: &#39;text of value&#39;\n}\n</code></pre>\n<p><strong>Return:</strong></p>\n<p>The string to be displayed.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n    // If axis.type is &#39;time&#39;\n    return &#39;some text&#39; + echarts.format.formatTime(params.value);\n}\n</code></pre>\n","default":null},"margin":{"type":["boolean"],"description":"<p>Distance between label and axis.</p>\n","default":3},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"padding":{"type":["string","Array"],"description":"<p>axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"<p>Border color of label.</p>\n","default":null},"borderWidth":{"type":["string"],"description":"<p>Border width of label.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"lineStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;line&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"shadowStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;shadow&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"triggerTooltip":{"type":["boolean"],"description":"<p>Whether to trigger tooltip.</p>\n","default":true},"value":{"type":["number"],"description":"<p>current value. When using <a href=\"xAxisPointer.handle\" target=\"_blank\">axisPointer.handle</a>, <code class=\"codespan\">value</code> can be set to define the initail position of axisPointer.</p>\n","default":null},"status":{"type":["boolean"],"description":"<p>Current status, can be <code class=\"codespan\">&#39;show&#39;</code> 和 <code class=\"codespan\">&#39;hide&#39;</code>.</p>\n"},"handle":{"type":["Object"],"description":"<p>A button used to drag axisPointer. This feature is applicable in touch device. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set to <code class=\"codespan\">true</code> to use handle.</p>\n","default":false},"icon":{"type":["*"],"description":"<p>The icon of the handle.</p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/axisPointer-handle-image&amp;edit=1&amp;reset=1\" target=\"_blank\">example of using image</a></p>\n"},"size":{"type":["number","Array"],"description":"<p>The size of the handle, which can be set as a single value or an array (<code class=\"codespan\">[width, height]</code>).</p>\n","default":45},"margin":{"type":["number"],"description":"<p>Distance from handle center to axis.</p>\n","default":50},"color":{"type":["string"],"description":"<p>The color of the handle.</p>\n","default":"'#333'"},"throttle":{"type":["number"],"description":"<p>Throttle rate of trigger view update when dragging handle, in ms. Increase the value to improve performance, but decrease the experience.</p>\n","default":40},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":2},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}}}},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in Radial axis.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in Radial axis, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":0}}},"angleAxis":{"type":["Object"],"description":"<p>The angle axis in Polar Coordinate.</p>\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"polarIndex":{"type":["number"],"description":"<p>The index of angle axis in Polar Coordinate. The first axis is used by default.</p>\n","default":0},"startAngle":{"type":["number"],"description":"<p>Starting angle of axis. 90 degrees by default, standing for top position of center. 0 degree stands for right position of center.</p>\n<p>The following shows an example with startAngle of 45 deg.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/polar-start-angle&edit=1&reset=1\" width=\"400\" height=\"400\"><iframe />\n\n\n","default":90},"clockwise":{"type":["boolean"],"description":"<p>Whether the positive position of axis is clockwise. True for clockwise by default.</p>\n<p>The following shows an example with clockwise as <code class=\"codespan\">false</code>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/polar-anticlockwise&edit=1&reset=1\" width=\"400\" height=\"400\"><iframe />\n\n\n\n\n","default":true},"type":{"type":["string"],"description":"<p>Type of axis.</p>\n<p>Option:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;value&#39;</code>\n  Numerical axis, suitable for continuous data.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;category&#39;</code>\n  Category axis, suitable for discrete category data. Category data can be auto retrieved from <a href=\"#series.data\">series.data</a> or <a href=\"#dataset.source\">dataset.source</a>, or can be specified via <a href=\"#angleAxis.data\">angleAxis.data</a>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;time&#39;</code>\n  Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;log&#39;</code>\n  Log axis, suitable for log data.</p>\n</li>\n</ul>\n","default":"'category'"},"boundaryGap":{"type":["boolean","Array"],"description":"<p>The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different.</p>\n<p>The <code class=\"codespan\">boundaryGap</code> of category axis can be set to either <code class=\"codespan\">true</code> or <code class=\"codespan\">false</code>. Default value is set to be <code class=\"codespan\">true</code>, in which case <a href=\"#angleAxis.axisTick\">axisTick</a> is served only as a separation line, and labels and data appear only in the center part of two <a href=\"#angleAxis.axisTick\">axis ticks</a>, which is called <em>band</em>.</p>\n<p>For non-category axis, including time, numerical value, and log axes, <code class=\"codespan\">boundaryGap</code> is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting <a href=\"#angleAxis.min\">min</a> and <a href=\"#angleAxis.max\">max</a>.\n<strong>Example: </strong></p>\n<pre><code class=\"lang-js\">boundaryGap: [&#39;20%&#39;, &#39;20%&#39;]\n</code></pre>\n"},"min":{"type":["number","string","Function"],"description":"<p>The minimun value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">&#39;dataMin&#39;</code> so that the minimum value on this axis is set to be the minimum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class=\"codespan\">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class=\"codespan\">2</code> represents <code class=\"codespan\">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class=\"codespan\">-3</code>.</p>\n<p>If <code class=\"codespan\">min</code> is specified as a function, it should return a min value, like:</p>\n<pre><code class=\"lang-js\">min: function (value) {\n    return value.min - 20;\n}\n</code></pre>\n<p><code class=\"codespan\">value</code> is an object, containing the <code class=\"codespan\">min</code> value and <code class=\"codespan\">max</code> value of the data. This function should return the min value of axis, or return <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> to make echarts use the auto calculated min value (<code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> return is only supported since <code class=\"codespan\">v4.8.0</code>).</p>\n","default":null},"max":{"type":["number","string","Function"],"description":"<p>The maximum value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">&#39;dataMax&#39;</code> so that the minimum value on this axis is set to be the maximum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class=\"codespan\">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class=\"codespan\">2</code> represents <code class=\"codespan\">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class=\"codespan\">-3</code>.</p>\n<p>If <code class=\"codespan\">max</code> is specified as a function, it should return a max value, like:</p>\n<pre><code class=\"lang-js\">max: function (value) {\n    return value.max - 20;\n}\n</code></pre>\n<p><code class=\"codespan\">value</code> is an object, containing the <code class=\"codespan\">min</code> value and <code class=\"codespan\">max</code> value of the data. This function should return the max value of axis, or return <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> to make echarts use the auto calculated max value (<code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> return is only supported since <code class=\"codespan\">v4.8.0</code>).</p>\n","default":null},"scale":{"type":["boolean"],"description":"<p>It is available only in numerical axis, i.e., <a href=\"#angleAxis.type\">type</a>: &#39;value&#39;.</p>\n<p>It specifies whether not to contain zero position of axis compulsively. When it is set to be <code class=\"codespan\">true</code>, the axis may not contain zero position, which is useful in the scatter chart for both value axes.</p>\n<p>This configuration item is unavailable when the <a href=\"#angleAxis.min\">min</a> and <a href=\"#angleAxis.max\">max</a> are set.</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.</p>\n<p>This is unavailable for category axis.</p>\n","default":5},"minInterval":{"type":["number"],"description":"<p>Minimum gap between split lines.</p>\n<p>For example, it can be set to be <code class=\"codespan\">1</code> to make sure axis label is show as integer.</p>\n<pre><code class=\"lang-js\">{\n    minInterval: 1\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#angleAxis.type\">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n","default":0},"maxInterval":{"type":["number"],"description":"<p>Maximum gap between split lines.</p>\n<p>For example, in time axis (<a href=\"#angleAxis.type\">type</a> is &#39;time&#39;), it can be set to be <code class=\"codespan\">3600 * 24 * 1000</code> to make sure that the gap between axis labels is less than or equal to one day.</p>\n<pre><code class=\"lang-js\">{\n    maxInterval: 3600 * 1000 * 24\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#angleAxis.type\">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n"},"interval":{"type":["number"],"description":"<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href=\"#angleAxis.splitNumber\">splitNumber</a> is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with <a href=\"#angleAxis.min\">min</a> and <a href=\"#angleAxis.max\">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situations.</p>\n<p>This is unavailable for category axis. Timestamp should be passed for <a href=\"#angleAxis.type\">type</a>: &#39;time&#39; axis. Logged value should be passed for <a href=\"#angleAxis.type\">type</a>: &#39;log&#39; axis.</p>\n"},"logBase":{"type":["number"],"description":"<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#angleAxis.type\">type</a>: &#39;log&#39;.</p>\n","default":10},"silent":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code>, to prevent interaction with the axis.</p>\n","default":false},"triggerEvent":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to enable triggering events.</p>\n<p>Parameters of the event include:</p>\n<pre><code class=\"lang-js\">{\n    // Component type: xAxis, yAxis, radiusAxis, angleAxis\n    // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n    componentType: string,\n    // Value on axis before being formatted.\n    // Click on value label to trigger event.\n    value: &#39;&#39;,\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: &#39;&#39;\n}\n</code></pre>\n","default":false},"axisLine":{"type":["Object"],"description":"<p>Settings related to axis line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n","default":true},"symbol":{"type":["string","Array"],"description":"<p>Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It&#39;s set to be <code class=\"codespan\">&#39;none&#39;</code> by default, meaning no arrow for either end. If it is set to be <code class=\"codespan\">&#39;arrow&#39;</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code class=\"codespan\">[&#39;none&#39;, &#39;arrow&#39;]</code>.</p>\n","default":"'none'"},"symbolSize":{"type":["Array"],"description":"<p>Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.</p>\n","default":"[10, 15]"},"symbolOffset":{"type":["Array","number"],"description":"<p>Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>line styleLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#333'"},"width":{"type":["number"],"description":"<p>line style line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>line style line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"axisTick":{"type":["Object"],"description":"<p>Settings related to axis tick.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis tick from showing.</p>\n","default":true},"alignWithLabel":{"type":["boolean"],"description":"<p>Align axis tick with label, which is available only when <code class=\"codespan\">boundaryGap</code> is set to be <code class=\"codespan\">true</code> in category axis. See the following picture:</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/axis-align-with-label.png\"></p>\n","default":false},"interval":{"type":["number","Function"],"description":"<p>Interval of axisTick, which is available in category axis.  is set to be the same as <a href=\"#angleAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> so the axis labels face the <code class=\"codespan\">inside</code> direction.</p>\n","default":false},"length":{"type":["number"],"description":"<p>The length of the axis tick.</p>\n","default":5},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Color of axis label is set to be <a href=\"#angleAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"width":{"type":["number"],"description":"<p>axisTick line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>axisTick line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"minorTick":{"type":["Object"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.6.0</code></p>\n</blockquote>\n<p>Settings related minor ticks.</p>\n<p>Note: <code class=\"codespan\">minorTick</code> is not available in the <code class=\"codespan\">category</code> type axis.</p>\n<p>Examples:</p>\n<p>1) Using minor ticks in function plotting.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-function&edit=1&reset=1\" width=\"600\" height=\"350\"><iframe />\n\n\n<p>2) Using minor ticks in log axis.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-log&edit=1&reset=1\" width=\"600\" height=\"350\"><iframe />\n\n\n","properties":{"show":{"type":["boolean"],"description":"<p>If show minor ticks.</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>Number of interval splited by minor ticks.</p>\n","default":5},"length":{"type":["number"],"description":"<p>Length of minor ticks lines。</p>\n","default":3},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Style configuration of minor ticks lines <a href=\"#angleAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。</p>\n"},"width":{"type":["number"],"description":"<p>minorTick line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>minorTick line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"axisLabel":{"type":["Object"],"description":"<p>Settings related to axis label.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis label from appearing.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>Interval of Axis label, which is available in category axis. </p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> so the axis labels face the <code class=\"codespan\">inside</code> direction.</p>\n","default":false},"margin":{"type":["number"],"description":"<p>The margin between the axis label and the axis line.</p>\n","default":8},"formatter":{"type":["string","Function"],"description":"<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Use string template; template variable is the default label of axis {value}\nformatter: &#39;{value} kg&#39;\n\n// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (idx === 0) {\n        texts.unshift(date.getYear());\n    }\n    return texts.join(&#39;/&#39;);\n}\n</code></pre>\n","default":null},"showMinLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the min tick. Optional values: <code class=\"codespan\">true</code>, <code class=\"codespan\">false</code>, <code class=\"codespan\">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.</p>\n","default":null},"showMaxLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the max tick. Optional values: <code class=\"codespan\">true</code>, <code class=\"codespan\">false</code>, <code class=\"codespan\">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.</p>\n","default":null},"color":{"type":["Color","Function"],"description":"<p>Color of axis label is set to be <a href=\"#angleAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class=\"lang-js\">(val: string) =&gt; Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class=\"lang-js\">textStyle: {\n    color: function (value, index) {\n        return value &gt;= 0 ? &#39;green&#39; : &#39;red&#39;;\n    }\n}\n</code></pre>\n"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n\n","default":0}}}}}}},"splitLine":{"type":["Object"],"description":"<p>Split line of axis in <a href=\"#grid\">grid</a> area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the splitLine from showing.\n<code class=\"codespan\">value</code> type axes are shown by default, while <code class=\"codespan\">category</code> type axes are hidden.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>Interval of Axis splitLine, which is available in category axis.  is set to be the same as <a href=\"#angleAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Array","string"],"description":"<p>The color of the splitLine, which could be set separately.</p>\n<p>SplitLine color could also be set in color array, which the split lines would take as their colors in turns.</p>\n<p>Example:</p>\n<pre><code>splitLine: {\n    lineStyle: {\n        // Dark and light colors will be used in turns\n        color: [&#39;#aaa&#39;, &#39;#ddd&#39;]\n    }\n}\n</code></pre>","default":"['#ccc']"},"width":{"type":["number"],"description":"<p>splitLine line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>splitLine line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"minorSplitLine":{"type":["Object"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.6.0</code></p>\n</blockquote>\n<p>Minor split lines of axis in the <a href=\"#grid\">grid</a> area。It will align to the <a href=\"#angleAxis.minorTick\">minorTick</a></p>\n","properties":{"show":{"type":["boolean"],"description":"<p>If show minor split lines.</p>\n","default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>minorSplitLineLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#eee'"},"width":{"type":["number"],"description":"<p>minorSplitLine line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>minorSplitLine line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"splitArea":{"type":["Object"],"description":"<p>Split area of axis in <a href=\"#grid\">grid</a> area, not shown by default.</p>\n","properties":{"interval":{"type":["number","Function"],"description":"<p>Interval of Axis splitArea, which is available in category axis.  is set to be the same as <a href=\"#angleAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to show the splitArea.</p>\n","default":false},"areaStyle":{"type":["Object"],"description":"<p>Split area style.</p>\n","properties":{"color":{"type":["Array"],"description":"<p>Color of split area.\nSplitArea color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.</p>\n","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Category data, available in <a href=\"#angleAxis.type\">type</a>: &#39;category&#39; axis.</p>\n<p>If <a href=\"#angleAxis.type\">type</a> is not specified, but <code class=\"codespan\">axis.data</code> is specified, the <a href=\"#angleAxis.type\">type</a> is auto set as <code class=\"codespan\">&#39;category&#39;</code>.</p>\n<p>If <a href=\"#angleAxis.type\">type</a> is specified as <code class=\"codespan\">&#39;category&#39;</code>, but <code class=\"codespan\">axis.data</code> is not specified, <code class=\"codespan\">axis.data</code> will be auto collected from <a href=\"#series.data\">series.data</a>. It brings convenience, but we should notice that <code class=\"codespan\">axis.data</code> provides then value range of the <code class=\"codespan\">&#39;category&#39;</code> axis. If  it is auto collected from <a href=\"#series.data\">series.data</a>, Only the values appearing in <a href=\"#series.data\">series.data</a> can be collected. For example, if <a href=\"#series.data\">series.data</a> is empty, nothing will be collected.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Name list of all categories\ndata: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n// Each item could also be a specific configuration item.\n// In this case, `value` is used as the category name.\ndata: [{\n    value: &#39;Monday&#39;,\n    // Highlight Monday\n    textStyle: {\n        fontSize: 20,\n        color: &#39;red&#39;\n    }\n}, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n</code></pre>\n","items":{"type":"Object","properties":{"value":{"type":["string"],"description":"<p>Name of a category.</p>\n"},"textStyle":{"type":["Object"],"description":"<p>Text style of the category.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}},"axisPointer":{"type":["Object"],"description":"<p>axisPointer settings on the axis.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>axisPointer will not be displayed by default. But if <a href=\"#tooltip.trigger\">tooltip.trigger</a> is set as <code class=\"codespan\">&#39;axis&#39;</code> or <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as  <code class=\"codespan\">&#39;cross&#39;</code>, axisPointer will be displayed automatically. Each coordinate system will automatically chose the axes whose will display its axisPointer. <a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> can be used to change the choice.</p>\n","default":false},"type":{"type":["string"],"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;line&#39;</code> line indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;shadow&#39;</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;none&#39;</code> no indicator displayed.</p>\n</li>\n</ul>\n","default":"'line'"},"snap":{"type":["boolean"],"description":"<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n"},"z":{"type":["number"],"description":"<p>z value, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n"},"label":{"type":["Object"],"description":"<p>label of axisPointer</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label. Label will not show by default. But if <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as  <code class=\"codespan\">&#39;cross&#39;</code>, label will be displayed automatically.</p>\n","default":false},"precision":{"type":["number","string"],"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code class=\"codespan\">&#39;2&#39;</code>, which indicates that two decimal fractions are reserved.</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"<p>The formatter of label.</p>\n<p>If set as <code class=\"codespan\">string</code>, for example it can be: <code class=\"codespan\">formatter: &#39;some text {value} some text</code>, where <code class=\"codespan\">{value}</code> will be replaced by axis value automatically.</p>\n<p>If set as <code class=\"codespan\">function</code>:</p>\n<p><strong>Parameters:</strong></p>\n<p><code class=\"codespan\">{Object}</code> params: Including fields as follows:</p>\n<p><code class=\"codespan\">{Object}</code> params.value: current value of this axis. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;category&#39;</code>, it is one of the value in <code class=\"codespan\">axis.data</code>. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;time&#39;</code>, it is a timestamp.</p>\n<p><code class=\"codespan\">{Array.&lt;Object&gt;}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<p><code class=\"codespan\">{string}</code> params.axisDimension: The dimension name of the axis. For example, in catesian it will be <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, and in polar it will be <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code>.</p>\n<p><code class=\"codespan\">{number}</code> params.axisIndex: The index of the axis, for example, <code class=\"codespan\">0</code>,<code class=\"codespan\">1</code>, <code class=\"codespan\">2</code>, ...</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n    axisDim: &#39;x&#39;, // &#39;x&#39;, &#39;y&#39;, &#39;angle&#39;, &#39;radius&#39;, &#39;single&#39;\n    axisId: &#39;xxx&#39;,\n    axisName: &#39;xxx&#39;,\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: &#39;text of value&#39;\n}\n</code></pre>\n<p><strong>Return:</strong></p>\n<p>The string to be displayed.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n    // If axis.type is &#39;time&#39;\n    return &#39;some text&#39; + echarts.format.formatTime(params.value);\n}\n</code></pre>\n","default":null},"margin":{"type":["boolean"],"description":"<p>Distance between label and axis.</p>\n","default":3},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"padding":{"type":["string","Array"],"description":"<p>axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"<p>Border color of label.</p>\n","default":null},"borderWidth":{"type":["string"],"description":"<p>Border width of label.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"lineStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;line&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"shadowStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;shadow&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"triggerTooltip":{"type":["boolean"],"description":"<p>Whether to trigger tooltip.</p>\n","default":true},"value":{"type":["number"],"description":"<p>current value. When using <a href=\"xAxisPointer.handle\" target=\"_blank\">axisPointer.handle</a>, <code class=\"codespan\">value</code> can be set to define the initail position of axisPointer.</p>\n","default":null},"status":{"type":["boolean"],"description":"<p>Current status, can be <code class=\"codespan\">&#39;show&#39;</code> 和 <code class=\"codespan\">&#39;hide&#39;</code>.</p>\n"},"handle":{"type":["Object"],"description":"<p>A button used to drag axisPointer. This feature is applicable in touch device. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set to <code class=\"codespan\">true</code> to use handle.</p>\n","default":false},"icon":{"type":["*"],"description":"<p>The icon of the handle.</p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/axisPointer-handle-image&amp;edit=1&amp;reset=1\" target=\"_blank\">example of using image</a></p>\n"},"size":{"type":["number","Array"],"description":"<p>The size of the handle, which can be set as a single value or an array (<code class=\"codespan\">[width, height]</code>).</p>\n","default":45},"margin":{"type":["number"],"description":"<p>Distance from handle center to axis.</p>\n","default":50},"color":{"type":["string"],"description":"<p>The color of the handle.</p>\n","default":"'#333'"},"throttle":{"type":["number"],"description":"<p>Throttle rate of trigger view update when dragging handle, in ms. Increase the value to improve performance, but decrease the experience.</p>\n","default":40},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":2},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}}}},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in Angle Axis.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in Angle Axis, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":0}}},"radar":{"type":["Object"],"description":"<p>Coordinate for <a href=\"#series-radar\">radar charts</a>. This component is equal to the polar component in ECharts 2. Because the polar component in the echarts 3 is reconstructed to be the standard polar coordinate component, this component is renamed to be radar to avoid confusion.</p>\n<p>Radar chart coordinate is different from polar coordinate, in that every axis indicator of the radar chart coordinate is an individual dimension. The style of indicator coordinate axis could be configured through the following configuration items, including <a href=\"#radar.name\">name</a>, <a href=\"#radar.axisLine\">axisLine</a>, <a href=\"#radar.axisTick\">axisTick</a>, <a href=\"#radar.axisLabel\">axisLabel</a>, <a href=\"#radar.splitLine\">splitLine</a>, <a href=\"#radar.splitArea\">splitArea</a>.</p>\n<p>Here is a custom example of radar component.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/radar&edit=1&reset=1\" width=\"400\" height=\"400\"><iframe />\n\n\n\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"center":{"type":["Array"],"description":"<p>Center position of , the first of which is the horizontal position, and the second is the vertical position.</p>\n<p>Percentage is supported. When set in percentage, the item is relative to the container width, and the second item to the height.</p>\n<p><strong>Example: </strong></p>\n<pre><code>// Set to absolute pixel values\ncenter: [400, 300]\n// Set to relative percent\ncenter: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>","default":"['50%', '50%']"},"radius":{"type":["number","string","Array"],"description":"<p>Radius of . Value can be:</p>\n<ul>\n<li><code class=\"codespan\">number</code>: Specify outside radius directly.</li>\n<li><p><code class=\"codespan\">string</code>: For example, <code class=\"codespan\">&#39;20%&#39;</code>, means that the outside radius is 20% of the viewport size (the little one between width and height of the chart container).</p>\n</li>\n<li><p><code class=\"codespan\">Array.&lt;number|string&gt;</code>: The first item specifies the inside radius, and the second item specifies the outside radius. Each item follows the definitions above.</p>\n</li>\n</ul>\n","default":"75%"},"startAngle":{"type":["number"],"description":"<p>The start angle of coordinate, which is the angle of the first indicator axis.</p>\n","default":90},"name":{"type":["Object"],"description":"<p>Name of radar chart.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to display the indicator&#39;s name.</p>\n","default":true},"formatter":{"type":["string","Function"],"description":"<p>The formatter of indicator&#39;s name, in which the string and callback function are supported. See the following example:</p>\n<pre><code class=\"lang-js\">// using string template, the template variable should be the indicator&#39;s name {value}\nformatter: &#39;【{value}】&#39;\n// using callback function, the first parameter is the indicator&#39;s name, and the second parameter id the indicator&#39;s cinfiguration item\nformatter: function (value, indicator) {\n    return &#39;【&#39; + value + &#39;】&#39;;\n}\n</code></pre>\n"}}},"textStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#333'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"nameGap":{"type":["number"],"description":"<p>Distance between the indicator&#39;s name and axis.</p>\n","default":15},"splitNumber":{"type":["number"],"description":"<p>Segments of indicator axis.</p>\n","default":5},"shape":{"type":["string"],"description":"<p>Radar render type, in which <code class=\"codespan\">&#39;polygon&#39;</code> and <code class=\"codespan\">&#39;circle&#39;</code> are supported.</p>\n","default":"'polygon'"},"scale":{"type":["boolean"],"description":"<p>Whether to prevent calculating the scaling relative to zero. If it is set to be <code class=\"codespan\">true</code>, the coordinate tick would not compulsorily contain zero value, which is usually useful in scatter diagram of double numerical values axis.</p>\n","default":false},"silent":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code>, to prevent interaction with the axis.</p>\n","default":false},"triggerEvent":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to enable triggering events.</p>\n<p>Parameters of the event include:</p>\n<pre><code class=\"lang-js\">{\n    // Component type: xAxis, yAxis, radiusAxis, angleAxis\n    // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n    componentType: string,\n    // Value on axis before being formatted.\n    // Click on value label to trigger event.\n    value: &#39;&#39;,\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: &#39;&#39;\n}\n</code></pre>\n","default":false},"axisLine":{"type":["Object"],"description":"<p>Settings related to axis line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n","default":true},"symbol":{"type":["string","Array"],"description":"<p>Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It&#39;s set to be <code class=\"codespan\">&#39;none&#39;</code> by default, meaning no arrow for either end. If it is set to be <code class=\"codespan\">&#39;arrow&#39;</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code class=\"codespan\">[&#39;none&#39;, &#39;arrow&#39;]</code>.</p>\n","default":"'none'"},"symbolSize":{"type":["Array"],"description":"<p>Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.</p>\n","default":"[10, 15]"},"symbolOffset":{"type":["Array","number"],"description":"<p>Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>line styleLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#333'"},"width":{"type":["number"],"description":"<p>line style line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>line style line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"axisTick":{"type":["Object"],"description":"<p>Settings related to axis tick.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis tick from showing.</p>\n","default":true},"length":{"type":["number"],"description":"<p>The length of the axis tick.</p>\n","default":5},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Color of axis label is set to be <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"width":{"type":["number"],"description":"<p>axisTick line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>axisTick line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"axisLabel":{"type":["Object"],"description":"<p>Settings related to axis label.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis label from appearing.</p>\n","default":true},"rotate":{"type":["number"],"description":"<p>Rotation degree of axis label, which is especially useful when there is no enough space for category axis.</p>\n<p>Rotation degree is from -90 to 90.</p>\n","default":0},"margin":{"type":["number"],"description":"<p>The margin between the axis label and the axis line.</p>\n","default":8},"formatter":{"type":["string","Function"],"description":"<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Use string template; template variable is the default label of axis {value}\nformatter: &#39;{value} kg&#39;\n\n// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (idx === 0) {\n        texts.unshift(date.getYear());\n    }\n    return texts.join(&#39;/&#39;);\n}\n</code></pre>\n","default":null},"showMinLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the min tick. Optional values: <code class=\"codespan\">true</code>, <code class=\"codespan\">false</code>, <code class=\"codespan\">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.</p>\n","default":null},"showMaxLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the max tick. Optional values: <code class=\"codespan\">true</code>, <code class=\"codespan\">false</code>, <code class=\"codespan\">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.</p>\n","default":null},"color":{"type":["Color","Function"],"description":"<p>Color of axis label is set to be <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class=\"lang-js\">(val: string) =&gt; Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class=\"lang-js\">textStyle: {\n    color: function (value, index) {\n        return value &gt;= 0 ? &#39;green&#39; : &#39;red&#39;;\n    }\n}\n</code></pre>\n"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n\n","default":0}}}}}}},"splitLine":{"type":["Object"],"description":"<p>Split line of axis in <a href=\"#grid\">grid</a> area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the splitLine from showing.\n<code class=\"codespan\">value</code> type axes are shown by default, while <code class=\"codespan\">category</code> type axes are hidden.</p>\n","default":true},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Array","string"],"description":"<p>The color of the splitLine, which could be set separately.</p>\n<p>SplitLine color could also be set in color array, which the split lines would take as their colors in turns.</p>\n<p>Example:</p>\n<pre><code>splitLine: {\n    lineStyle: {\n        // Dark and light colors will be used in turns\n        color: [&#39;#aaa&#39;, &#39;#ddd&#39;]\n    }\n}\n</code></pre>","default":"['#ccc']"},"width":{"type":["number"],"description":"<p>splitLine line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>splitLine line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"splitArea":{"type":["Object"],"description":"<p>Split area of axis in <a href=\"#grid\">grid</a> area, not shown by default.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to show the splitArea.</p>\n","default":true},"areaStyle":{"type":["Object"],"description":"<p>Split area style.</p>\n","properties":{"color":{"type":["Array"],"description":"<p>Color of split area.\nSplitArea color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.</p>\n","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"indicator":{"type":["Array"],"description":"<p>Indicator of radar chart, which is used to assign multiple variables(dimensions) in radar chart. Here is the example.</p>\n<pre><code class=\"lang-js\">indicator: [\n   { name: &#39;Sales (sales) &#39;, max: 6500},\n   { name: &#39;Administration (Administration) &#39;, max: 16000, color: &#39;red&#39;}, // Set the indicator as &#39;red&#39;\n   { name: &#39;Information Technology (Information Technology) &#39;, max: 30000},\n   { name: &#39;Customer Support (Customer Support) &#39;, max: 38000},\n   { name: &#39;Development (Development) &#39;, max: 52000},\n   { name: &#39;Marketing (Marketing) &#39;, max: 25000}\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Indicator&#39;s name.</p>\n"},"max":{"type":["number"],"description":"<p>The maximum value of indicator. It is an optional configuration, but we recommend to set it manually.</p>\n"},"min":{"type":["number"],"description":"<p>The minimum value of indicator. It it an optional configuration, with default value of 0.</p>\n"}}}},"color":{"type":["string"],"description":"<p>Specfy a color the the indicator.</p>\n"}}},"dataZoom":{"type":"Array","items":{"anyOf":[{"type":["Object"],"description":"<p><strong>dataZoomInside</strong></p>\n<p>Data zoom component of <em>inside</em> type.</p>\n<p>Refer to <a href=\"#dataZoom\">dataZoom</a> for more information.</p>\n<p>The <em>inside</em> means it&#39;s inside the coordinates.</p>\n<ul>\n<li>Translation: data area can be translated when moving in coordinates.</li>\n<li>Scaling:<ul>\n<li>PC: when mouse rolls (similar with touch pad) in coordinates.</li>\n<li>Mobile: when touches and moved with two fingers in coordinates on touch screens.</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<br></p>\n","properties":{"type":{"type":["string"],"description":"","default":"'inside'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"disabled":{"type":["boolean"],"description":"<p>Whether disable inside zoom.</p>\n","default":false},"xAxisIndex":{"type":["number","Array"],"description":"<p>Specify which <a href=\"#xAxis\">xAxis</a> is/are controlled by the <code class=\"codespan\">dataZoom-inside</code> when <a href=\"#grid\">catesian coordinate system</a> is used.</p>\n<p>By default the first <code class=\"codespan\">xAxis</code> that parallel to <code class=\"codespan\">dataZoom</code> are controlled when <a href=\"#dataZoom-inside.orient\">dataZoom-inside.orient</a> is set as <code class=\"codespan\">&#39;horizontal&#39;</code>. But it is recommended to specify it explicitly but not use default value.</p>\n<p>If it is set as a single <code class=\"codespan\">number</code>, one axis is controlled, while if it is set as an <code class=\"codespan\">Array</code> , multiple axes are controlled.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">option: {\n    xAxis: [\n        {...}, // The first xAxis\n        {...}, // The second xAxis\n        {...}, // The third xAxis\n        {...}  // The fourth xAxis\n    ],\n    dataZoom: [\n        { // The first dataZoom component\n            xAxisIndex: [0, 2] // Indicates that this dataZoom component\n                                     // controls the first and the third xAxis\n        },\n        { // The second dataZoom component\n            xAxisIndex: 3      // indicates that this dataZoom component\n                                     // controls the fourth xAxis\n        }\n    ]\n}\n</code></pre>\n","default":null},"yAxisIndex":{"type":["number","Array"],"description":"<p>Specify which <a href=\"#yAxis\">yAxis</a> is/are controlled by the <code class=\"codespan\">dataZoom-inside</code> when <a href=\"#grid\">catesian coordinate system</a> is used.</p>\n<p>By default the first <code class=\"codespan\">yAxis</code> that parallel to <code class=\"codespan\">dataZoom</code> are controlled when <a href=\"#dataZoom-inside.orient\">dataZoom-inside.orient</a> is set as <code class=\"codespan\">&#39;vertical&#39;</code>. But it is recommended to specify it explicitly but not use default value.</p>\n<p>If it is set as a single <code class=\"codespan\">number</code>, one axis is controlled, while if it is set as an <code class=\"codespan\">Array</code> , multiple axes are controlled.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">option: {\n    yAxis: [\n        {...}, // The first yAxis\n        {...}, // The second yAxis\n        {...}, // The third yAxis\n        {...}  // The fourth yAxis\n    ],\n    dataZoom: [\n        { // The first dataZoom component\n            yAxisIndex: [0, 2] // Indicates that this dataZoom component\n                                     // controls the first and the third yAxis\n        },\n        { // The second dataZoom component\n            yAxisIndex: 3      // indicates that this dataZoom component\n                                     // controls the fourth yAxis\n        }\n    ]\n}\n</code></pre>\n","default":null},"radiusAxisIndex":{"type":["number","Array"],"description":"<p>Specify which <a href=\"#radiusAxis\">radiusAxis</a> is/are controlled by the <code class=\"codespan\">dataZoom-inside</code> when <a href=\"#polar\">polar coordinate system</a> is used.</p>\n<p>If it is set as a single <code class=\"codespan\">number</code>, one axis is controlled, while if it is set as an <code class=\"codespan\">Array</code> , multiple axes are controlled.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">option: {\n    radiusAxis: [\n        {...}, // The first radiusAxis\n        {...}, // The second radiusAxis\n        {...}, // The third radiusAxis\n        {...}  // The fourth radiusAxis\n    ],\n    dataZoom: [\n        { // The first dataZoom component\n            radiusAxisIndex: [0, 2] // Indicates that this dataZoom component\n                                     // controls the first and the third radiusAxis\n        },\n        { // The second dataZoom component\n            radiusAxisIndex: 3      // indicates that this dataZoom component\n                                     // controls the fourth radiusAxis\n        }\n    ]\n}\n</code></pre>\n","default":null},"angleAxisIndex":{"type":["number","Array"],"description":"<p>Specify which <a href=\"#angleAxis\">angleAxis</a> is/are controlled by the <code class=\"codespan\">dataZoom-inside</code> when <a href=\"#polar\">polar coordinate system</a> is used.</p>\n<p>If it is set as a single <code class=\"codespan\">number</code>, one axis is controlled, while if it is set as an <code class=\"codespan\">Array</code> , multiple axes are controlled.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">option: {\n    angleAxis: [\n        {...}, // The first angleAxis\n        {...}, // The second angleAxis\n        {...}, // The third angleAxis\n        {...}  // The fourth angleAxis\n    ],\n    dataZoom: [\n        { // The first dataZoom component\n            angleAxisIndex: [0, 2] // Indicates that this dataZoom component\n                                     // controls the first and the third angleAxis\n        },\n        { // The second dataZoom component\n            angleAxisIndex: 3      // indicates that this dataZoom component\n                                     // controls the fourth angleAxis\n        }\n    ]\n}\n</code></pre>\n","default":null},"filterMode":{"type":["string"],"description":"<p>Generally <code class=\"codespan\">dataZoom</code> component zoom or roam coordinate system through data filtering and set the windows of axes internally.</p>\n<p>Its behaviours vary according to filtering mode settings (<a href=\"#dataZoom.filterMode\">dataZoom.filterMode</a>).</p>\n<p>Possible values:</p>\n<ul>\n<li><p>&#39;filter&#39;: data that outside the window will be <strong>filtered</strong>, which may lead to some changes of windows of other axes. For each data item, it will be filtered if one of the relevant dimensions is out of the window.</p>\n</li>\n<li><p>&#39;weakFilter&#39;: data that outside the window will be <strong>filtered</strong>, which may lead to some changes of windows of other axes. For each data item, it will be filtered only if all of the relevant dimensions are out of the same side of the window.</p>\n</li>\n<li><p>&#39;empty&#39;: data that outside the window will be <strong>set to NaN</strong>, which will not lead to changes of windows of other axes.</p>\n</li>\n<li><p>&#39;none&#39;: Do not filter data.</p>\n</li>\n</ul>\n<p>How to set <code class=\"codespan\">filterMode</code> is up to users, depending on the requirments and scenarios. Expirically:</p>\n<ul>\n<li><p>If only <code class=\"codespan\">xAxis</code> or only <code class=\"codespan\">yAxis</code> is controlled by <code class=\"codespan\">dataZoom</code>, <code class=\"codespan\">filterMode: &#39;filter&#39;</code> is typically used, which enable the other axis auto adapte its window to the extent of the filtered data.</p>\n</li>\n<li><p>If both <code class=\"codespan\">xAxis</code> and <code class=\"codespan\">yAxis</code> are operated by <code class=\"codespan\">dataZoom</code>:</p>\n<ul>\n<li><p>If <code class=\"codespan\">xAxis</code> and <code class=\"codespan\">yAxis</code> should not effect mutually (e.g. a scatter chart with both axes on the type of <code class=\"codespan\">&#39;value&#39;</code>), they should be set to be <code class=\"codespan\">filterMode: &#39;empty&#39;</code>.</p>\n</li>\n<li><p>If <code class=\"codespan\">xAxis</code> is the main axis and <code class=\"codespan\">yAxis</code> is the auxiliary axis (or vise versa) (e.g., in a bar chart, when dragging <code class=\"codespan\">dataZoomX</code> to change the window of xAxis, we need the yAxis to adapt to the clipped data, but when dragging <code class=\"codespan\">dataZoomY</code> to change the window of yAxis, we need the xAxis not to be changed), in this case, <code class=\"codespan\">xAxis</code> should be set to be <code class=\"codespan\">fiterMode: &#39;filter&#39;</code>, while <code class=\"codespan\">yAxis</code> should be set to be <code class=\"codespan\">fiterMode: &#39;empty&#39;</code>.</p>\n</li>\n</ul>\n</li>\n</ul>\n<p>It can be demonstrated by the sample:</p>\n<pre><code class=\"lang-javascript\">option = {\n    dataZoom: [\n        {\n            id: &#39;dataZoomX&#39;,\n            type: &#39;slider&#39;,\n            xAxisIndex: [0],\n            filterMode: &#39;filter&#39;\n        },\n        {\n            id: &#39;dataZoomY&#39;,\n            type: &#39;slider&#39;,\n            yAxisIndex: [0],\n            filterMode: &#39;empty&#39;\n        }\n    ],\n    xAxis: {type: &#39;value&#39;},\n    yAxis: {type: &#39;value&#39;},\n    series{\n        type: &#39;bar&#39;,\n        data: [\n            // The first column corresponds to xAxis,\n            // and the second coloum corresponds to yAxis.\n            [12, 24, 36],\n            [90, 80, 70],\n            [3, 9, 27],\n            [1, 11, 111]\n        ]\n    }\n}\n</code></pre>\n<p>In the sample above, <code class=\"codespan\">dataZoomX</code> is set as <code class=\"codespan\">filterMode: &#39;filter&#39;</code>. When use drags <code class=\"codespan\">dataZoomX</code> (do not touch <code class=\"codespan\">dataZoomY</code>) and the valueWindow of <code class=\"codespan\">xAxis</code> is changed to <code class=\"codespan\">[2, 50]</code> consequently, <code class=\"codespan\">dataZoomX</code> travel the first column of series.data and filter items that out of the window. The series.data turns out to be:</p>\n<pre><code class=\"lang-javascript\">[\n    [12, 24, 36],\n    // [90, 80, 70] This item is filtered, as 90 is out of the window.\n    [3, 9, 27]\n    // [1, 11, 111] This item is filtered, as 1 is out of the window.\n]\n</code></pre>\n<p>Before filtering, the second column, which corresponds to yAxis, has values <code class=\"codespan\">24</code>, <code class=\"codespan\">80</code>, <code class=\"codespan\">9</code>, <code class=\"codespan\">11</code>. After filtering, only <code class=\"codespan\">24</code> and <code class=\"codespan\">9</code> are left. Then the extent of <code class=\"codespan\">yAxis</code> is adjusted to adapt the two values (if <code class=\"codespan\">yAxis.min</code> and <code class=\"codespan\">yAxis.man</code> are not set).</p>\n<p>So <code class=\"codespan\">filterMode: &#39;filter&#39;</code> can be used to enable the other axis to auto adapt the filtered data.</p>\n<p>Then let&#39;s review the sample from the beginning, <code class=\"codespan\">dataZoomY</code> is set as <code class=\"codespan\">filterMode: &#39;empty&#39;</code>. So if user drags <code class=\"codespan\">dataZoomY</code> (do not touch <code class=\"codespan\">dataZoomX</code>) and its window is changed to <code class=\"codespan\">[10, 60]</code> consequently, <code class=\"codespan\">dataZoomY</code> travels the second column of series.data and set NaN to all of the values that outside the window (NaN cause the graphical elements, i.e., bar elements, do not show, but still hold the place). The series.data turns out to be:</p>\n<pre><code class=\"lang-javascript\">[\n    [12, 24, 36],\n    [90, NaN, 70], // Set to NaN\n    [3, NaN, 27],  // Set to NaN\n    [1, 11, 111]\n]\n</code></pre>\n<p>In this case, the first column (i.e., <code class=\"codespan\">12</code>, <code class=\"codespan\">90</code>, <code class=\"codespan\">3</code>, <code class=\"codespan\">1</code>, which corresponds to <code class=\"codespan\">xAxis</code>), will not be changed at all. So dragging <code class=\"codespan\">yAxis</code> will not change extent of <code class=\"codespan\">xAxis</code>, which is good for requirements like outlier filtering.</p>\n<p>See this example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/bar-dataZoom-filterMode&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n\n\n\n\n","default":"'filter'"},"start":{"type":["number"],"description":"<p>The start percentage of the window out of the data extent, in the range of 0 ~ 100.</p>\n<p><a href=\"#dataZoom-inside.start\">dataZoom-inside.start</a> and <a href=\"#dataZoom-inside.end\">dataZoom-inside.end</a> define the window of the data in <strong>percent</strong> form.</p>\n<p>More info about the relationship between <code class=\"codespan\">dataZoom-inside.start</code> and axis extent can be checked in <a href=\"#dataZoom-inside.rangeMode\">dataZoom-inside.rangeMode</a>.</p>\n","default":0},"end":{"type":["number"],"description":"<p>The end percentage of the window out of the data extent, in the range of 0 ~ 100.</p>\n<p><a href=\"#dataZoom-inside.start\">dataZoom-inside.start</a> and <a href=\"#dataZoom-inside.end\">dataZoom-inside.end</a> define the window of the data in <strong>percent</strong> form.</p>\n<p>More info about the relationship between <code class=\"codespan\">dataZoom-inside.end</code> and axis extent can be checked in <a href=\"#dataZoom-inside.rangeMode\">dataZoom-inside.rangeMode</a>.</p>\n","default":100},"startValue":{"type":["number","string","Date"],"description":"<p>The start absolute value of the window, not works when <a href=\"#dataZoom-inside.start\">dataZoom-inside.start</a> is set.</p>\n<p><a href=\"#dataZoom-inside.startValue\">dataZoom-inside.startValue</a> and <a href=\"#dataZoom-inside.endValue\">dataZoom-inside.endValue</a> define the window of the data window in <strong>absolute value</strong> form.</p>\n<p>Notice, if an axis is set to be <code class=\"codespan\">category</code>, <code class=\"codespan\">startValue</code> could be set as <code class=\"codespan\">index</code> of the array of <code class=\"codespan\">axis.data</code> or as the array value itself. In the latter case, it will internally and automatically translate to the index of array.</p>\n<p>More info about the relationship between <code class=\"codespan\">dataZoom-inside.startValue</code> and axis extent can be checked in <a href=\"#dataZoom-inside.rangeMode\">dataZoom-inside.rangeMode</a>.</p>\n","default":null},"endValue":{"type":["number","string","Date"],"description":"<p>The end absolute value of the window, doesn&#39;t work when <a href=\"#dataZoom-inside.end\">dataZoom-inside.end</a> is set.</p>\n<p><a href=\"#dataZoom-inside.startValue\">dataZoom-inside.startValue</a> and <a href=\"#dataZoom-inside.endValue\">dataZoom-inside.endValue</a> define the window of the data window in <strong>absolute value</strong> form.</p>\n<p>Notice, if an axis is set to be <code class=\"codespan\">category</code>, <code class=\"codespan\">startValue</code> could be set as <code class=\"codespan\">index</code> of the array of <code class=\"codespan\">axis.data</code> or as the array value itself. In the latter case, it will internally and automatically translate to the index of array.</p>\n<p>More info about the relationship between <code class=\"codespan\">dataZoom-inside.endValue</code> and axis extent can be checked in <a href=\"#dataZoom-inside.rangeMode\">dataZoom-inside.rangeMode</a>.</p>\n","default":null},"minSpan":{"type":["number"],"description":"<p>Used to restrict minimal window size, in percent, which value is in the range of [0, 100].</p>\n<p>If <a href=\"#dataZoom-inside.minValueSpan\">dataZoom-inside.minValueSpan</a> is set, <code class=\"codespan\">minSpan</code> does not work any more.</p>\n","default":null},"maxSpan":{"type":["number"],"description":"<p>Used to restrict maximal window size, in percent, which value is in the range of [0, 100].</p>\n<p>If <a href=\"#dataZoom-inside.maxValueSpan\">dataZoom-inside.maxValueSpan</a> is set, <code class=\"codespan\">maxSpan</code> does not work any more.</p>\n","default":null},"minValueSpan":{"type":["number","string","Date"],"description":"<p>Used to restrict minimal window size.</p>\n<p>For example:\nIn time axis it can be set as <code class=\"codespan\">3600 * 24 * 1000 * 5</code> to represent &quot;5 day&quot;.\nIn category axis it can be set as <code class=\"codespan\">5</code> to represent 5 categories.</p>\n","default":null},"maxValueSpan":{"type":["number","string","Date"],"description":"<p>Used to restrict maximal window size.</p>\n<p>For example:\nIn time axis it can be set as <code class=\"codespan\">3600 * 24 * 1000 * 5</code> to represent &quot;5 day&quot;.\nIn category axis it can be set as <code class=\"codespan\">5</code> to represent 5 categories.</p>\n","default":null},"orient":{"type":["string"],"description":"<p>Specify whether the layout of <code class=\"codespan\">dataZoom</code> component is horizontal or vertical. What&#39;s more, it indicates whether the horizontal axis or vertical axis is controlled by default in catesian coordinate system.</p>\n<p>Valid values:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;horizontal&#39;</code>: horizontal.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;vertical&#39;</code>: vertical.</p>\n</li>\n</ul>\n","default":null},"zoomLock":{"type":["boolean"],"description":"<p>Specify whether to lock the size of window (selected area).</p>\n<p>When set as <code class=\"codespan\">true</code>, the size of window is locked, that is, only the translation (by mouse drag or touch drag) is avialable but zoom is not.</p>\n","default":false},"throttle":{"type":["number"],"description":"<p>Specify the frame rate of views refreshing, with unit millisecond (ms).</p>\n<p>If <a href=\"#animation\">animation</a> set as <code class=\"codespan\">true</code> and <a href=\"#animationDurationUpdate\">animationDurationUpdate</a> set as bigger than <code class=\"codespan\">0</code>, you can keep <code class=\"codespan\">throttle</code> as the default value <code class=\"codespan\">100</code> (or set it as a value bigger than <code class=\"codespan\">0</code>), otherwise it might be not smooth when dragging.</p>\n<p>If <a href=\"#animation\">animation</a> set as <code class=\"codespan\">false</code> or <a href=\"#animationDurationUpdate\">animationDurationUpdate</a> set as <code class=\"codespan\">0</code>, and data size is not very large, and it seems to be not smooth when dragging, you can set <code class=\"codespan\">throttle</code> as <code class=\"codespan\">0</code> to improve that.</p>\n","default":100},"rangeMode":{"type":["Array"],"description":"<p>The format is <code class=\"codespan\">[rangeModeForStart, rangeModeForEnd]</code>.</p>\n<p>For example <code class=\"codespan\">rangeMode: [&#39;value&#39;, &#39;percent&#39;]</code> means that use absolute value in <code class=\"codespan\">start</code> and percent value in <code class=\"codespan\">end</code>.</p>\n<p>Optional value for each item: <code class=\"codespan\">&#39;value&#39;</code>, <code class=\"codespan\">&#39;percent&#39;</code>.</p>\n<ul>\n<li><code class=\"codespan\">&#39;value&#39;</code> mode: the axis extent will always only be determined by <code class=\"codespan\">dataZoom.startValue</code> and <code class=\"codespan\">dataZoom.endValue</code>, despite how data like and how <code class=\"codespan\">axis.min</code> and <code class=\"codespan\">axis.max</code> are.</li>\n<li><code class=\"codespan\">&#39;percent&#39;</code> mode: <code class=\"codespan\">100</code> represents 100% of the <code class=\"codespan\">[dMin, dMax]</code>, where <code class=\"codespan\">dMin</code> is <code class=\"codespan\">axis.min</code> if <code class=\"codespan\">axis.min</code> specified, otherwise <code class=\"codespan\">data.extent[0]</code>, and <code class=\"codespan\">dMax</code> is <code class=\"codespan\">axis.max</code> if <code class=\"codespan\">axis.max</code> specified, otherwise <code class=\"codespan\">data.extent[1]</code>. Axis extent will only be determined by the result of the percent of <code class=\"codespan\">[dMin, dMax]</code>.</li>\n</ul>\n<p><code class=\"codespan\">rangeMode</code> are auto determined by whether <code class=\"codespan\">option.start</code>/<code class=\"codespan\">option.end</code> are specified (represents <code class=\"codespan\">&#39;percent&#39;</code> mode) or <code class=\"codespan\">option.startValue</code>/<code class=\"codespan\">option.endValue</code> specified (represents <code class=\"codespan\">&#39;value&#39;</code> mode). And when user behavior trigger the changing of the view, the <code class=\"codespan\">rangeMode</code> would be modified automatically. For example, if triggered by <code class=\"codespan\">toolbox.dataZoom</code>, it will be modefied to <code class=\"codespan\">&#39;value&#39;</code>, and if triggered by <code class=\"codespan\">dataZoom-inside</code> or <code class=\"codespan\">dataZoom-slider</code>, it will be modified to <code class=\"codespan\">&#39;percent&#39;</code>.</p>\n<p>If we specify <code class=\"codespan\">rangeMode</code> manually in <code class=\"codespan\">option</code>, it only works when both <code class=\"codespan\">start</code> and <code class=\"codespan\">startValue</code> specified or both <code class=\"codespan\">end</code> and <code class=\"codespan\">endValue</code> specified. So usually we do not need to specify <code class=\"codespan\">dataZoom.rangeMode</code> manually.</p>\n<p>Take a scenario as an example. When we are using dynamic data (update data periodically via <code class=\"codespan\">setOption</code>), if in <code class=\"codespan\">&#39;value</code>&#39; mode, the window will be kept in a fixed value range despite how data are appended, while if in <code class=\"codespan\">&#39;percent&#39;</code> mode, whe window range will be changed alone with the appended data (suppose <code class=\"codespan\">axis.min</code> and <code class=\"codespan\">axis.max</code> are not specified).</p>\n"},"zoomOnMouseWheel":{"type":["boolean","string"],"description":"<p>How to trigger zoom. Optional values:</p>\n<ul>\n<li><code class=\"codespan\">true</code>:Mouse wheel triggers zoom.</li>\n<li><code class=\"codespan\">false</code>:Mouse wheel can not triggers zoom.</li>\n<li><code class=\"codespan\">&#39;shift&#39;</code>:Holding <code class=\"codespan\">shift</code> and mouse wheel triggers zoom.</li>\n<li><code class=\"codespan\">&#39;ctrl&#39;</code>:Holding <code class=\"codespan\">ctrl</code> and mouse wheel triggers zoom.</li>\n<li><code class=\"codespan\">&#39;alt&#39;</code>:Holding <code class=\"codespan\">alt</code> and mouse wheel triggers zoom.</li>\n</ul>\n","default":true},"moveOnMouseMove":{"type":["boolean","string"],"description":"<p>How to trigger data window move. Optional values:</p>\n<ul>\n<li><code class=\"codespan\">true</code>:Mouse move triggers data window move.</li>\n<li><code class=\"codespan\">false</code>:Mouse move can not triggers data window move.</li>\n<li><code class=\"codespan\">&#39;shift&#39;</code>:Holding <code class=\"codespan\">shift</code> and mouse move triggers data window move.</li>\n<li><code class=\"codespan\">&#39;ctrl&#39;</code>:Holding <code class=\"codespan\">ctrl</code> and mouse move triggers data window move.</li>\n<li><code class=\"codespan\">&#39;alt&#39;</code>:Holding <code class=\"codespan\">alt</code> and mouse move triggers data window move.</li>\n</ul>\n","default":true},"moveOnMouseWheel":{"type":["boolean","string"],"description":"<p>How to trigger data window move. Optional values:</p>\n<ul>\n<li><code class=\"codespan\">true</code>:Mouse wheel triggers data window move.</li>\n<li><code class=\"codespan\">false</code>:Mouse wheel can not triggers data window move.</li>\n<li><code class=\"codespan\">&#39;shift&#39;</code>:Holding <code class=\"codespan\">shift</code> and mouse wheel triggers data window move.</li>\n<li><code class=\"codespan\">&#39;ctrl&#39;</code>:Holding <code class=\"codespan\">ctrl</code> and mouse wheel triggers data window move.</li>\n<li><code class=\"codespan\">&#39;alt&#39;</code>:Holding <code class=\"codespan\">alt</code> and mouse wheel triggers data window move.</li>\n</ul>\n","default":false},"preventDefaultMouseMove":{"type":["boolean"],"description":"<p>Whether to prevent default behavior of mouse move event.</p>\n","default":true}}},{"type":["Object"],"description":"<p><strong>dataZoomSlider</strong></p>\n<p>(Please refer to the <a href=\"#dataZoom\">introduction of dataZoom</a>.)</p>\n<p><br>\n<br></p>\n","properties":{"type":{"type":["string"],"description":"","default":"'slider'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"show":{"type":["boolean"],"description":"<p>Whether to show the  component. If is set to be <code class=\"codespan\">false</code>, it will not show, but its data filtering function still works.</p>\n","default":true},"backgroundColor":{"type":["Color"],"description":"<p>The background color of the component.</p>\n","default":"'rgba(47,69,84,0)'"},"dataBackground":{"type":["Object"],"description":"<p>The style of data shadow.</p>\n","properties":{"lineStyle":{"type":["Object"],"description":"<p>Line style of shadow</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#2f4554"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0.5},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":0.3}}},"areaStyle":{"type":["Object"],"description":"<p>Area style of shadow</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"rgba(47,69,84,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":0.3}}}}},"fillerColor":{"type":["Color"],"description":"<p>The color to fill selected area.</p>\n","default":"'rgba(47,69,84,0.25)'"},"borderColor":{"type":["Color"],"description":"<p>The color of border.</p>\n","default":"'#ddd'"},"handleIcon":{"type":["string"],"description":"<p>Icon shape of handle, which supports path string. Its default value is:</p>\n<pre><code class=\"lang-js\">&#39;M8.2,13.6V3.9H6.3v9.7H3.1v14.9h3.3v9.7h1.8v-9.7h3.3V13.6H8.2z M9.7,24.4H4.8v-1.4h4.9V24.4z M9.7,19.1H4.8v-1.4h4.9V19.1z&#39;\n</code></pre>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>Refer to <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=area-simple\" target=\"_blank\">area-simple example</a> for customized icon.</p>\n"},"handleSize":{"type":["number","string"],"description":"<p>The size of control handle. It can be in pixels, or in percentage relative to the width of dataZoom component. By default, it&#39;s the same as the width of dataZoom component.</p>\n","default":"'100%'"},"handleStyle":{"type":["Object"],"description":"<p>Style of handle. Please refer to <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=area-simple\" target=\"_blank\">area-simple example</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#a7b7cc"},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"labelPrecision":{"type":["number","string"],"description":"<p>Precision of label if in number form. By default, it is decided based on the number of data.</p>\n","default":"'auto'"},"labelFormatter":{"type":["string","Function"],"description":"<p>The formatter tool for the label.</p>\n<ul>\n<li><p>It is a template if in <code class=\"codespan\">string</code>. For instance, <code class=\"codespan\">aaaa{value}bbbb</code>, where <code class=\"codespan\">{value}</code> will be replaced by the value of actual data value.</p>\n</li>\n<li><p>It is a callback function if in <code class=\"codespan\">Function</code>. For example:</p>\n</li>\n</ul>\n<pre><code class=\"lang-javascript\">/**\n * @param {*} value If axis.type is &#39;category&#39;, `value` is the index of axis.data.\n *                  else `value` is current value.\n * @param {strign} valueStr Inner formatted string.\n * @return {string} Returns the label formatted.\n */\nlabelFormatter: function (value, valueStr) {\n    return &#39;aaa&#39; + value + &#39;bbb&#39;;\n}\n</code></pre>\n","default":null},"showDetail":{"type":["boolean"],"description":"<p>Whether to show detail, that is, show the detailed data information when dragging.</p>\n","default":true},"showDataShadow":{"type":["string"],"description":"<p>Whether to show data shadow in <code class=\"codespan\">dataZoom-silder</code> component, to indicate the data tendency in brief.</p>\n","default":"'auto'"},"realtime":{"type":["boolean"],"description":"<p>Whether to update view while dragging. If it is set as <code class=\"codespan\">false</code>, the view will be updated only at the end of dragging.</p>\n","default":true},"textStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>dataZoom  text color.</p>\n","default":"#333"},"fontStyle":{"type":["string"],"description":"<p>dataZoom  font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p>dataZoom  font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>dataZoom  font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>dataZoom  font size.</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"xAxisIndex":{"type":["number","Array"],"description":"<p>Specify which <a href=\"#xAxis\">xAxis</a> is/are controlled by the <code class=\"codespan\">dataZoom-slider</code> when <a href=\"#grid\">catesian coordinate system</a> is used.</p>\n<p>By default the first <code class=\"codespan\">xAxis</code> that parallel to <code class=\"codespan\">dataZoom</code> are controlled when <a href=\"#dataZoom-slider.orient\">dataZoom-slider.orient</a> is set as <code class=\"codespan\">&#39;horizontal&#39;</code>. But it is recommended to specify it explicitly but not use default value.</p>\n<p>If it is set as a single <code class=\"codespan\">number</code>, one axis is controlled, while if it is set as an <code class=\"codespan\">Array</code> , multiple axes are controlled.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">option: {\n    xAxis: [\n        {...}, // The first xAxis\n        {...}, // The second xAxis\n        {...}, // The third xAxis\n        {...}  // The fourth xAxis\n    ],\n    dataZoom: [\n        { // The first dataZoom component\n            xAxisIndex: [0, 2] // Indicates that this dataZoom component\n                                     // controls the first and the third xAxis\n        },\n        { // The second dataZoom component\n            xAxisIndex: 3      // indicates that this dataZoom component\n                                     // controls the fourth xAxis\n        }\n    ]\n}\n</code></pre>\n","default":null},"yAxisIndex":{"type":["number","Array"],"description":"<p>Specify which <a href=\"#yAxis\">yAxis</a> is/are controlled by the <code class=\"codespan\">dataZoom-slider</code> when <a href=\"#grid\">catesian coordinate system</a> is used.</p>\n<p>By default the first <code class=\"codespan\">yAxis</code> that parallel to <code class=\"codespan\">dataZoom</code> are controlled when <a href=\"#dataZoom-slider.orient\">dataZoom-slider.orient</a> is set as <code class=\"codespan\">&#39;vertical&#39;</code>. But it is recommended to specify it explicitly but not use default value.</p>\n<p>If it is set as a single <code class=\"codespan\">number</code>, one axis is controlled, while if it is set as an <code class=\"codespan\">Array</code> , multiple axes are controlled.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">option: {\n    yAxis: [\n        {...}, // The first yAxis\n        {...}, // The second yAxis\n        {...}, // The third yAxis\n        {...}  // The fourth yAxis\n    ],\n    dataZoom: [\n        { // The first dataZoom component\n            yAxisIndex: [0, 2] // Indicates that this dataZoom component\n                                     // controls the first and the third yAxis\n        },\n        { // The second dataZoom component\n            yAxisIndex: 3      // indicates that this dataZoom component\n                                     // controls the fourth yAxis\n        }\n    ]\n}\n</code></pre>\n","default":null},"radiusAxisIndex":{"type":["number","Array"],"description":"<p>Specify which <a href=\"#radiusAxis\">radiusAxis</a> is/are controlled by the <code class=\"codespan\">dataZoom-slider</code> when <a href=\"#polar\">polar coordinate system</a> is used.</p>\n<p>If it is set as a single <code class=\"codespan\">number</code>, one axis is controlled, while if it is set as an <code class=\"codespan\">Array</code> , multiple axes are controlled.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">option: {\n    radiusAxis: [\n        {...}, // The first radiusAxis\n        {...}, // The second radiusAxis\n        {...}, // The third radiusAxis\n        {...}  // The fourth radiusAxis\n    ],\n    dataZoom: [\n        { // The first dataZoom component\n            radiusAxisIndex: [0, 2] // Indicates that this dataZoom component\n                                     // controls the first and the third radiusAxis\n        },\n        { // The second dataZoom component\n            radiusAxisIndex: 3      // indicates that this dataZoom component\n                                     // controls the fourth radiusAxis\n        }\n    ]\n}\n</code></pre>\n","default":null},"angleAxisIndex":{"type":["number","Array"],"description":"<p>Specify which <a href=\"#angleAxis\">angleAxis</a> is/are controlled by the <code class=\"codespan\">dataZoom-slider</code> when <a href=\"#polar\">polar coordinate system</a> is used.</p>\n<p>If it is set as a single <code class=\"codespan\">number</code>, one axis is controlled, while if it is set as an <code class=\"codespan\">Array</code> , multiple axes are controlled.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">option: {\n    angleAxis: [\n        {...}, // The first angleAxis\n        {...}, // The second angleAxis\n        {...}, // The third angleAxis\n        {...}  // The fourth angleAxis\n    ],\n    dataZoom: [\n        { // The first dataZoom component\n            angleAxisIndex: [0, 2] // Indicates that this dataZoom component\n                                     // controls the first and the third angleAxis\n        },\n        { // The second dataZoom component\n            angleAxisIndex: 3      // indicates that this dataZoom component\n                                     // controls the fourth angleAxis\n        }\n    ]\n}\n</code></pre>\n","default":null},"filterMode":{"type":["string"],"description":"<p>Generally <code class=\"codespan\">dataZoom</code> component zoom or roam coordinate system through data filtering and set the windows of axes internally.</p>\n<p>Its behaviours vary according to filtering mode settings (<a href=\"#dataZoom.filterMode\">dataZoom.filterMode</a>).</p>\n<p>Possible values:</p>\n<ul>\n<li><p>&#39;filter&#39;: data that outside the window will be <strong>filtered</strong>, which may lead to some changes of windows of other axes. For each data item, it will be filtered if one of the relevant dimensions is out of the window.</p>\n</li>\n<li><p>&#39;weakFilter&#39;: data that outside the window will be <strong>filtered</strong>, which may lead to some changes of windows of other axes. For each data item, it will be filtered only if all of the relevant dimensions are out of the same side of the window.</p>\n</li>\n<li><p>&#39;empty&#39;: data that outside the window will be <strong>set to NaN</strong>, which will not lead to changes of windows of other axes.</p>\n</li>\n<li><p>&#39;none&#39;: Do not filter data.</p>\n</li>\n</ul>\n<p>How to set <code class=\"codespan\">filterMode</code> is up to users, depending on the requirments and scenarios. Expirically:</p>\n<ul>\n<li><p>If only <code class=\"codespan\">xAxis</code> or only <code class=\"codespan\">yAxis</code> is controlled by <code class=\"codespan\">dataZoom</code>, <code class=\"codespan\">filterMode: &#39;filter&#39;</code> is typically used, which enable the other axis auto adapte its window to the extent of the filtered data.</p>\n</li>\n<li><p>If both <code class=\"codespan\">xAxis</code> and <code class=\"codespan\">yAxis</code> are operated by <code class=\"codespan\">dataZoom</code>:</p>\n<ul>\n<li><p>If <code class=\"codespan\">xAxis</code> and <code class=\"codespan\">yAxis</code> should not effect mutually (e.g. a scatter chart with both axes on the type of <code class=\"codespan\">&#39;value&#39;</code>), they should be set to be <code class=\"codespan\">filterMode: &#39;empty&#39;</code>.</p>\n</li>\n<li><p>If <code class=\"codespan\">xAxis</code> is the main axis and <code class=\"codespan\">yAxis</code> is the auxiliary axis (or vise versa) (e.g., in a bar chart, when dragging <code class=\"codespan\">dataZoomX</code> to change the window of xAxis, we need the yAxis to adapt to the clipped data, but when dragging <code class=\"codespan\">dataZoomY</code> to change the window of yAxis, we need the xAxis not to be changed), in this case, <code class=\"codespan\">xAxis</code> should be set to be <code class=\"codespan\">fiterMode: &#39;filter&#39;</code>, while <code class=\"codespan\">yAxis</code> should be set to be <code class=\"codespan\">fiterMode: &#39;empty&#39;</code>.</p>\n</li>\n</ul>\n</li>\n</ul>\n<p>It can be demonstrated by the sample:</p>\n<pre><code class=\"lang-javascript\">option = {\n    dataZoom: [\n        {\n            id: &#39;dataZoomX&#39;,\n            type: &#39;slider&#39;,\n            xAxisIndex: [0],\n            filterMode: &#39;filter&#39;\n        },\n        {\n            id: &#39;dataZoomY&#39;,\n            type: &#39;slider&#39;,\n            yAxisIndex: [0],\n            filterMode: &#39;empty&#39;\n        }\n    ],\n    xAxis: {type: &#39;value&#39;},\n    yAxis: {type: &#39;value&#39;},\n    series{\n        type: &#39;bar&#39;,\n        data: [\n            // The first column corresponds to xAxis,\n            // and the second coloum corresponds to yAxis.\n            [12, 24, 36],\n            [90, 80, 70],\n            [3, 9, 27],\n            [1, 11, 111]\n        ]\n    }\n}\n</code></pre>\n<p>In the sample above, <code class=\"codespan\">dataZoomX</code> is set as <code class=\"codespan\">filterMode: &#39;filter&#39;</code>. When use drags <code class=\"codespan\">dataZoomX</code> (do not touch <code class=\"codespan\">dataZoomY</code>) and the valueWindow of <code class=\"codespan\">xAxis</code> is changed to <code class=\"codespan\">[2, 50]</code> consequently, <code class=\"codespan\">dataZoomX</code> travel the first column of series.data and filter items that out of the window. The series.data turns out to be:</p>\n<pre><code class=\"lang-javascript\">[\n    [12, 24, 36],\n    // [90, 80, 70] This item is filtered, as 90 is out of the window.\n    [3, 9, 27]\n    // [1, 11, 111] This item is filtered, as 1 is out of the window.\n]\n</code></pre>\n<p>Before filtering, the second column, which corresponds to yAxis, has values <code class=\"codespan\">24</code>, <code class=\"codespan\">80</code>, <code class=\"codespan\">9</code>, <code class=\"codespan\">11</code>. After filtering, only <code class=\"codespan\">24</code> and <code class=\"codespan\">9</code> are left. Then the extent of <code class=\"codespan\">yAxis</code> is adjusted to adapt the two values (if <code class=\"codespan\">yAxis.min</code> and <code class=\"codespan\">yAxis.man</code> are not set).</p>\n<p>So <code class=\"codespan\">filterMode: &#39;filter&#39;</code> can be used to enable the other axis to auto adapt the filtered data.</p>\n<p>Then let&#39;s review the sample from the beginning, <code class=\"codespan\">dataZoomY</code> is set as <code class=\"codespan\">filterMode: &#39;empty&#39;</code>. So if user drags <code class=\"codespan\">dataZoomY</code> (do not touch <code class=\"codespan\">dataZoomX</code>) and its window is changed to <code class=\"codespan\">[10, 60]</code> consequently, <code class=\"codespan\">dataZoomY</code> travels the second column of series.data and set NaN to all of the values that outside the window (NaN cause the graphical elements, i.e., bar elements, do not show, but still hold the place). The series.data turns out to be:</p>\n<pre><code class=\"lang-javascript\">[\n    [12, 24, 36],\n    [90, NaN, 70], // Set to NaN\n    [3, NaN, 27],  // Set to NaN\n    [1, 11, 111]\n]\n</code></pre>\n<p>In this case, the first column (i.e., <code class=\"codespan\">12</code>, <code class=\"codespan\">90</code>, <code class=\"codespan\">3</code>, <code class=\"codespan\">1</code>, which corresponds to <code class=\"codespan\">xAxis</code>), will not be changed at all. So dragging <code class=\"codespan\">yAxis</code> will not change extent of <code class=\"codespan\">xAxis</code>, which is good for requirements like outlier filtering.</p>\n<p>See this example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/bar-dataZoom-filterMode&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n\n\n\n\n","default":"'filter'"},"start":{"type":["number"],"description":"<p>The start percentage of the window out of the data extent, in the range of 0 ~ 100.</p>\n<p><a href=\"#dataZoom-slider.start\">dataZoom-slider.start</a> and <a href=\"#dataZoom-slider.end\">dataZoom-slider.end</a> define the window of the data in <strong>percent</strong> form.</p>\n<p>More info about the relationship between <code class=\"codespan\">dataZoom-slider.start</code> and axis extent can be checked in <a href=\"#dataZoom-slider.rangeMode\">dataZoom-slider.rangeMode</a>.</p>\n","default":0},"end":{"type":["number"],"description":"<p>The end percentage of the window out of the data extent, in the range of 0 ~ 100.</p>\n<p><a href=\"#dataZoom-slider.start\">dataZoom-slider.start</a> and <a href=\"#dataZoom-slider.end\">dataZoom-slider.end</a> define the window of the data in <strong>percent</strong> form.</p>\n<p>More info about the relationship between <code class=\"codespan\">dataZoom-slider.end</code> and axis extent can be checked in <a href=\"#dataZoom-slider.rangeMode\">dataZoom-slider.rangeMode</a>.</p>\n","default":100},"startValue":{"type":["number","string","Date"],"description":"<p>The start absolute value of the window, not works when <a href=\"#dataZoom-slider.start\">dataZoom-slider.start</a> is set.</p>\n<p><a href=\"#dataZoom-slider.startValue\">dataZoom-slider.startValue</a> and <a href=\"#dataZoom-slider.endValue\">dataZoom-slider.endValue</a> define the window of the data window in <strong>absolute value</strong> form.</p>\n<p>Notice, if an axis is set to be <code class=\"codespan\">category</code>, <code class=\"codespan\">startValue</code> could be set as <code class=\"codespan\">index</code> of the array of <code class=\"codespan\">axis.data</code> or as the array value itself. In the latter case, it will internally and automatically translate to the index of array.</p>\n<p>More info about the relationship between <code class=\"codespan\">dataZoom-slider.startValue</code> and axis extent can be checked in <a href=\"#dataZoom-slider.rangeMode\">dataZoom-slider.rangeMode</a>.</p>\n","default":null},"endValue":{"type":["number","string","Date"],"description":"<p>The end absolute value of the window, doesn&#39;t work when <a href=\"#dataZoom-slider.end\">dataZoom-slider.end</a> is set.</p>\n<p><a href=\"#dataZoom-slider.startValue\">dataZoom-slider.startValue</a> and <a href=\"#dataZoom-slider.endValue\">dataZoom-slider.endValue</a> define the window of the data window in <strong>absolute value</strong> form.</p>\n<p>Notice, if an axis is set to be <code class=\"codespan\">category</code>, <code class=\"codespan\">startValue</code> could be set as <code class=\"codespan\">index</code> of the array of <code class=\"codespan\">axis.data</code> or as the array value itself. In the latter case, it will internally and automatically translate to the index of array.</p>\n<p>More info about the relationship between <code class=\"codespan\">dataZoom-slider.endValue</code> and axis extent can be checked in <a href=\"#dataZoom-slider.rangeMode\">dataZoom-slider.rangeMode</a>.</p>\n","default":null},"minSpan":{"type":["number"],"description":"<p>Used to restrict minimal window size, in percent, which value is in the range of [0, 100].</p>\n<p>If <a href=\"#dataZoom-slider.minValueSpan\">dataZoom-slider.minValueSpan</a> is set, <code class=\"codespan\">minSpan</code> does not work any more.</p>\n","default":null},"maxSpan":{"type":["number"],"description":"<p>Used to restrict maximal window size, in percent, which value is in the range of [0, 100].</p>\n<p>If <a href=\"#dataZoom-slider.maxValueSpan\">dataZoom-slider.maxValueSpan</a> is set, <code class=\"codespan\">maxSpan</code> does not work any more.</p>\n","default":null},"minValueSpan":{"type":["number","string","Date"],"description":"<p>Used to restrict minimal window size.</p>\n<p>For example:\nIn time axis it can be set as <code class=\"codespan\">3600 * 24 * 1000 * 5</code> to represent &quot;5 day&quot;.\nIn category axis it can be set as <code class=\"codespan\">5</code> to represent 5 categories.</p>\n","default":null},"maxValueSpan":{"type":["number","string","Date"],"description":"<p>Used to restrict maximal window size.</p>\n<p>For example:\nIn time axis it can be set as <code class=\"codespan\">3600 * 24 * 1000 * 5</code> to represent &quot;5 day&quot;.\nIn category axis it can be set as <code class=\"codespan\">5</code> to represent 5 categories.</p>\n","default":null},"orient":{"type":["string"],"description":"<p>Specify whether the layout of <code class=\"codespan\">dataZoom</code> component is horizontal or vertical. What&#39;s more, it indicates whether the horizontal axis or vertical axis is controlled by default in catesian coordinate system.</p>\n<p>Valid values:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;horizontal&#39;</code>: horizontal.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;vertical&#39;</code>: vertical.</p>\n</li>\n</ul>\n","default":null},"zoomLock":{"type":["boolean"],"description":"<p>Specify whether to lock the size of window (selected area).</p>\n<p>When set as <code class=\"codespan\">true</code>, the size of window is locked, that is, only the translation (by mouse drag or touch drag) is avialable but zoom is not.</p>\n","default":false},"throttle":{"type":["number"],"description":"<p>Specify the frame rate of views refreshing, with unit millisecond (ms).</p>\n<p>If <a href=\"#animation\">animation</a> set as <code class=\"codespan\">true</code> and <a href=\"#animationDurationUpdate\">animationDurationUpdate</a> set as bigger than <code class=\"codespan\">0</code>, you can keep <code class=\"codespan\">throttle</code> as the default value <code class=\"codespan\">100</code> (or set it as a value bigger than <code class=\"codespan\">0</code>), otherwise it might be not smooth when dragging.</p>\n<p>If <a href=\"#animation\">animation</a> set as <code class=\"codespan\">false</code> or <a href=\"#animationDurationUpdate\">animationDurationUpdate</a> set as <code class=\"codespan\">0</code>, and data size is not very large, and it seems to be not smooth when dragging, you can set <code class=\"codespan\">throttle</code> as <code class=\"codespan\">0</code> to improve that.</p>\n","default":100},"rangeMode":{"type":["Array"],"description":"<p>The format is <code class=\"codespan\">[rangeModeForStart, rangeModeForEnd]</code>.</p>\n<p>For example <code class=\"codespan\">rangeMode: [&#39;value&#39;, &#39;percent&#39;]</code> means that use absolute value in <code class=\"codespan\">start</code> and percent value in <code class=\"codespan\">end</code>.</p>\n<p>Optional value for each item: <code class=\"codespan\">&#39;value&#39;</code>, <code class=\"codespan\">&#39;percent&#39;</code>.</p>\n<ul>\n<li><code class=\"codespan\">&#39;value&#39;</code> mode: the axis extent will always only be determined by <code class=\"codespan\">dataZoom.startValue</code> and <code class=\"codespan\">dataZoom.endValue</code>, despite how data like and how <code class=\"codespan\">axis.min</code> and <code class=\"codespan\">axis.max</code> are.</li>\n<li><code class=\"codespan\">&#39;percent&#39;</code> mode: <code class=\"codespan\">100</code> represents 100% of the <code class=\"codespan\">[dMin, dMax]</code>, where <code class=\"codespan\">dMin</code> is <code class=\"codespan\">axis.min</code> if <code class=\"codespan\">axis.min</code> specified, otherwise <code class=\"codespan\">data.extent[0]</code>, and <code class=\"codespan\">dMax</code> is <code class=\"codespan\">axis.max</code> if <code class=\"codespan\">axis.max</code> specified, otherwise <code class=\"codespan\">data.extent[1]</code>. Axis extent will only be determined by the result of the percent of <code class=\"codespan\">[dMin, dMax]</code>.</li>\n</ul>\n<p><code class=\"codespan\">rangeMode</code> are auto determined by whether <code class=\"codespan\">option.start</code>/<code class=\"codespan\">option.end</code> are specified (represents <code class=\"codespan\">&#39;percent&#39;</code> mode) or <code class=\"codespan\">option.startValue</code>/<code class=\"codespan\">option.endValue</code> specified (represents <code class=\"codespan\">&#39;value&#39;</code> mode). And when user behavior trigger the changing of the view, the <code class=\"codespan\">rangeMode</code> would be modified automatically. For example, if triggered by <code class=\"codespan\">toolbox.dataZoom</code>, it will be modefied to <code class=\"codespan\">&#39;value&#39;</code>, and if triggered by <code class=\"codespan\">dataZoom-inside</code> or <code class=\"codespan\">dataZoom-slider</code>, it will be modified to <code class=\"codespan\">&#39;percent&#39;</code>.</p>\n<p>If we specify <code class=\"codespan\">rangeMode</code> manually in <code class=\"codespan\">option</code>, it only works when both <code class=\"codespan\">start</code> and <code class=\"codespan\">startValue</code> specified or both <code class=\"codespan\">end</code> and <code class=\"codespan\">endValue</code> specified. So usually we do not need to specify <code class=\"codespan\">dataZoom.rangeMode</code> manually.</p>\n<p>Take a scenario as an example. When we are using dynamic data (update data periodically via <code class=\"codespan\">setOption</code>), if in <code class=\"codespan\">&#39;value</code>&#39; mode, the window will be kept in a fixed value range despite how data are appended, while if in <code class=\"codespan\">&#39;percent&#39;</code> mode, whe window range will be changed alone with the appended data (suppose <code class=\"codespan\">axis.min</code> and <code class=\"codespan\">axis.max</code> are not specified).</p>\n"},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between dataZoom-slider component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"top":{"type":["string","number"],"description":"<p>Distance between dataZoom-slider component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"right":{"type":["string","number"],"description":"<p>Distance between dataZoom-slider component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"<p>Distance between dataZoom-slider component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"}}}]},"description":"<p><code class=\"codespan\">dataZoom</code> component is used for zooming a specific area, which enables user to investigate data in detail, or get an overview of the data, or get rid of outlier points.</p>\n<p>These types of <code class=\"codespan\">dataZoom</code> component are supported:</p>\n<ul>\n<li><p><a href=\"#dataZoom-inside\">dataZoomInside</a>: Data zoom functionalities is embeded inside coordinate systems, enable user to zoom or roam coordinate system by mouse dragging, mouse move or finger touch (in touch screen).</p>\n</li>\n<li><p><a href=\"#dataZoom-slider\">dataZoomSlider</a>: A special slider bar is provided, on which coordinate systems can be zoomed or roamed by mouse dragging or finger touch (in touch screen).</p>\n</li>\n<li><p><a href=\"#toolbox.feature.dataZoom\">dataZoomSelect</a>: A marquee tool is provided for zooming or roaming coordinate system. That is <a href=\"#toolbox.feature.dataZoom\">toolbox.feature.dataZoom</a>, which can only be configured in toolbox.</p>\n</li>\n</ul>\n<p>Example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-dataZoom-all&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n<p><br></p>\n<hr>\n<p><strong>✦ Relationship between dataZoom and axis ✦</strong></p>\n<p>Basically <code class=\"codespan\">dataZoom</code> component operates &quot;window&quot; on axis to zoom or roam coordinate system.</p>\n<blockquote>\n<p>Use <a href=\"#dataZoom.xAxisIndex\">dataZoom.xAxisIndex</a> or <a href=\"#dataZoom.yAxisIndex\">dataZoom.yAxisIndex</a> or <a href=\"#dataZoom.radiusAxisIndex\">dataZoom.radiusAxisIndex</a> or <a href=\"#dataZoom.angleAxisIndex\">dataZoom.angleAxisIndex</a> to specify which axes are operated by <code class=\"codespan\">dataZoom</code>.</p>\n</blockquote>\n<p>A single chart instance can contain several <code class=\"codespan\">dataZoom</code> components, each of which controls different axes. The <code class=\"codespan\">dataZoom</code> components that control the same axis will be automatically linked (i.e., all of them will be updated when one of them is updated by user action or API call).</p>\n<p><br></p>\n<hr>\n<p><strong>✦ How dataZoom componets operates axes and data ✦</strong></p>\n<p>Generally <code class=\"codespan\">dataZoom</code> component zoom or roam coordinate system through data filtering and set the windows of axes internally.</p>\n<p>Its behaviours vary according to filtering mode settings (<a href=\"#dataZoom.filterMode\">dataZoom.filterMode</a>).</p>\n<p>Possible values:</p>\n<ul>\n<li><p>&#39;filter&#39;: data that outside the window will be <strong>filtered</strong>, which may lead to some changes of windows of other axes. For each data item, it will be filtered if one of the relevant dimensions is out of the window.</p>\n</li>\n<li><p>&#39;weakFilter&#39;: data that outside the window will be <strong>filtered</strong>, which may lead to some changes of windows of other axes. For each data item, it will be filtered only if all of the relevant dimensions are out of the same side of the window.</p>\n</li>\n<li><p>&#39;empty&#39;: data that outside the window will be <strong>set to NaN</strong>, which will not lead to changes of windows of other axes.</p>\n</li>\n<li><p>&#39;none&#39;: Do not filter data.</p>\n</li>\n</ul>\n<p>How to set <code class=\"codespan\">filterMode</code> is up to users, depending on the requirments and scenarios. Expirically:</p>\n<ul>\n<li><p>If only <code class=\"codespan\">xAxis</code> or only <code class=\"codespan\">yAxis</code> is controlled by <code class=\"codespan\">dataZoom</code>, <code class=\"codespan\">filterMode: &#39;filter&#39;</code> is typically used, which enable the other axis auto adapte its window to the extent of the filtered data.</p>\n</li>\n<li><p>If both <code class=\"codespan\">xAxis</code> and <code class=\"codespan\">yAxis</code> are operated by <code class=\"codespan\">dataZoom</code>:</p>\n<ul>\n<li><p>If <code class=\"codespan\">xAxis</code> and <code class=\"codespan\">yAxis</code> should not effect mutually (e.g. a scatter chart with both axes on the type of <code class=\"codespan\">&#39;value&#39;</code>), they should be set to be <code class=\"codespan\">filterMode: &#39;empty&#39;</code>.</p>\n</li>\n<li><p>If <code class=\"codespan\">xAxis</code> is the main axis and <code class=\"codespan\">yAxis</code> is the auxiliary axis (or vise versa) (e.g., in a bar chart, when dragging <code class=\"codespan\">dataZoomX</code> to change the window of xAxis, we need the yAxis to adapt to the clipped data, but when dragging <code class=\"codespan\">dataZoomY</code> to change the window of yAxis, we need the xAxis not to be changed), in this case, <code class=\"codespan\">xAxis</code> should be set to be <code class=\"codespan\">fiterMode: &#39;filter&#39;</code>, while <code class=\"codespan\">yAxis</code> should be set to be <code class=\"codespan\">fiterMode: &#39;empty&#39;</code>.</p>\n</li>\n</ul>\n</li>\n</ul>\n<p>It can be demonstrated by the sample:</p>\n<pre><code class=\"lang-javascript\">option = {\n    dataZoom: [\n        {\n            id: &#39;dataZoomX&#39;,\n            type: &#39;slider&#39;,\n            xAxisIndex: [0],\n            filterMode: &#39;filter&#39;\n        },\n        {\n            id: &#39;dataZoomY&#39;,\n            type: &#39;slider&#39;,\n            yAxisIndex: [0],\n            filterMode: &#39;empty&#39;\n        }\n    ],\n    xAxis: {type: &#39;value&#39;},\n    yAxis: {type: &#39;value&#39;},\n    series{\n        type: &#39;bar&#39;,\n        data: [\n            // The first column corresponds to xAxis,\n            // and the second coloum corresponds to yAxis.\n            [12, 24, 36],\n            [90, 80, 70],\n            [3, 9, 27],\n            [1, 11, 111]\n        ]\n    }\n}\n</code></pre>\n<p>In the sample above, <code class=\"codespan\">dataZoomX</code> is set as <code class=\"codespan\">filterMode: &#39;filter&#39;</code>. When use drags <code class=\"codespan\">dataZoomX</code> (do not touch <code class=\"codespan\">dataZoomY</code>) and the valueWindow of <code class=\"codespan\">xAxis</code> is changed to <code class=\"codespan\">[2, 50]</code> consequently, <code class=\"codespan\">dataZoomX</code> travel the first column of series.data and filter items that out of the window. The series.data turns out to be:</p>\n<pre><code class=\"lang-javascript\">[\n    [12, 24, 36],\n    // [90, 80, 70] This item is filtered, as 90 is out of the window.\n    [3, 9, 27]\n    // [1, 11, 111] This item is filtered, as 1 is out of the window.\n]\n</code></pre>\n<p>Before filtering, the second column, which corresponds to yAxis, has values <code class=\"codespan\">24</code>, <code class=\"codespan\">80</code>, <code class=\"codespan\">9</code>, <code class=\"codespan\">11</code>. After filtering, only <code class=\"codespan\">24</code> and <code class=\"codespan\">9</code> are left. Then the extent of <code class=\"codespan\">yAxis</code> is adjusted to adapt the two values (if <code class=\"codespan\">yAxis.min</code> and <code class=\"codespan\">yAxis.man</code> are not set).</p>\n<p>So <code class=\"codespan\">filterMode: &#39;filter&#39;</code> can be used to enable the other axis to auto adapt the filtered data.</p>\n<p>Then let&#39;s review the sample from the beginning, <code class=\"codespan\">dataZoomY</code> is set as <code class=\"codespan\">filterMode: &#39;empty&#39;</code>. So if user drags <code class=\"codespan\">dataZoomY</code> (do not touch <code class=\"codespan\">dataZoomX</code>) and its window is changed to <code class=\"codespan\">[10, 60]</code> consequently, <code class=\"codespan\">dataZoomY</code> travels the second column of series.data and set NaN to all of the values that outside the window (NaN cause the graphical elements, i.e., bar elements, do not show, but still hold the place). The series.data turns out to be:</p>\n<pre><code class=\"lang-javascript\">[\n    [12, 24, 36],\n    [90, NaN, 70], // Set to NaN\n    [3, NaN, 27],  // Set to NaN\n    [1, 11, 111]\n]\n</code></pre>\n<p>In this case, the first column (i.e., <code class=\"codespan\">12</code>, <code class=\"codespan\">90</code>, <code class=\"codespan\">3</code>, <code class=\"codespan\">1</code>, which corresponds to <code class=\"codespan\">xAxis</code>), will not be changed at all. So dragging <code class=\"codespan\">yAxis</code> will not change extent of <code class=\"codespan\">xAxis</code>, which is good for requirements like outlier filtering.</p>\n<p>See this example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/bar-dataZoom-filterMode&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n\n\n\n<p>Moreover, when <code class=\"codespan\">min</code>, <code class=\"codespan\">max</code> of an axis is set (e.g., <code class=\"codespan\">yAxis: {min: 0, max: 400}</code>), this extent of the axis will not be modified by the behaviour of dataZoom of other axis any more.</p>\n<p><br></p>\n<hr>\n<p><strong>✦ How to set window ✦</strong></p>\n<p>You can set the current window in two forms:</p>\n<ul>\n<li><p>percent value: see <a href=\"#dataZoom.start\">dataZoom.start</a> and <a href=\"#dataZoom.end\">dataZoom.end</a>.</p>\n</li>\n<li><p>absolute value: see <a href=\"#dataZoom.startValue\">dataZoom.startValue</a> and <a href=\"#dataZoom.endValue\">dataZoom.endValue</a>.</p>\n</li>\n</ul>\n<p>Notice: If use percent value form, and it is in the scenario below, the result of dataZoom depends on the sequence of dataZoom definitions appearing in <code class=\"codespan\">option</code>.</p>\n<pre><code class=\"lang-javascript\">option = {\n    dataZoom: [\n        {\n            id: &#39;dataZoomX&#39;,\n            type: &#39;slider&#39;,\n            xAxisIndex: [0],\n            filterMode: &#39;filter&#39;,   // Set as &#39;filter&#39; so that the modification\n                                    // of window of xAxis willl effect the\n                                    // window of yAxis.\n            start: 30,\n            end: 70\n        },\n        {\n            id: &#39;dataZoomY&#39;,\n            type: &#39;slider&#39;,\n            yAxisIndex: [0],\n            filterMode: &#39;empty&#39;,\n            start: 20,\n            end: 80\n        }\n    ],\n    xAxis: {\n        type: &#39;value&#39;\n    },\n    yAxis: {\n        type: &#39;value&#39;\n        // Notice there is no min or max set to\n        // restrict the view extent of yAxis.\n    },\n    series{\n        type: &#39;bar&#39;,\n        data: [\n            // The first column corresponds to xAxis,\n            // and the second column corresponds to yAxis.\n            [12, 24, 36],\n            [90, 80, 70],\n            [3, 9, 27],\n            [1, 11, 111]\n        ]\n    }\n}\n</code></pre>\n<p>What is the exact meaning of <code class=\"codespan\">start: 20, end: 80</code> in <code class=\"codespan\">dataZoomY</code> in the example above?</p>\n<ul>\n<li><p>If <code class=\"codespan\">yAxis.min</code> and <code class=\"codespan\">yAxis.max</code> are set:</p>\n<p>  <code class=\"codespan\">start: 20, end: 80</code> of <code class=\"codespan\">dataZoomY</code> means: from <code class=\"codespan\">20%</code> to <code class=\"codespan\">80%</code> out of <code class=\"codespan\">[yAxis.min, yAxis.max]</code>.</p>\n<p>  If one of <code class=\"codespan\">yAxis.min</code> and <code class=\"codespan\">yAxis.max</code> is not set, the corresponding edge of the full extend also follow rule as follows.</p>\n</li>\n<li><p>If <code class=\"codespan\">yAxis.min</code> and <code class=\"codespan\">yAxis.max</code> are not set:</p>\n<ul>\n<li><p>If <code class=\"codespan\">dataZoomX</code> is set to be <code class=\"codespan\">filterMode: &#39;empty&#39;</code>:</p>\n<p>  <code class=\"codespan\">start: 20, end: 80</code> of <code class=\"codespan\">dataZoomY</code> means: from <code class=\"codespan\">20%</code> to <code class=\"codespan\">80%</code> out of <code class=\"codespan\">[dataMinY to dataMaxY]</code> of series.data (i.e., <code class=\"codespan\">[9, 80]</code> in the example above).</p>\n</li>\n<li><p>If <code class=\"codespan\">dataZoomX</code> is set to <code class=\"codespan\">filterMode: &#39;filter&#39;</code>:</p>\n<p>  Since <code class=\"codespan\">dataZoomX</code> is defined before <code class=\"codespan\">dataZoomY</code>, <code class=\"codespan\">start: 30, end: 70</code> of <code class=\"codespan\">dataZoomX</code> means: from <code class=\"codespan\">30%</code> to <code class=\"codespan\">70%</code> out of full series.data, whereas <code class=\"codespan\">start: 20, end: 80</code> of <code class=\"codespan\">dataZoomY</code> means: from <code class=\"codespan\">20%</code> to <code class=\"codespan\">80%</code> out of the series.data having been filtered by <code class=\"codespan\">dataZoomX</code>.</p>\n<p>  If you want to change the process sequence, you can just change the sequence of the definitions apearing in <code class=\"codespan\">option</code>.</p>\n</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<br></p>\n","properties":{}},"visualMap":{"type":"Array","items":{"anyOf":[{"type":["Object"],"description":"<p><strong>Continuous visualMap component (visualMapContinuous)</strong></p>\n<p> (See <a href=\"#visualMap\">the introduction to visual Map component (visualMap)</a>)</p>\n<p>You can set <a href=\"#visualMap.calculable\">visualMap.calculable</a> to show or hide the handles, which are used to change the selected range in <code class=\"codespan\">visualMapContinuous</code>.</p>\n<p><br>\n<br></p>\n","properties":{"type":{"type":["string"],"description":"<p>Used to determine that it is a continuous visualMap component.</p>\n","default":"continuous"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"min":{"type":["number"],"description":"<p>Specify the min dataValue for the visualMap component. <code class=\"codespan\">[visualMap.min, visualMax.max]</code> make up the domain of viusul mapping.</p>\n<p>Notice that <code class=\"codespan\">min</code> and <code class=\"codespan\">max</code> should be specified explicitly, and be <code class=\"codespan\">[0, 200]</code> by default, but not <code class=\"codespan\">dataMin</code> and <code class=\"codespan\">dataMax</code> in series.data.</p>\n"},"max":{"type":["number"],"description":"<p>Specify the max dataValue for the visualMap component. <code class=\"codespan\">[visualMap.min, visualMax.max]</code> make up the domain of viusul mapping.</p>\n<p>Notice that <code class=\"codespan\">min</code> and <code class=\"codespan\">max</code> should be specified explicitly, and be <code class=\"codespan\">[0, 200]</code> by default, but not <code class=\"codespan\">dataMin</code> and <code class=\"codespan\">dataMax</code> in series.data.</p>\n"},"range":{"type":["Array"],"description":"<p>Specify selected range, that is, the dataValue corresponding to the two handles. For example:</p>\n<pre><code class=\"lang-javascript\">chart.setOption({\n    visualMap: {\n        min: 0,\n        max: 100,\n        // dataValue corresponding to the two handles.\n        range: [4, 15],\n        ...\n    }\n});\n</code></pre>\n<p><strong>auto-adaption when min or max is modified by setOption</strong></p>\n<ul>\n<li>If <code class=\"codespan\">range</code> is not set (or set to null or undefined)</li>\n</ul>\n<pre><code class=\"lang-javascript\">For instance:\nchart.setOption({visualMap: {min: 10, max: 300}}); // range is not set, then range is [min, max] by default, that is, [10, 300].\n\nchart.setOption({visualMap: {min: 0, max: 400}}); // Modify min and max using setOption again.\n// Then range will be auto-modified to the new [min, max], that is, [0, 400].\n</code></pre>\n<ul>\n<li>If <code class=\"codespan\">range</code> is set explicitly, such as [10, 300]</li>\n</ul>\n<pre><code class=\"lang-javascript\">For instance:\nchart.setOption({visualMap: {min: 10, max: 300, range: [20, 80]}}); // range is set to [20, 80].\n\nchart.setOption({visualMap: {min: 0, max: 400}}); // min and max are modifies using setOption.\n// Then range keep the original value ([20, 80]) but will not do auto-adaption.\n\nchart.setOption({visualMap: {range: null}}); // Set range to null then.\n// Then auto-adaption of range turns on and range is auto modified to [min, max], that is, [0, 400].\n\n</code></pre>\n<p><code class=\"codespan\">range</code> gotten by <code class=\"codespan\">getOption</code> is always an <code class=\"codespan\">Array</code>, but not <code class=\"codespan\">null</code> or <code class=\"codespan\">undefined</code>.</p>\n"},"calculable":{"type":["boolean"],"description":"<p>Whether show handles, which can be dragged to adjust &quot;selected range&quot;.</p>\n<p>Notes: In order to be compatible with ECharts2, the rule, which seems to be a little odd, is retained: when <a href=\"#visualMap.type\">visualMap.type</a> is not set, and <a href=\"#visualMap-continuous.calculable\">visualMap.calculable</a> was set to be <code class=\"codespan\">true</code>, <a href=\"#visualMap.type\">visualMap.type</a> will be automatically set as <code class=\"codespan\">&#39;continuous&#39;</code>, regardless of some settings such as <a href=\"#visualMap-piecewise.splitNumber\">visualMap-piecewise.splitNumber</a>. Therefore, it is recommended to set <a href=\"#visualMap.type\">visualMap.type</a> explicitly, which avoids ambiguity.</p>\n","default":false},"realtime":{"type":["boolean"],"description":"<p>Whether to update view in real time when dragging a handle.</p>\n<ul>\n<li><p>If <code class=\"codespan\">ture</code>, the chart view will be updated in real time when dragging.</p>\n</li>\n<li><p>If <code class=\"codespan\">false</code>, the chart view will be updated at the end of the handle dragging.</p>\n</li>\n</ul>\n","default":true},"inverse":{"type":["boolean"],"description":"<p>Whether to inverse the layout of visualMap component.</p>\n<p>As <code class=\"codespan\">inverse</code> is <code class=\"codespan\">false</code>, the layout direction is the same as <a href=\"#grid\">cartesian coordinate</a>. That is:</p>\n<ul>\n<li>As <a href=\"#visualMap.orient\">visualMap.orient</a> is <code class=\"codespan\">&#39;vertical&#39;</code>, large data are placed at the top while small at the bottom.</li>\n<li>As <a href=\"#visualMap.orient\">visualMap.orient</a> is <code class=\"codespan\">&#39;horizontal&#39;</code>,  large data are placed on the right while small on the left.</li>\n</ul>\n<p>As <code class=\"codespan\">inverse</code> is <code class=\"codespan\">true</code>, the result is opposite.</p>\n","default":false},"precision":{"type":["number"],"description":"<p>The decimal precision of label, defaults to be 0 (no decimals).</p>\n","default":0},"itemWidth":{"type":["number"],"description":"<p>The width of the main bar of visualMap component.</p>\n","default":20},"itemHeight":{"type":["number"],"description":"<p>The height of the main bar of visualMap component.</p>\n","default":140},"align":{"type":["string"],"description":"<p>Specify the position of handles and labels, against the main bar. The possible values are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;auto&#39;</code> Decide automatically.</li>\n<li><code class=\"codespan\">&#39;left&#39;</code> The handles and labels are on the right, which is valid when <code class=\"codespan\">orient</code> is set as <code class=\"codespan\">&#39;horizontal&#39;</code>.</li>\n<li><code class=\"codespan\">&#39;right&#39;</code> The handles and labels are on the left, which is valid when <code class=\"codespan\">orient</code> is set as <code class=\"codespan\">&#39;horizontal&#39;</code>.</li>\n<li><code class=\"codespan\">&#39;top&#39;</code> the handles and labels are at the bottom, which is valid when <code class=\"codespan\">orient</code> is set as  <code class=\"codespan\">&#39;vertical&#39;</code>.</li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code> the handles and labels are at the top, which is valid when <code class=\"codespan\">orient</code> is set as <code class=\"codespan\">&#39;vertical&#39;</code>.</li>\n</ul>\n","default":"'auto'"},"text":{"type":["Array"],"description":"<p>The label text on both ends, such as <code class=\"codespan\">[&#39;High&#39;, &#39;Low&#39;]</code>. <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/map-visualMap-continuous-text&amp;edit=1&amp;reset=1\" target=\"_blank\">sample</a>.</p>\n<p>You can understand the order of items in <code class=\"codespan\">text</code> array just by a simple trial. See <a href=\"#visualMap.inverse\">visualMap.inverse</a>.</p>\n","default":null},"textGap":{"type":["number"],"description":"<p>The distance between the ends of the main bar and the label, with unit px. See <a href=\"#visualMap-continuous.text\">visualMap-continuous.text</a></p>\n","default":10},"show":{"type":["boolean"],"description":"<p>Whether to show visualMap-continuous component. If set as <code class=\"codespan\">false</code>, visualMap-continuous component will not show, but it can still perform visual mapping from dataValue to visual channel in chart.</p>\n","default":true},"dimension":{"type":["string"],"description":"<p>Specify which dimension should be used to fetch dataValue from <a href=\"#series.data\">series.data</a>, and then map them to visual channel.</p>\n<p><a href=\"#series.data\">series.data</a> can be regarded as a two-dimensional array, for instance:</p>\n<pre><code class=\"lang-javascript\">[\n    [12, 23, 43],\n    [12, 23, 43],\n    [43, 545, 65],\n    [92, 23, 33]\n]\n</code></pre>\n<p>Each column of the above array is regarded as a <code class=\"codespan\">dimension</code>. For example, when property <code class=\"codespan\">dimension</code> is set to 1, the second column (i.e., 23, 23, 545, 23) is chosen to perform visual mapping.</p>\n<p>Use the last dimension of <code class=\"codespan\">data</code> by default.</p>\n"},"seriesIndex":{"type":["number","Array"],"description":"<p>Specify visual mapping should be performed on which series, from which\n<a href=\"#series.data\">series.data</a> is fetched.</p>\n<p>All series are used by default.</p>\n"},"hoverLink":{"type":["boolean"],"description":"<p><code class=\"codespan\">hoverLink</code> enable highlight certain graphical elements of chart when mouse hovers on some place of <code class=\"codespan\">visualMap</code> component that is coresponding to those graphical elements by visual mapping.</p>\n<p>Inversely, when mouse hovers a graphical element of chart, its value label will be displayed on its corresponding position in <code class=\"codespan\">visualMap</code>.</p>\n","default":true},"inRange":{"type":["Object"],"description":"<p>Define visual channels that will mapped from dataValues that are <strong>in selected range</strong>. (User can interact with visualMap component and make a seleced range by mouse or touch.)</p>\n<p>Possiable visual channels includes:</p>\n<ul>\n<li><code class=\"codespan\">symbol</code>: Type of symbol.</li>\n<li><code class=\"codespan\">symbolSize</code>: Symbol size.</li>\n<li><code class=\"codespan\">color</code>: Symbol color.</li>\n<li><code class=\"codespan\">colorAlpha</code>: Symbol alpha channel.</li>\n<li><code class=\"codespan\">opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code class=\"codespan\">colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<hr>\n<p><code class=\"codespan\">inRange</code> could customize visual channels both in series (by <a href=\"#visualMap-continuous.seriesIndex\">visualMap-continuous.seriesIndex</a>) and in <code class=\"codespan\">visualMap-continuous</code> itself.</p>\n<p>For instance, if a <code class=\"codespan\">visualMap-continuous</code> component is used on a scatter chart, the mapping approach from data to <code class=\"codespan\">color</code> (or <code class=\"codespan\">symbol</code>, <code class=\"codespan\">size</code>, ...) can be both customized in the scatter chart and <code class=\"codespan\">visualMap-continuous</code> component itself. See the code as following:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels both in target series and visualMap-continuous component itself:\n        inRange: {\n            color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n            symbolSize: [30, 100]\n        }\n    }\n]\n</code></pre>\n<p>If you want to define visual channels for target series and visualMap-continuous component separately, you should do as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels only for target series.\n        target: {\n            inRange: {\n                color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n                symbolSize: [60, 200]\n            }\n        },\n        // Define visual channels only for visualMap-continuous component.\n        controller: {\n            inRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n</code></pre>\n<p>Or define as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels for both target series and visualMap-continuous component.\n        inRange: {\n            color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n            symbolSize: [60, 200]\n        },\n        // Define visual channels only for visualMap-continuous component, which\n        // will overlap the properties with the same name in the above common\n        // definition. (symbolSize is overlapped by [30, 100] while color\n        // keeps the original value)\n        controller: {\n            inRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>✦ About visual channels ✦</strong></p>\n<ul>\n<li><p>Various visual channels (such as <code class=\"codespan\">color</code>、<code class=\"codespan\">symbolSize</code> and ect.) can be defined in inRange at the same time and all of them will be apopted.</p>\n</li>\n<li><p>Basically visual channels <code class=\"codespan\">opacity</code> is recommended, rather than <code class=\"codespan\">colorAlpha</code>. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.</p>\n</li>\n<li><p>There are two approaches of visual mapping supported: &#39;Linear Mapping&#39; and &#39;Table Mapping&#39;.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>✦ Linear Mapping to visual channel ✦</strong></p>\n<p><code class=\"codespan\">Linear Mapping</code> means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of <code class=\"codespan\">[visaulMap.min, visualMap.max]</code> to a given range of <code class=\"codespan\">[visual value 1, visual value 2]</code> and obtaining a final value (say visual value) for visual channel rendering.</p>\n<p>For instance, <code class=\"codespan\">[visualMap.min, visualMap.max]</code> is set to be <code class=\"codespan\">[0, 100]</code>, and there is series.data: <code class=\"codespan\">[50, 10, 100]</code>. We intend to map them to an <code class=\"codespan\">opacity</code> range <code class=\"codespan\">[0.4, 1]</code>, by which the size of value can be demostrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values <code class=\"codespan\">[0.7, 0.44, 1]</code>, cooresponding to each dataValue.</p>\n<p>We can also set the visual range inversely, such as <code class=\"codespan\">opacity: [1, 0.4]</code>, and the final mapping result for the given series.data above will be <code class=\"codespan\">[0.7, 0.96, 0.4]</code>.</p>\n<p>Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by default, but not <code class=\"codespan\">dataMin</code> and <code class=\"codespan\">dataMax</code> in series.data.</p>\n<p>How to configure visualMap component to do Linear Mapping?</p>\n<ul>\n<li><p>When use <a href=\"#visualMap-continuous\">visualMap-continuous</a>, or</p>\n</li>\n<li><p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is not used.</p>\n</li>\n</ul>\n<p>About the value of visual channel (visual value):</p>\n<ul>\n<li><p>Basically <code class=\"codespan\">Array</code> is used to express the range of visual value, e.g., <code class=\"codespan\">color: [&#39;#333&#39;, &#39;#777&#39;]</code>.</p>\n</li>\n<li><p>Single <code class=\"codespan\">number</code> or single <code class=\"codespan\">string</code> can also be used, which will be converted to an <code class=\"codespan\">Array</code> by visualMap component. e.g.:  <code class=\"codespan\">opacity: 0.4</code> will be converted to <code class=\"codespan\">opacity: [0.4, 0.4]</code>, <code class=\"codespan\">color: &#39;#333&#39;</code> will be converted to <code class=\"codespan\">color: [&#39;#333&#39;, &#39;#333&#39;]</code>.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">symbolSize</code>, <code class=\"codespan\">opacity</code>, <code class=\"codespan\">colorAlpha</code>, <code class=\"codespan\">colorLightness</code>, <code class=\"codespan\">colorSaturation</code>, <code class=\"codespan\">colorHue</code>, the range of visual value is always in the form of: <code class=\"codespan\">[visual value of visualMap.min, visual value of visualMap.max]</code>. For example, <code class=\"codespan\">colorLightness: [0.8, 0.2]</code> means that the dataValue in series.data that equals to <code class=\"codespan\">visualMap.min</code> (if any) will be mapped to lightness <code class=\"codespan\">0.8</code>, and the dataValue that equals to <code class=\"codespan\">visualMap.max</code> (if any) will be mapped to lightness <code class=\"codespan\">0.2</code>, and other dataValues will be mapped by the linear calculateion based on the domain of <code class=\"codespan\">[visualMap.min, visualMap.max]</code> and the range of <code class=\"codespan\">[0.8, 0.2]</code>.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">color</code>, array is used, like: <code class=\"codespan\">[&#39;#333&#39;, &#39;#78ab23&#39;, &#39;blue&#39;]</code>, which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to <code class=\"codespan\">visualMap.min</code> will be mapped onto <code class=\"codespan\">&#39;#333&#39;</code>, the dataValue that equals to <code class=\"codespan\">visualMap.max</code> will be mapped onto <code class=\"codespan\">&#39;blue&#39;</code>, and other dataValues will be piecewisely interpolated to get the final color.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">symbol</code>, array is used, like: <code class=\"codespan\">[&#39;circle&#39;, &#39;rect&#39;, &#39;diamond&#39;]</code>, where the dataValue that equals to <code class=\"codespan\">visualMap.min</code> will be mapped onto <code class=\"codespan\">&#39;circle&#39;</code>, the dataValue that equals to <code class=\"codespan\">visualMap.max</code> will be mapped onto <code class=\"codespan\">&#39;diamond&#39;</code>, and other dataValues will be caculated based on the numerical distance to <code class=\"codespan\">visualMax.min</code> and to <code class=\"codespan\">visualMap.max</code>, and mapped onto one of <code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>.</p>\n</li>\n</ul>\n<p>About the possible value range of visual value:</p>\n<ul>\n<li><p><code class=\"codespan\">opacity</code>、<code class=\"codespan\">colorAlpha</code>、<code class=\"codespan\">colorLightness</code>、<code class=\"codespan\">colorSaturation</code>、<code class=\"codespan\">visual value</code></p>\n<p>  possible value range is <code class=\"codespan\">[0, 1]</code>.</p>\n</li>\n<li><p><code class=\"codespan\">colorHue</code>:</p>\n<p>  possible value range is <code class=\"codespan\">[0, 360]</code>.</p>\n</li>\n<li><p><code class=\"codespan\">color</code>:</p>\n<p>  color can use RGB expression, like <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>, or RGBA expression, like <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>, or Hex expression, like &#39;#ccc&#39;.</p>\n</li>\n<li><p><code class=\"codespan\">symbol</code>:</p>\n</li>\n</ul>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p><br></p>\n<hr>\n<p><strong>✦ Table Mapping to visual channel ✦</strong></p>\n<p><code class=\"codespan\">Table Mapping</code> could be used when dataValue (values in series.data, specified by <a href=\"#visualMap.dimension\">visualMap.dimension</a>) is enumerable and we intend to map them to visual value by looking up a given table.</p>\n<p>For instance, in a <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> component, <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is set to <code class=\"codespan\">[&#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. And there is series.data: <code class=\"codespan\">[&#39;Demon Hunter&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. Then we can establish the lookup rule for color: <code class=\"codespan\">color: {&#39;Warden&#39;: &#39;red&#39;, &#39;Demon Hunter&#39;: &#39;black&#39;}</code>, by which the <code class=\"codespan\">visualMap</code> component will map <code class=\"codespan\">dataValue</code> to <code class=\"codespan\">color</code>.</p>\n<p>How to configure <code class=\"codespan\">visualMap</code> component to do <code class=\"codespan\">Table Mapping</code>?</p>\n<p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a>is set.</p>\n<p>About the value of visual channel (visual value):</p>\n<p>Generally <code class=\"codespan\">Object</code> or <code class=\"codespan\">Array</code> is used, for instance:</p>\n<pre><code class=\"lang-javascript\">visualMap: {\n    type: &#39;piecewise&#39;,\n    // categories defines the items that to be displayed in visualMap-piecewise component.\n    categories: [\n        &#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;\n    ],\n    inRange: {\n        // visual value can be an Object:\n        color: {\n            &#39;Warden&#39;: &#39;red&#39;,\n            &#39;Demon Hunter&#39;: &#39;black&#39;,\n            &#39;&#39;: &#39;green&#39; // Blank string means that except &#39;Warden&#39; and &#39;Demon Hunter&#39;,\n                        // all other dataValues should be mapped to &#39;green&#39;.\n        }\n        // visual value can also be a single value,\n        // means that all dataValues should be mapped to the value.\n        color: &#39;green&#39;,\n        // visual value can also be a array, with the same length\n        // as the array of categories and one-one mapping onto it.\n        color: [&#39;red&#39;, &#39;black&#39;, &#39;green&#39;, &#39;yellow&#39;, &#39;white&#39;]\n    }\n}\n</code></pre>\n<p><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/scatter-visualMap-categories&amp;edit=1&amp;reset=1\" target=\"_blank\">Example</a></p>\n<hr>\n<p><strong>✦ How to modity configurations of vsiual encoding? ✦</strong></p>\n<p>If you want to modify the configurations of visual encoding after chart been rendered (by invoke <code class=\"codespan\">setOption</code> to set the initial <code class=\"codespan\">option</code>), <code class=\"codespan\">setOption</code> can be used again to modify configurations of visual encoding. For instance:</p>\n<pre><code class=\"lang-javascript\">chart.setOption({\n    visualMap: {\n        inRange: {color: [&#39;red&#39;, &#39;blue&#39;]}\n    }\n});\n</code></pre>\n<p>Notice:</p>\n<ul>\n<li><p>These visualMap properties (i.e. <code class=\"codespan\">inRange</code>, <code class=\"codespan\">outOfRange</code>, <code class=\"codespan\">target</code>, <code class=\"codespan\">controller</code>) do not support &quot;merge&quot;, that is, anyone among them is modified when use <code class=\"codespan\">setOption</code> again, all of the original values of them will not be kept but erased. The &quot;merge&quot; brings complication in implemnentation and understanding, whereas &quot;erase all&quot; normalize the practise: once you want to modify some visual values, you should pass all of them to <code class=\"codespan\">setOption</code>, no matter they are to be changed.</p>\n</li>\n<li><p>This way, <code class=\"codespan\">getOption() -&gt; modify the gotten option -&gt; setOption(modified option)</code>, is strongly <strong>not recommended</strong>, for instance:</p>\n</li>\n</ul>\n<pre><code class=\"lang-javascript\">// Not recommended approach, regardless of its correctness:\n\nvar option = chart.getOption(); // Get the entire option.\noption.visualMap.inRange.color = [&#39;red&#39;, &#39;blue&#39;]; // modify color, which is what you want.\n\n// You have to modify those two properties, otherwise you will not get what you want.\noption.visualMap.target.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\noption.visualMap.controller.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\n\nchart.setOption(option); // set the modified option back.\n// You should not use this approach, but use the\n// approach demostrated before this example.\n</code></pre>\n<p><strong>Notice:</strong> There is default color <code class=\"codespan\">[&#39;#f6efa6&#39;, &#39;#d88273&#39;, &#39;#bf444c&#39;]</code> in <code class=\"codespan\">inRange</code> if you not set <code class=\"codespan\">inRange</code>. If you dont want it, set <code class=\"codespan\">inRange: {color: null}</code> to disable it.</p>\n"},"outOfRange":{"type":["Object"],"description":"<p>Define visual channels that will mapped from dataValues that are <strong>out of selected range</strong>. (User can interact with visualMap component and make a seleced range by mouse or touch.)</p>\n<p>Possiable visual channels includes:</p>\n<ul>\n<li><code class=\"codespan\">symbol</code>: Type of symbol.</li>\n<li><code class=\"codespan\">symbolSize</code>: Symbol size.</li>\n<li><code class=\"codespan\">color</code>: Symbol color.</li>\n<li><code class=\"codespan\">colorAlpha</code>: Symbol alpha channel.</li>\n<li><code class=\"codespan\">opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code class=\"codespan\">colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<p><code class=\"codespan\">outOfRange</code> could customize visual channels both in series (by <a href=\"#visualMap-continuous.seriesIndex\">visualMap-continuous.seriesIndex</a>) and in <code class=\"codespan\">visualMap-continuous</code> itself.</p>\n<p>For instance, if a <code class=\"codespan\">visualMap-continuous</code> component is used on a scatter chart, the mapping approach from data to <code class=\"codespan\">color</code> (or <code class=\"codespan\">symbol</code>, <code class=\"codespan\">size</code>, ...) can be both customized in the scatter chart and <code class=\"codespan\">visualMap-continuous</code> component itself. See the code as following:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels both in target series and visualMap-continuous component itself:\n        outOfRange: {\n            color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n            symbolSize: [30, 100]\n        }\n    }\n]\n</code></pre>\n<p>If you want to define visual channels for target series and visualMap-continuous component separately, you should do as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels only for target series.\n        target: {\n            outOfRange: {\n                color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n                symbolSize: [60, 200]\n            }\n        },\n        // Define visual channels only for visualMap-continuous component.\n        controller: {\n            outOfRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n</code></pre>\n<p>Or define as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels for both target series and visualMap-continuous component.\n        outOfRange: {\n            color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n            symbolSize: [60, 200]\n        },\n        // Define visual channels only for visualMap-continuous component, which\n        // will overlap the properties with the same name in the above common\n        // definition. (symbolSize is overlapped by [30, 100] while color\n        // keeps the original value)\n        controller: {\n            outOfRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>✦ About visual channels ✦</strong></p>\n<ul>\n<li><p>Various visual channels (such as <code class=\"codespan\">color</code>、<code class=\"codespan\">symbolSize</code> and ect.) can be defined in outOfRange at the same time and all of them will be apopted.</p>\n</li>\n<li><p>Basically visual channels <code class=\"codespan\">opacity</code> is recommended, rather than <code class=\"codespan\">colorAlpha</code>. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.</p>\n</li>\n<li><p>There are two approaches of visual mapping supported: &#39;Linear Mapping&#39; and &#39;Table Mapping&#39;.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>✦ Linear Mapping to visual channel ✦</strong></p>\n<p><code class=\"codespan\">Linear Mapping</code> means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of <code class=\"codespan\">[visaulMap.min, visualMap.max]</code> to a given range of <code class=\"codespan\">[visual value 1, visual value 2]</code> and obtaining a final value (say visual value) for visual channel rendering.</p>\n<p>For instance, <code class=\"codespan\">[visualMap.min, visualMap.max]</code> is set to be <code class=\"codespan\">[0, 100]</code>, and there is series.data: <code class=\"codespan\">[50, 10, 100]</code>. We intend to map them to an <code class=\"codespan\">opacity</code> range <code class=\"codespan\">[0.4, 1]</code>, by which the size of value can be demostrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values <code class=\"codespan\">[0.7, 0.44, 1]</code>, cooresponding to each dataValue.</p>\n<p>We can also set the visual range inversely, such as <code class=\"codespan\">opacity: [1, 0.4]</code>, and the final mapping result for the given series.data above will be <code class=\"codespan\">[0.7, 0.96, 0.4]</code>.</p>\n<p>Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by default, but not <code class=\"codespan\">dataMin</code> and <code class=\"codespan\">dataMax</code> in series.data.</p>\n<p>How to configure visualMap component to do Linear Mapping?</p>\n<ul>\n<li><p>When use <a href=\"#visualMap-continuous\">visualMap-continuous</a>, or</p>\n</li>\n<li><p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is not used.</p>\n</li>\n</ul>\n<p>About the value of visual channel (visual value):</p>\n<ul>\n<li><p>Basically <code class=\"codespan\">Array</code> is used to express the range of visual value, e.g., <code class=\"codespan\">color: [&#39;#333&#39;, &#39;#777&#39;]</code>.</p>\n</li>\n<li><p>Single <code class=\"codespan\">number</code> or single <code class=\"codespan\">string</code> can also be used, which will be converted to an <code class=\"codespan\">Array</code> by visualMap component. e.g.:  <code class=\"codespan\">opacity: 0.4</code> will be converted to <code class=\"codespan\">opacity: [0.4, 0.4]</code>, <code class=\"codespan\">color: &#39;#333&#39;</code> will be converted to <code class=\"codespan\">color: [&#39;#333&#39;, &#39;#333&#39;]</code>.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">symbolSize</code>, <code class=\"codespan\">opacity</code>, <code class=\"codespan\">colorAlpha</code>, <code class=\"codespan\">colorLightness</code>, <code class=\"codespan\">colorSaturation</code>, <code class=\"codespan\">colorHue</code>, the range of visual value is always in the form of: <code class=\"codespan\">[visual value of visualMap.min, visual value of visualMap.max]</code>. For example, <code class=\"codespan\">colorLightness: [0.8, 0.2]</code> means that the dataValue in series.data that equals to <code class=\"codespan\">visualMap.min</code> (if any) will be mapped to lightness <code class=\"codespan\">0.8</code>, and the dataValue that equals to <code class=\"codespan\">visualMap.max</code> (if any) will be mapped to lightness <code class=\"codespan\">0.2</code>, and other dataValues will be mapped by the linear calculateion based on the domain of <code class=\"codespan\">[visualMap.min, visualMap.max]</code> and the range of <code class=\"codespan\">[0.8, 0.2]</code>.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">color</code>, array is used, like: <code class=\"codespan\">[&#39;#333&#39;, &#39;#78ab23&#39;, &#39;blue&#39;]</code>, which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to <code class=\"codespan\">visualMap.min</code> will be mapped onto <code class=\"codespan\">&#39;#333&#39;</code>, the dataValue that equals to <code class=\"codespan\">visualMap.max</code> will be mapped onto <code class=\"codespan\">&#39;blue&#39;</code>, and other dataValues will be piecewisely interpolated to get the final color.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">symbol</code>, array is used, like: <code class=\"codespan\">[&#39;circle&#39;, &#39;rect&#39;, &#39;diamond&#39;]</code>, where the dataValue that equals to <code class=\"codespan\">visualMap.min</code> will be mapped onto <code class=\"codespan\">&#39;circle&#39;</code>, the dataValue that equals to <code class=\"codespan\">visualMap.max</code> will be mapped onto <code class=\"codespan\">&#39;diamond&#39;</code>, and other dataValues will be caculated based on the numerical distance to <code class=\"codespan\">visualMax.min</code> and to <code class=\"codespan\">visualMap.max</code>, and mapped onto one of <code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>.</p>\n</li>\n</ul>\n<p>About the possible value range of visual value:</p>\n<ul>\n<li><p><code class=\"codespan\">opacity</code>、<code class=\"codespan\">colorAlpha</code>、<code class=\"codespan\">colorLightness</code>、<code class=\"codespan\">colorSaturation</code>、<code class=\"codespan\">visual value</code></p>\n<p>  possible value range is <code class=\"codespan\">[0, 1]</code>.</p>\n</li>\n<li><p><code class=\"codespan\">colorHue</code>:</p>\n<p>  possible value range is <code class=\"codespan\">[0, 360]</code>.</p>\n</li>\n<li><p><code class=\"codespan\">color</code>:</p>\n<p>  color can use RGB expression, like <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>, or RGBA expression, like <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>, or Hex expression, like &#39;#ccc&#39;.</p>\n</li>\n<li><p><code class=\"codespan\">symbol</code>:</p>\n</li>\n</ul>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p><br></p>\n<hr>\n<p><strong>✦ Table Mapping to visual channel ✦</strong></p>\n<p><code class=\"codespan\">Table Mapping</code> could be used when dataValue (values in series.data, specified by <a href=\"#visualMap.dimension\">visualMap.dimension</a>) is enumerable and we intend to map them to visual value by looking up a given table.</p>\n<p>For instance, in a <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> component, <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is set to <code class=\"codespan\">[&#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. And there is series.data: <code class=\"codespan\">[&#39;Demon Hunter&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. Then we can establish the lookup rule for color: <code class=\"codespan\">color: {&#39;Warden&#39;: &#39;red&#39;, &#39;Demon Hunter&#39;: &#39;black&#39;}</code>, by which the <code class=\"codespan\">visualMap</code> component will map <code class=\"codespan\">dataValue</code> to <code class=\"codespan\">color</code>.</p>\n<p>How to configure <code class=\"codespan\">visualMap</code> component to do <code class=\"codespan\">Table Mapping</code>?</p>\n<p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a>is set.</p>\n<p>About the value of visual channel (visual value):</p>\n<p>Generally <code class=\"codespan\">Object</code> or <code class=\"codespan\">Array</code> is used, for instance:</p>\n<pre><code class=\"lang-javascript\">visualMap: {\n    type: &#39;piecewise&#39;,\n    // categories defines the items that to be displayed in visualMap-piecewise component.\n    categories: [\n        &#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;\n    ],\n    outOfRange: {\n        // visual value can be an Object:\n        color: {\n            &#39;Warden&#39;: &#39;red&#39;,\n            &#39;Demon Hunter&#39;: &#39;black&#39;,\n            &#39;&#39;: &#39;green&#39; // Blank string means that except &#39;Warden&#39; and &#39;Demon Hunter&#39;,\n                        // all other dataValues should be mapped to &#39;green&#39;.\n        }\n        // visual value can also be a single value,\n        // means that all dataValues should be mapped to the value.\n        color: &#39;green&#39;,\n        // visual value can also be a array, with the same length\n        // as the array of categories and one-one mapping onto it.\n        color: [&#39;red&#39;, &#39;black&#39;, &#39;green&#39;, &#39;yellow&#39;, &#39;white&#39;]\n    }\n}\n</code></pre>\n<p><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/scatter-visualMap-categories&amp;edit=1&amp;reset=1\" target=\"_blank\">Example</a></p>\n<hr>\n<p><strong>✦ How to modity configurations of vsiual encoding? ✦</strong></p>\n<p>If you want to modify the configurations of visual encoding after chart been rendered (by invoke <code class=\"codespan\">setOption</code> to set the initial <code class=\"codespan\">option</code>), <code class=\"codespan\">setOption</code> can be used again to modify configurations of visual encoding. For instance:</p>\n<pre><code class=\"lang-javascript\">chart.setOption({\n    visualMap: {\n        inRange: {color: [&#39;red&#39;, &#39;blue&#39;]}\n    }\n});\n</code></pre>\n<p>Notice:</p>\n<ul>\n<li><p>These visualMap properties (i.e. <code class=\"codespan\">inRange</code>, <code class=\"codespan\">outOfRange</code>, <code class=\"codespan\">target</code>, <code class=\"codespan\">controller</code>) do not support &quot;merge&quot;, that is, anyone among them is modified when use <code class=\"codespan\">setOption</code> again, all of the original values of them will not be kept but erased. The &quot;merge&quot; brings complication in implemnentation and understanding, whereas &quot;erase all&quot; normalize the practise: once you want to modify some visual values, you should pass all of them to <code class=\"codespan\">setOption</code>, no matter they are to be changed.</p>\n</li>\n<li><p>This way, <code class=\"codespan\">getOption() -&gt; modify the gotten option -&gt; setOption(modified option)</code>, is strongly <strong>not recommended</strong>, for instance:</p>\n</li>\n</ul>\n<pre><code class=\"lang-javascript\">// Not recommended approach, regardless of its correctness:\n\nvar option = chart.getOption(); // Get the entire option.\noption.visualMap.inRange.color = [&#39;red&#39;, &#39;blue&#39;]; // modify color, which is what you want.\n\n// You have to modify those two properties, otherwise you will not get what you want.\noption.visualMap.target.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\noption.visualMap.controller.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\n\nchart.setOption(option); // set the modified option back.\n// You should not use this approach, but use the\n// approach demostrated before this example.\n</code></pre>\n"},"controller":{"type":["Object"],"description":"<p>Property <code class=\"codespan\">inRange</code> and <code class=\"codespan\">outOfRange</code> can be set within property <code class=\"codespan\">controller</code>, which means those <code class=\"codespan\">inRange</code> and <code class=\"codespan\">outOfRange</code> are only used on the controller (<code class=\"codespan\">visualMap</code> component itself), but are not used on chart (series). This property is useful in some scenarios when the view of controller needs to be customized in detail.</p>\n","properties":{"inRange":{"type":["Object"],"description":"<p>Define visual channels that will mapped from dataValues that are <strong>in selected range</strong>. (User can interact with visualMap component and make a seleced range by mouse or touch.)</p>\n<p>Possiable visual channels includes:</p>\n<ul>\n<li><code class=\"codespan\">symbol</code>: Type of symbol.</li>\n<li><code class=\"codespan\">symbolSize</code>: Symbol size.</li>\n<li><code class=\"codespan\">color</code>: Symbol color.</li>\n<li><code class=\"codespan\">colorAlpha</code>: Symbol alpha channel.</li>\n<li><code class=\"codespan\">opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code class=\"codespan\">colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<hr>\n<p><code class=\"codespan\">inRange</code> could customize visual channels both in series (by <a href=\"#visualMap-continuous.seriesIndex\">visualMap-continuous.seriesIndex</a>) and in <code class=\"codespan\">visualMap-continuous</code> itself.</p>\n<p>For instance, if a <code class=\"codespan\">visualMap-continuous</code> component is used on a scatter chart, the mapping approach from data to <code class=\"codespan\">color</code> (or <code class=\"codespan\">symbol</code>, <code class=\"codespan\">size</code>, ...) can be both customized in the scatter chart and <code class=\"codespan\">visualMap-continuous</code> component itself. See the code as following:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels both in target series and visualMap-continuous component itself:\n        inRange: {\n            color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n            symbolSize: [30, 100]\n        }\n    }\n]\n</code></pre>\n<p>If you want to define visual channels for target series and visualMap-continuous component separately, you should do as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels only for target series.\n        target: {\n            inRange: {\n                color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n                symbolSize: [60, 200]\n            }\n        },\n        // Define visual channels only for visualMap-continuous component.\n        controller: {\n            inRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n</code></pre>\n<p>Or define as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels for both target series and visualMap-continuous component.\n        inRange: {\n            color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n            symbolSize: [60, 200]\n        },\n        // Define visual channels only for visualMap-continuous component, which\n        // will overlap the properties with the same name in the above common\n        // definition. (symbolSize is overlapped by [30, 100] while color\n        // keeps the original value)\n        controller: {\n            inRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>✦ About visual channels ✦</strong></p>\n<ul>\n<li><p>Various visual channels (such as <code class=\"codespan\">color</code>、<code class=\"codespan\">symbolSize</code> and ect.) can be defined in inRange at the same time and all of them will be apopted.</p>\n</li>\n<li><p>Basically visual channels <code class=\"codespan\">opacity</code> is recommended, rather than <code class=\"codespan\">colorAlpha</code>. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.</p>\n</li>\n<li><p>There are two approaches of visual mapping supported: &#39;Linear Mapping&#39; and &#39;Table Mapping&#39;.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>✦ Linear Mapping to visual channel ✦</strong></p>\n<p><code class=\"codespan\">Linear Mapping</code> means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of <code class=\"codespan\">[visaulMap.min, visualMap.max]</code> to a given range of <code class=\"codespan\">[visual value 1, visual value 2]</code> and obtaining a final value (say visual value) for visual channel rendering.</p>\n<p>For instance, <code class=\"codespan\">[visualMap.min, visualMap.max]</code> is set to be <code class=\"codespan\">[0, 100]</code>, and there is series.data: <code class=\"codespan\">[50, 10, 100]</code>. We intend to map them to an <code class=\"codespan\">opacity</code> range <code class=\"codespan\">[0.4, 1]</code>, by which the size of value can be demostrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values <code class=\"codespan\">[0.7, 0.44, 1]</code>, cooresponding to each dataValue.</p>\n<p>We can also set the visual range inversely, such as <code class=\"codespan\">opacity: [1, 0.4]</code>, and the final mapping result for the given series.data above will be <code class=\"codespan\">[0.7, 0.96, 0.4]</code>.</p>\n<p>Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by default, but not <code class=\"codespan\">dataMin</code> and <code class=\"codespan\">dataMax</code> in series.data.</p>\n<p>How to configure visualMap component to do Linear Mapping?</p>\n<ul>\n<li><p>When use <a href=\"#visualMap-continuous\">visualMap-continuous</a>, or</p>\n</li>\n<li><p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is not used.</p>\n</li>\n</ul>\n<p>About the value of visual channel (visual value):</p>\n<ul>\n<li><p>Basically <code class=\"codespan\">Array</code> is used to express the range of visual value, e.g., <code class=\"codespan\">color: [&#39;#333&#39;, &#39;#777&#39;]</code>.</p>\n</li>\n<li><p>Single <code class=\"codespan\">number</code> or single <code class=\"codespan\">string</code> can also be used, which will be converted to an <code class=\"codespan\">Array</code> by visualMap component. e.g.:  <code class=\"codespan\">opacity: 0.4</code> will be converted to <code class=\"codespan\">opacity: [0.4, 0.4]</code>, <code class=\"codespan\">color: &#39;#333&#39;</code> will be converted to <code class=\"codespan\">color: [&#39;#333&#39;, &#39;#333&#39;]</code>.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">symbolSize</code>, <code class=\"codespan\">opacity</code>, <code class=\"codespan\">colorAlpha</code>, <code class=\"codespan\">colorLightness</code>, <code class=\"codespan\">colorSaturation</code>, <code class=\"codespan\">colorHue</code>, the range of visual value is always in the form of: <code class=\"codespan\">[visual value of visualMap.min, visual value of visualMap.max]</code>. For example, <code class=\"codespan\">colorLightness: [0.8, 0.2]</code> means that the dataValue in series.data that equals to <code class=\"codespan\">visualMap.min</code> (if any) will be mapped to lightness <code class=\"codespan\">0.8</code>, and the dataValue that equals to <code class=\"codespan\">visualMap.max</code> (if any) will be mapped to lightness <code class=\"codespan\">0.2</code>, and other dataValues will be mapped by the linear calculateion based on the domain of <code class=\"codespan\">[visualMap.min, visualMap.max]</code> and the range of <code class=\"codespan\">[0.8, 0.2]</code>.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">color</code>, array is used, like: <code class=\"codespan\">[&#39;#333&#39;, &#39;#78ab23&#39;, &#39;blue&#39;]</code>, which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to <code class=\"codespan\">visualMap.min</code> will be mapped onto <code class=\"codespan\">&#39;#333&#39;</code>, the dataValue that equals to <code class=\"codespan\">visualMap.max</code> will be mapped onto <code class=\"codespan\">&#39;blue&#39;</code>, and other dataValues will be piecewisely interpolated to get the final color.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">symbol</code>, array is used, like: <code class=\"codespan\">[&#39;circle&#39;, &#39;rect&#39;, &#39;diamond&#39;]</code>, where the dataValue that equals to <code class=\"codespan\">visualMap.min</code> will be mapped onto <code class=\"codespan\">&#39;circle&#39;</code>, the dataValue that equals to <code class=\"codespan\">visualMap.max</code> will be mapped onto <code class=\"codespan\">&#39;diamond&#39;</code>, and other dataValues will be caculated based on the numerical distance to <code class=\"codespan\">visualMax.min</code> and to <code class=\"codespan\">visualMap.max</code>, and mapped onto one of <code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>.</p>\n</li>\n</ul>\n<p>About the possible value range of visual value:</p>\n<ul>\n<li><p><code class=\"codespan\">opacity</code>、<code class=\"codespan\">colorAlpha</code>、<code class=\"codespan\">colorLightness</code>、<code class=\"codespan\">colorSaturation</code>、<code class=\"codespan\">visual value</code></p>\n<p>  possible value range is <code class=\"codespan\">[0, 1]</code>.</p>\n</li>\n<li><p><code class=\"codespan\">colorHue</code>:</p>\n<p>  possible value range is <code class=\"codespan\">[0, 360]</code>.</p>\n</li>\n<li><p><code class=\"codespan\">color</code>:</p>\n<p>  color can use RGB expression, like <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>, or RGBA expression, like <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>, or Hex expression, like &#39;#ccc&#39;.</p>\n</li>\n<li><p><code class=\"codespan\">symbol</code>:</p>\n</li>\n</ul>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p><br></p>\n<hr>\n<p><strong>✦ Table Mapping to visual channel ✦</strong></p>\n<p><code class=\"codespan\">Table Mapping</code> could be used when dataValue (values in series.data, specified by <a href=\"#visualMap.dimension\">visualMap.dimension</a>) is enumerable and we intend to map them to visual value by looking up a given table.</p>\n<p>For instance, in a <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> component, <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is set to <code class=\"codespan\">[&#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. And there is series.data: <code class=\"codespan\">[&#39;Demon Hunter&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. Then we can establish the lookup rule for color: <code class=\"codespan\">color: {&#39;Warden&#39;: &#39;red&#39;, &#39;Demon Hunter&#39;: &#39;black&#39;}</code>, by which the <code class=\"codespan\">visualMap</code> component will map <code class=\"codespan\">dataValue</code> to <code class=\"codespan\">color</code>.</p>\n<p>How to configure <code class=\"codespan\">visualMap</code> component to do <code class=\"codespan\">Table Mapping</code>?</p>\n<p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a>is set.</p>\n<p>About the value of visual channel (visual value):</p>\n<p>Generally <code class=\"codespan\">Object</code> or <code class=\"codespan\">Array</code> is used, for instance:</p>\n<pre><code class=\"lang-javascript\">visualMap: {\n    type: &#39;piecewise&#39;,\n    // categories defines the items that to be displayed in visualMap-piecewise component.\n    categories: [\n        &#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;\n    ],\n    inRange: {\n        // visual value can be an Object:\n        color: {\n            &#39;Warden&#39;: &#39;red&#39;,\n            &#39;Demon Hunter&#39;: &#39;black&#39;,\n            &#39;&#39;: &#39;green&#39; // Blank string means that except &#39;Warden&#39; and &#39;Demon Hunter&#39;,\n                        // all other dataValues should be mapped to &#39;green&#39;.\n        }\n        // visual value can also be a single value,\n        // means that all dataValues should be mapped to the value.\n        color: &#39;green&#39;,\n        // visual value can also be a array, with the same length\n        // as the array of categories and one-one mapping onto it.\n        color: [&#39;red&#39;, &#39;black&#39;, &#39;green&#39;, &#39;yellow&#39;, &#39;white&#39;]\n    }\n}\n</code></pre>\n<p><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/scatter-visualMap-categories&amp;edit=1&amp;reset=1\" target=\"_blank\">Example</a></p>\n<hr>\n<p><strong>✦ How to modity configurations of vsiual encoding? ✦</strong></p>\n<p>If you want to modify the configurations of visual encoding after chart been rendered (by invoke <code class=\"codespan\">setOption</code> to set the initial <code class=\"codespan\">option</code>), <code class=\"codespan\">setOption</code> can be used again to modify configurations of visual encoding. For instance:</p>\n<pre><code class=\"lang-javascript\">chart.setOption({\n    visualMap: {\n        inRange: {color: [&#39;red&#39;, &#39;blue&#39;]}\n    }\n});\n</code></pre>\n<p>Notice:</p>\n<ul>\n<li><p>These visualMap properties (i.e. <code class=\"codespan\">inRange</code>, <code class=\"codespan\">outOfRange</code>, <code class=\"codespan\">target</code>, <code class=\"codespan\">controller</code>) do not support &quot;merge&quot;, that is, anyone among them is modified when use <code class=\"codespan\">setOption</code> again, all of the original values of them will not be kept but erased. The &quot;merge&quot; brings complication in implemnentation and understanding, whereas &quot;erase all&quot; normalize the practise: once you want to modify some visual values, you should pass all of them to <code class=\"codespan\">setOption</code>, no matter they are to be changed.</p>\n</li>\n<li><p>This way, <code class=\"codespan\">getOption() -&gt; modify the gotten option -&gt; setOption(modified option)</code>, is strongly <strong>not recommended</strong>, for instance:</p>\n</li>\n</ul>\n<pre><code class=\"lang-javascript\">// Not recommended approach, regardless of its correctness:\n\nvar option = chart.getOption(); // Get the entire option.\noption.visualMap.inRange.color = [&#39;red&#39;, &#39;blue&#39;]; // modify color, which is what you want.\n\n// You have to modify those two properties, otherwise you will not get what you want.\noption.visualMap.target.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\noption.visualMap.controller.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\n\nchart.setOption(option); // set the modified option back.\n// You should not use this approach, but use the\n// approach demostrated before this example.\n</code></pre>\n<p><strong>Notice:</strong> There is default color <code class=\"codespan\">[&#39;#f6efa6&#39;, &#39;#d88273&#39;, &#39;#bf444c&#39;]</code> in <code class=\"codespan\">inRange</code> if you not set <code class=\"codespan\">inRange</code>. If you dont want it, set <code class=\"codespan\">inRange: {color: null}</code> to disable it.</p>\n"},"outOfRange":{"type":["Object"],"description":"<p>Define visual channels that will mapped from dataValues that are <strong>out of selected range</strong>. (User can interact with visualMap component and make a seleced range by mouse or touch.)</p>\n<p>Possiable visual channels includes:</p>\n<ul>\n<li><code class=\"codespan\">symbol</code>: Type of symbol.</li>\n<li><code class=\"codespan\">symbolSize</code>: Symbol size.</li>\n<li><code class=\"codespan\">color</code>: Symbol color.</li>\n<li><code class=\"codespan\">colorAlpha</code>: Symbol alpha channel.</li>\n<li><code class=\"codespan\">opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code class=\"codespan\">colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<p><code class=\"codespan\">outOfRange</code> could customize visual channels both in series (by <a href=\"#visualMap-continuous.seriesIndex\">visualMap-continuous.seriesIndex</a>) and in <code class=\"codespan\">visualMap-continuous</code> itself.</p>\n<p>For instance, if a <code class=\"codespan\">visualMap-continuous</code> component is used on a scatter chart, the mapping approach from data to <code class=\"codespan\">color</code> (or <code class=\"codespan\">symbol</code>, <code class=\"codespan\">size</code>, ...) can be both customized in the scatter chart and <code class=\"codespan\">visualMap-continuous</code> component itself. See the code as following:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels both in target series and visualMap-continuous component itself:\n        outOfRange: {\n            color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n            symbolSize: [30, 100]\n        }\n    }\n]\n</code></pre>\n<p>If you want to define visual channels for target series and visualMap-continuous component separately, you should do as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels only for target series.\n        target: {\n            outOfRange: {\n                color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n                symbolSize: [60, 200]\n            }\n        },\n        // Define visual channels only for visualMap-continuous component.\n        controller: {\n            outOfRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n</code></pre>\n<p>Or define as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels for both target series and visualMap-continuous component.\n        outOfRange: {\n            color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n            symbolSize: [60, 200]\n        },\n        // Define visual channels only for visualMap-continuous component, which\n        // will overlap the properties with the same name in the above common\n        // definition. (symbolSize is overlapped by [30, 100] while color\n        // keeps the original value)\n        controller: {\n            outOfRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>✦ About visual channels ✦</strong></p>\n<ul>\n<li><p>Various visual channels (such as <code class=\"codespan\">color</code>、<code class=\"codespan\">symbolSize</code> and ect.) can be defined in outOfRange at the same time and all of them will be apopted.</p>\n</li>\n<li><p>Basically visual channels <code class=\"codespan\">opacity</code> is recommended, rather than <code class=\"codespan\">colorAlpha</code>. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.</p>\n</li>\n<li><p>There are two approaches of visual mapping supported: &#39;Linear Mapping&#39; and &#39;Table Mapping&#39;.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>✦ Linear Mapping to visual channel ✦</strong></p>\n<p><code class=\"codespan\">Linear Mapping</code> means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of <code class=\"codespan\">[visaulMap.min, visualMap.max]</code> to a given range of <code class=\"codespan\">[visual value 1, visual value 2]</code> and obtaining a final value (say visual value) for visual channel rendering.</p>\n<p>For instance, <code class=\"codespan\">[visualMap.min, visualMap.max]</code> is set to be <code class=\"codespan\">[0, 100]</code>, and there is series.data: <code class=\"codespan\">[50, 10, 100]</code>. We intend to map them to an <code class=\"codespan\">opacity</code> range <code class=\"codespan\">[0.4, 1]</code>, by which the size of value can be demostrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values <code class=\"codespan\">[0.7, 0.44, 1]</code>, cooresponding to each dataValue.</p>\n<p>We can also set the visual range inversely, such as <code class=\"codespan\">opacity: [1, 0.4]</code>, and the final mapping result for the given series.data above will be <code class=\"codespan\">[0.7, 0.96, 0.4]</code>.</p>\n<p>Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by default, but not <code class=\"codespan\">dataMin</code> and <code class=\"codespan\">dataMax</code> in series.data.</p>\n<p>How to configure visualMap component to do Linear Mapping?</p>\n<ul>\n<li><p>When use <a href=\"#visualMap-continuous\">visualMap-continuous</a>, or</p>\n</li>\n<li><p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is not used.</p>\n</li>\n</ul>\n<p>About the value of visual channel (visual value):</p>\n<ul>\n<li><p>Basically <code class=\"codespan\">Array</code> is used to express the range of visual value, e.g., <code class=\"codespan\">color: [&#39;#333&#39;, &#39;#777&#39;]</code>.</p>\n</li>\n<li><p>Single <code class=\"codespan\">number</code> or single <code class=\"codespan\">string</code> can also be used, which will be converted to an <code class=\"codespan\">Array</code> by visualMap component. e.g.:  <code class=\"codespan\">opacity: 0.4</code> will be converted to <code class=\"codespan\">opacity: [0.4, 0.4]</code>, <code class=\"codespan\">color: &#39;#333&#39;</code> will be converted to <code class=\"codespan\">color: [&#39;#333&#39;, &#39;#333&#39;]</code>.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">symbolSize</code>, <code class=\"codespan\">opacity</code>, <code class=\"codespan\">colorAlpha</code>, <code class=\"codespan\">colorLightness</code>, <code class=\"codespan\">colorSaturation</code>, <code class=\"codespan\">colorHue</code>, the range of visual value is always in the form of: <code class=\"codespan\">[visual value of visualMap.min, visual value of visualMap.max]</code>. For example, <code class=\"codespan\">colorLightness: [0.8, 0.2]</code> means that the dataValue in series.data that equals to <code class=\"codespan\">visualMap.min</code> (if any) will be mapped to lightness <code class=\"codespan\">0.8</code>, and the dataValue that equals to <code class=\"codespan\">visualMap.max</code> (if any) will be mapped to lightness <code class=\"codespan\">0.2</code>, and other dataValues will be mapped by the linear calculateion based on the domain of <code class=\"codespan\">[visualMap.min, visualMap.max]</code> and the range of <code class=\"codespan\">[0.8, 0.2]</code>.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">color</code>, array is used, like: <code class=\"codespan\">[&#39;#333&#39;, &#39;#78ab23&#39;, &#39;blue&#39;]</code>, which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to <code class=\"codespan\">visualMap.min</code> will be mapped onto <code class=\"codespan\">&#39;#333&#39;</code>, the dataValue that equals to <code class=\"codespan\">visualMap.max</code> will be mapped onto <code class=\"codespan\">&#39;blue&#39;</code>, and other dataValues will be piecewisely interpolated to get the final color.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">symbol</code>, array is used, like: <code class=\"codespan\">[&#39;circle&#39;, &#39;rect&#39;, &#39;diamond&#39;]</code>, where the dataValue that equals to <code class=\"codespan\">visualMap.min</code> will be mapped onto <code class=\"codespan\">&#39;circle&#39;</code>, the dataValue that equals to <code class=\"codespan\">visualMap.max</code> will be mapped onto <code class=\"codespan\">&#39;diamond&#39;</code>, and other dataValues will be caculated based on the numerical distance to <code class=\"codespan\">visualMax.min</code> and to <code class=\"codespan\">visualMap.max</code>, and mapped onto one of <code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>.</p>\n</li>\n</ul>\n<p>About the possible value range of visual value:</p>\n<ul>\n<li><p><code class=\"codespan\">opacity</code>、<code class=\"codespan\">colorAlpha</code>、<code class=\"codespan\">colorLightness</code>、<code class=\"codespan\">colorSaturation</code>、<code class=\"codespan\">visual value</code></p>\n<p>  possible value range is <code class=\"codespan\">[0, 1]</code>.</p>\n</li>\n<li><p><code class=\"codespan\">colorHue</code>:</p>\n<p>  possible value range is <code class=\"codespan\">[0, 360]</code>.</p>\n</li>\n<li><p><code class=\"codespan\">color</code>:</p>\n<p>  color can use RGB expression, like <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>, or RGBA expression, like <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>, or Hex expression, like &#39;#ccc&#39;.</p>\n</li>\n<li><p><code class=\"codespan\">symbol</code>:</p>\n</li>\n</ul>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p><br></p>\n<hr>\n<p><strong>✦ Table Mapping to visual channel ✦</strong></p>\n<p><code class=\"codespan\">Table Mapping</code> could be used when dataValue (values in series.data, specified by <a href=\"#visualMap.dimension\">visualMap.dimension</a>) is enumerable and we intend to map them to visual value by looking up a given table.</p>\n<p>For instance, in a <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> component, <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is set to <code class=\"codespan\">[&#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. And there is series.data: <code class=\"codespan\">[&#39;Demon Hunter&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. Then we can establish the lookup rule for color: <code class=\"codespan\">color: {&#39;Warden&#39;: &#39;red&#39;, &#39;Demon Hunter&#39;: &#39;black&#39;}</code>, by which the <code class=\"codespan\">visualMap</code> component will map <code class=\"codespan\">dataValue</code> to <code class=\"codespan\">color</code>.</p>\n<p>How to configure <code class=\"codespan\">visualMap</code> component to do <code class=\"codespan\">Table Mapping</code>?</p>\n<p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a>is set.</p>\n<p>About the value of visual channel (visual value):</p>\n<p>Generally <code class=\"codespan\">Object</code> or <code class=\"codespan\">Array</code> is used, for instance:</p>\n<pre><code class=\"lang-javascript\">visualMap: {\n    type: &#39;piecewise&#39;,\n    // categories defines the items that to be displayed in visualMap-piecewise component.\n    categories: [\n        &#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;\n    ],\n    outOfRange: {\n        // visual value can be an Object:\n        color: {\n            &#39;Warden&#39;: &#39;red&#39;,\n            &#39;Demon Hunter&#39;: &#39;black&#39;,\n            &#39;&#39;: &#39;green&#39; // Blank string means that except &#39;Warden&#39; and &#39;Demon Hunter&#39;,\n                        // all other dataValues should be mapped to &#39;green&#39;.\n        }\n        // visual value can also be a single value,\n        // means that all dataValues should be mapped to the value.\n        color: &#39;green&#39;,\n        // visual value can also be a array, with the same length\n        // as the array of categories and one-one mapping onto it.\n        color: [&#39;red&#39;, &#39;black&#39;, &#39;green&#39;, &#39;yellow&#39;, &#39;white&#39;]\n    }\n}\n</code></pre>\n<p><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/scatter-visualMap-categories&amp;edit=1&amp;reset=1\" target=\"_blank\">Example</a></p>\n<hr>\n<p><strong>✦ How to modity configurations of vsiual encoding? ✦</strong></p>\n<p>If you want to modify the configurations of visual encoding after chart been rendered (by invoke <code class=\"codespan\">setOption</code> to set the initial <code class=\"codespan\">option</code>), <code class=\"codespan\">setOption</code> can be used again to modify configurations of visual encoding. For instance:</p>\n<pre><code class=\"lang-javascript\">chart.setOption({\n    visualMap: {\n        inRange: {color: [&#39;red&#39;, &#39;blue&#39;]}\n    }\n});\n</code></pre>\n<p>Notice:</p>\n<ul>\n<li><p>These visualMap properties (i.e. <code class=\"codespan\">inRange</code>, <code class=\"codespan\">outOfRange</code>, <code class=\"codespan\">target</code>, <code class=\"codespan\">controller</code>) do not support &quot;merge&quot;, that is, anyone among them is modified when use <code class=\"codespan\">setOption</code> again, all of the original values of them will not be kept but erased. The &quot;merge&quot; brings complication in implemnentation and understanding, whereas &quot;erase all&quot; normalize the practise: once you want to modify some visual values, you should pass all of them to <code class=\"codespan\">setOption</code>, no matter they are to be changed.</p>\n</li>\n<li><p>This way, <code class=\"codespan\">getOption() -&gt; modify the gotten option -&gt; setOption(modified option)</code>, is strongly <strong>not recommended</strong>, for instance:</p>\n</li>\n</ul>\n<pre><code class=\"lang-javascript\">// Not recommended approach, regardless of its correctness:\n\nvar option = chart.getOption(); // Get the entire option.\noption.visualMap.inRange.color = [&#39;red&#39;, &#39;blue&#39;]; // modify color, which is what you want.\n\n// You have to modify those two properties, otherwise you will not get what you want.\noption.visualMap.target.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\noption.visualMap.controller.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\n\nchart.setOption(option); // set the modified option back.\n// You should not use this approach, but use the\n// approach demostrated before this example.\n</code></pre>\n"}}},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":4},"left":{"type":["string","number"],"description":"<p>Distance between visualMap  component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":0},"top":{"type":["string","number"],"description":"<p>Distance between visualMap  component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"auto"},"right":{"type":["string","number"],"description":"<p>Distance between visualMap  component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n","default":"auto"},"bottom":{"type":["string","number"],"description":"<p>Distance between visualMap  component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n","default":0},"orient":{"type":["string"],"description":"<p>How to layout the visualMap component, <code class=\"codespan\">&#39;horizontal&#39;</code> or <code class=\"codespan\">&#39;vertical&#39;</code>.</p>\n","default":"'vertical'"},"padding":{"type":["number","Array"],"description":"<p>visualMap-continuous space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"backgroundColor":{"type":["Color"],"description":"<p>background color of visualMap component.</p>\n","default":"'rgba(0,0,0,0)'"},"borderColor":{"type":["Color"],"description":"<p>border color of visualMap component.</p>\n","default":"'#ccc'"},"borderWidth":{"type":["number"],"description":"<p>border width of visualMap component, with unit: px.</p>\n","default":0},"color":{"type":["Array"],"description":"<p>This property remains only for compatibility with ECharts2, and is not recommended in ECharts3. It is recommended to configure color in <a href=\"#visualMap-continuous.inRange\">visualMap-continuous.inRange</a>, or <a href=\"#visualMap-continuous.outOfRange\">visualMap-continuous.outOfRange</a> if needed.</p>\n<p>If you persist in using it, the following issue should be noticed: the sequence of dataValues that are mapped to colorValues in property <code class=\"codespan\">color</code> is from <code class=\"codespan\">large</code> to <code class=\"codespan\">small</code>, whereas that in <a href=\"#visualMap-continuous.inRange\">visualMap-continuous.inRange</a> or <a href=\"#visualMap-continuous.outOfRange\">visualMap-continuous.outOfRange</a> is from <code class=\"codespan\">small</code> to <code class=\"codespan\">large</code>.</p>\n","default":"['#bf444c', '#d88273', '#f6efa6']"},"textStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>visualMap  text color.</p>\n","default":"#333"},"fontStyle":{"type":["string"],"description":"<p>visualMap  font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p>visualMap  font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>visualMap  font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>visualMap  font size.</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"formatter":{"type":["string","Function"],"description":"<p>the formatter tool for label.</p>\n<ul>\n<li><p>If it was set as a <code class=\"codespan\">string</code>, it refers to a template, for instance: <code class=\"codespan\">aaaa{value}bbbb</code>, where <code class=\"codespan\">{value}</code> represents the value of the edge of the seleted range.</p>\n</li>\n<li><p>If it was set as a <code class=\"codespan\">Function</code>, it refers to a callback function, for instance:</p>\n</li>\n</ul>\n<pre><code class=\"lang-javascript\">formatter: function (value) {\n    return &#39;aaaa&#39; + value + &#39;bbbb&#39;;\n}\n</code></pre>\n"}}},{"type":["Object"],"description":"<p><strong>Piecewise visualMap component (visualMapPiecewise) </strong></p>\n<p> (Reference to <a href=\"#visualMap\">the introduction of visual Map component (visualMap)</a>)</p>\n<p>Sample:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-visualMap-piecewise&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n\n<p>Piecewise visualMap component works in one of the three modes:</p>\n<ul>\n<li><strong>CONTINUOUS-AVERAGE</strong>: The series.data is continuous and is divided into pieces averagely according to <a href=\"#visualMap-piecewise.splitNumber\">visualMap-piecewise.splitNumber</a>.</li>\n<li><strong>CONTINUOUS-CUSTOMIZED</strong>: The series.data is continuous and is divided into pieces according to the given rule defined in <a href=\"#visualMap-piecewise.pieces\">visualMap-piecewise.pieces</a>.</li>\n<li><strong>CATEGORY</strong>: The series.data is discrete and is categorized according to <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a>.</li>\n</ul>\n<p><br>\n<br></p>\n","properties":{"type":{"type":["string"],"description":"<p>Used to determine it is a piecewise visualMap component.</p>\n","default":"piecewise"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"splitNumber":{"type":["number"],"description":"<p>Continuous data can be divide into pieces averagely according to splitNumber, that is, if splitNumber is 5, data will be sliced into 5 pieces.</p>\n<p>The range of continuous data should be defined by <a href=\"#visualMap-piecewise.max\">max</a> and <a href=\"#visualMap-piecewise.min\">min</a>.</p>\n<p>If <a href=\"#visualMap-piecewise.pieces\">visualMap-piecewise.pieces</a> or <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is set up, the <code class=\"codespan\">splitNumber</code> will not be used any more.</p>\n","default":5},"pieces":{"type":["Array"],"description":"<p>Used to customize how to slice continuous data, and some specific view style for some pieces. For instance:</p>\n<pre><code class=\"lang-javascript\">pieces: [\n    // Range of a piece can be specified by property min and max,\n    // where min will be set as -Infinity if ignored,\n    // and max will be set as Infinity if ignored.\n    {min: 1500},\n    {min: 900, max: 1500},\n    {min: 310, max: 1000},\n    {min: 200, max: 300},\n    // Label of the piece can be specified.\n    {min: 10, max: 200, label: &#39;10 to 200 (custom label) &#39;},\n    // Color of the piece can be specified.\n    {value: 123, label: &#39;123 (custom special color) &#39;, color: &#39;grey&#39;},\n    {max: 5}\n]\n</code></pre>\n<p>These visual channel can be customized in each piece:</p>\n<ul>\n<li><code class=\"codespan\">symbol</code>: Type of symbol.</li>\n<li><code class=\"codespan\">symbolSize</code>: Symbol size.</li>\n<li><code class=\"codespan\">color</code>: Symbol color.</li>\n<li><code class=\"codespan\">colorAlpha</code>: Symbol alpha channel.</li>\n<li><code class=\"codespan\">opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code class=\"codespan\">colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<p><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/map-visualMap-pieces&amp;edit=1&amp;reset=1\" target=\"_blank\">Sample</a></p>\n<p> (Notes: In ECharts2, <code class=\"codespan\">pieces</code> is called <code class=\"codespan\">splitList</code>, which is retained in ECharts3 for compatibility. But <code class=\"codespan\">pieces</code> is recommended.)</p>\n<p>You would realize the sequence in <code class=\"codespan\">pieces</code> by a simple trial. See more detailed rules in <a href=\"#visualMap.inverse\">visualMap.inverse</a>.</p>\n"},"categories":{"type":["Array"],"description":"<p>When dataValues in series.data (specified by <a href=\"#visualMap-piecewise.dimension\">visualMap-piecewise.dimension</a>) are discrete (or also known as category data or enumerable data), and we intend to perform <strong>Table Mapping</strong> from dataValue to visual channels, <code class=\"codespan\">categories</code> is used to describe the entire enumeration of data. For instance:</p>\n<pre><code class=\"lang-javascript\">categories: [\n    &#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;\n],\n</code></pre>\n<p><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/scatter-visualMap-categories&amp;edit=1&amp;reset=1\" target=\"_blank\">Sample</a></p>\n<p>You would realize the sequence in <code class=\"codespan\">categories</code> by a simple trial. See more detailed rules in <a href=\"#visualMap.inverse\">visualMap.inverse</a>.</p>\n"},"min":{"type":["number"],"description":"<p>Specify the min dataValue for the visualMap component. <code class=\"codespan\">[visualMap.min, visualMax.max]</code> make up the domain of viusul mapping.</p>\n<p>In <strong>CONTINUOUS-CUSTOMIZED</strong> mode (i.e., <a href=\"#visualMap-piecewise.pieces\">visualMap-piecewise.pieces</a> is used) or <strong>CATEGORY</strong> mode (i.e., <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is used), <code class=\"codespan\">max</code> and <code class=\"codespan\">min</code> doesn&#39;t need to be specified.</p>\n<p>In <strong>CONTINUOUS-AVERAGE</strong> mode (i.e., <a href=\"#visualMap-piecewise.splitNumber\">visualMap-piecewise.splitNumber</a> is used), they should be specified explicitly, and be <code class=\"codespan\">[0, 200]</code> by default, but not <code class=\"codespan\">dataMin</code> and <code class=\"codespan\">dataMax</code> in series.data.</p>\n"},"max":{"type":["number"],"description":"<p>Specify the max dataValue for the visualMap component. <code class=\"codespan\">[visualMap.min, visualMax.max]</code> make up the domain of viusul mapping.</p>\n<p>In <strong>CONTINUOUS-CUSTOMIZED</strong> mode (i.e., <a href=\"#visualMap-piecewise.pieces\">visualMap-piecewise.pieces</a> is used) or <strong>CATEGORY</strong> mode (i.e., <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is used), <code class=\"codespan\">max</code> and <code class=\"codespan\">min</code> doesn&#39;t need to be specified.</p>\n<p>In <strong>CONTINUOUS-AVERAGE</strong> mode (i.e., <a href=\"#visualMap-piecewise.splitNumber\">visualMap-piecewise.splitNumber</a> is used), they should be specified explicitly, and be <code class=\"codespan\">[0, 200]</code> by default, but not <code class=\"codespan\">dataMin</code> and <code class=\"codespan\">dataMax</code> in series.data.</p>\n"},"minOpen":{"type":["boolean"],"description":"<p>This option works when <code class=\"codespan\">type</code> is <code class=\"codespan\">piecewise</code> and <code class=\"codespan\">min</code>/<code class=\"codespan\">max</code>/<code class=\"codespan\">splitNumber</code> are set.</p>\n<p>If it is set as <code class=\"codespan\">true</code>, an extra piece labeled with &quot;&lt; min&quot; will show.</p>\n"},"maxOpen":{"type":["boolean"],"description":"<p>This option works when <code class=\"codespan\">type</code> is <code class=\"codespan\">piecewise</code> and <code class=\"codespan\">min</code>/<code class=\"codespan\">max</code>/<code class=\"codespan\">splitNumber</code> are set.</p>\n<p>If it is set as <code class=\"codespan\">true</code>, an extra piece labeled with &quot;&gt; max&quot; will show.</p>\n"},"selectedMode":{"type":["string"],"description":"<p>Selected Mode could be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;multiple&#39;</code> (multiple selection).</li>\n<li><code class=\"codespan\">&#39;single&#39;</code> (single selection).</li>\n</ul>\n","default":"'multiple'"},"inverse":{"type":["boolean"],"description":"<p>Whether to inverse the layout of visualMap component.</p>\n<ul>\n<li><p>In <strong>CONTINUOUS-AVERAGE</strong> mode (i.e., <a href=\"#visualMap-piecewise.splitNumber\">visualMap-piecewise.splitNumber</a> is used), the rule of data layout is the same as <a href=\"#visualMap-continuous.inverse\">visualMap-continuous.inverse</a>.</p>\n</li>\n<li><p>In <strong>CONTINUOUS-CUSTOMIZED</strong> mode (i.e., <a href=\"#visualMap-piecewise.pieces\">visualMap-piecewise.pieces</a> is used) or <strong>CATEGORY</strong> mode (i.e., <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is used), the layout of each piece is determined by the their order in the definition of <code class=\"codespan\">pieces</code> or <code class=\"codespan\">categories</code>, namely:</p>\n<ul>\n<li><p>When <code class=\"codespan\">inverse</code> is <code class=\"codespan\">false</code>:</p>\n<ul>\n<li><p>When <a href=\"#visualMap.orient\">visualMap.orient</a> is <code class=\"codespan\">&#39;vertical&#39;</code>, pieces[0] or categories[0] correspond to upward side.</p>\n</li>\n<li><p>When <a href=\"#visualMap.orient\">visualMap.orient</a> is <code class=\"codespan\">&#39;horizontal&#39;</code>, pieces[0] or categories[0] correspond to left side.</p>\n</li>\n</ul>\n</li>\n<li><p>When <code class=\"codespan\">inverse</code> is <code class=\"codespan\">true</code>, the results are opposite to above.</p>\n</li>\n</ul>\n</li>\n</ul>\n<p>If you just have a try, you&#39;ll know it is not so complicated.</p>\n","default":false},"precision":{"type":["number"],"description":"<p>The decimal precision of label, defaults to be 0 (no decimals).</p>\n<ul>\n<li><p>In <strong>CONTINUOUS-AVERAGE</strong> mode (i.e., <a href=\"#visualMap-piecewise.splitNumber\">visualMap-piecewise.splitNumber</a> is used), the rule of data layout is the same as <a href=\"#visualMap-continuous.inverse\">visualMap-continuous.inverse</a>, decimal percision auto adapts to series.data.</p>\n</li>\n<li><p>In <strong>CONTINUOUS-CUSTOMIZED</strong> mode (i.e., <a href=\"#visualMap-piecewise.pieces\">visualMap-piecewise.pieces</a> is used) or <strong>CATEGORY</strong> mode (i.e., <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is used), decimal percision defaults to be 0 (no decimals):</p>\n</li>\n</ul>\n","default":null},"itemWidth":{"type":["number"],"description":"<p>The width of each graphical element that represents a piece.</p>\n","default":20},"itemHeight":{"type":["number"],"description":"<p>The height of each graphical element that represents a piece.</p>\n","default":14},"align":{"type":["string"],"description":"<p>The layout relationship between the graphical elements for pieces and their labels. Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;auto&#39;</code> Decide automatically.</li>\n<li><code class=\"codespan\">&#39;left&#39;</code> The graphical elements for pieces are on the left and their labels are on the right.</li>\n<li><code class=\"codespan\">&#39;right&#39;</code> The graphical elements for pieces are on the right and their labels are on the left.</li>\n</ul>\n","default":"'auto'"},"text":{"type":["Array"],"description":"<p>The label text on both ends, such as <code class=\"codespan\">[&#39;High&#39;, &#39;Low&#39;]</code>. <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/map-visualMap-piecewise-text&amp;edit=1&amp;reset=1\" target=\"_blank\">Sample</a>.</p>\n<p>You can understand the order of items in <code class=\"codespan\">text</code> array just by a simple trial. See <a href=\"#visualMap.inverse\">visualMap.inverse</a>.</p>\n<p>The rule, that labels will not show when <code class=\"codespan\">text</code> is use, is retained for compatibility with ECharts2.</p>\n","default":null},"textGap":{"type":["number"],"description":"<p>The distance between the ends of the graphical elements for pieces and the labels, with unit px. See <a href=\"#visualMap-piecewise.text\">visualMap-piecewise.text</a></p>\n","default":10},"showLabel":{"type":["boolean"],"description":"<p>Whether to show label of each item. By default, label will not be shown when <a href=\"#visualMap-piecewise.text\">visualMap-piecewise.text</a> used, otherwise label will be shown.</p>\n"},"itemGap = 10":{"type":["*"],"description":"<p>Its the distance between each two graphical elements for pieces. The unit is px.</p>\n"},"itemSymbol":{"type":["string"],"description":"<p>Default symbol (the shape of graphical element). Possible values are:</p>\n<p><code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>The setting of visual channel <code class=\"codespan\">symbol</code> can refer to <a href=\"#visualMap-piecewise.inRange\">visualMap-piecewise.inRange</a> and <a href=\"#visualMap-piecewise.outOfRange\">visualMap-piecewise.outOfRange</a>.</p>\n<p>When they are not specified, <code class=\"codespan\">itemSymbol</code> is adopted as the default value (but just used in visualMap component itself, not in chart).</p>\n","default":"'roundRect'"},"show":{"type":["boolean"],"description":"<p>Whether to show visualMap-piecewise component. If set as <code class=\"codespan\">false</code>, visualMap-piecewise component will not show, but it can still perform visual mapping from dataValue to visual channel in chart.</p>\n","default":true},"dimension":{"type":["string"],"description":"<p>Specify which dimension should be used to fetch dataValue from <a href=\"#series.data\">series.data</a>, and then map them to visual channel.</p>\n<p><a href=\"#series.data\">series.data</a> can be regarded as a two-dimensional array, for instance:</p>\n<pre><code class=\"lang-javascript\">[\n    [12, 23, 43],\n    [12, 23, 43],\n    [43, 545, 65],\n    [92, 23, 33]\n]\n</code></pre>\n<p>Each column of the above array is regarded as a <code class=\"codespan\">dimension</code>. For example, when property <code class=\"codespan\">dimension</code> is set to 1, the second column (i.e., 23, 23, 545, 23) is chosen to perform visual mapping.</p>\n<p>Use the last dimension of <code class=\"codespan\">data</code> by default.</p>\n"},"seriesIndex":{"type":["number","Array"],"description":"<p>Specify visual mapping should be performed on which series, from which\n<a href=\"#series.data\">series.data</a> is fetched.</p>\n<p>All series are used by default.</p>\n"},"hoverLink":{"type":["boolean"],"description":"<p><code class=\"codespan\">hoverLink</code> enable highlight certain graphical elements of chart when mouse hovers on some place of <code class=\"codespan\">visualMap</code> component that is coresponding to those graphical elements by visual mapping.</p>\n<p>Inversely, when mouse hovers a graphical element of chart, its value label will be displayed on its corresponding position in <code class=\"codespan\">visualMap</code>.</p>\n","default":true},"inRange":{"type":["Object"],"description":"<p>Define visual channels that will mapped from dataValues that are <strong>in selected range</strong>. (User can interact with visualMap component and make a seleced range by mouse or touch.)</p>\n<p>Possiable visual channels includes:</p>\n<ul>\n<li><code class=\"codespan\">symbol</code>: Type of symbol.</li>\n<li><code class=\"codespan\">symbolSize</code>: Symbol size.</li>\n<li><code class=\"codespan\">color</code>: Symbol color.</li>\n<li><code class=\"codespan\">colorAlpha</code>: Symbol alpha channel.</li>\n<li><code class=\"codespan\">opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code class=\"codespan\">colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<hr>\n<p><code class=\"codespan\">inRange</code> could customize visual channels both in series (by <a href=\"#visualMap-piecewise.seriesIndex\">visualMap-piecewise.seriesIndex</a>) and in <code class=\"codespan\">visualMap-piecewise</code> itself.</p>\n<p>For instance, if a <code class=\"codespan\">visualMap-piecewise</code> component is used on a scatter chart, the mapping approach from data to <code class=\"codespan\">color</code> (or <code class=\"codespan\">symbol</code>, <code class=\"codespan\">size</code>, ...) can be both customized in the scatter chart and <code class=\"codespan\">visualMap-piecewise</code> component itself. See the code as following:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels both in target series and visualMap-piecewise component itself:\n        inRange: {\n            color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n            symbolSize: [30, 100]\n        }\n    }\n]\n</code></pre>\n<p>If you want to define visual channels for target series and visualMap-piecewise component separately, you should do as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels only for target series.\n        target: {\n            inRange: {\n                color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n                symbolSize: [60, 200]\n            }\n        },\n        // Define visual channels only for visualMap-piecewise component.\n        controller: {\n            inRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n</code></pre>\n<p>Or define as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels for both target series and visualMap-piecewise component.\n        inRange: {\n            color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n            symbolSize: [60, 200]\n        },\n        // Define visual channels only for visualMap-piecewise component, which\n        // will overlap the properties with the same name in the above common\n        // definition. (symbolSize is overlapped by [30, 100] while color\n        // keeps the original value)\n        controller: {\n            inRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>✦ About visual channels ✦</strong></p>\n<ul>\n<li><p>Various visual channels (such as <code class=\"codespan\">color</code>、<code class=\"codespan\">symbolSize</code> and ect.) can be defined in inRange at the same time and all of them will be apopted.</p>\n</li>\n<li><p>Basically visual channels <code class=\"codespan\">opacity</code> is recommended, rather than <code class=\"codespan\">colorAlpha</code>. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.</p>\n</li>\n<li><p>There are two approaches of visual mapping supported: &#39;Linear Mapping&#39; and &#39;Table Mapping&#39;.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>✦ Linear Mapping to visual channel ✦</strong></p>\n<p><code class=\"codespan\">Linear Mapping</code> means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of <code class=\"codespan\">[visaulMap.min, visualMap.max]</code> to a given range of <code class=\"codespan\">[visual value 1, visual value 2]</code> and obtaining a final value (say visual value) for visual channel rendering.</p>\n<p>For instance, <code class=\"codespan\">[visualMap.min, visualMap.max]</code> is set to be <code class=\"codespan\">[0, 100]</code>, and there is series.data: <code class=\"codespan\">[50, 10, 100]</code>. We intend to map them to an <code class=\"codespan\">opacity</code> range <code class=\"codespan\">[0.4, 1]</code>, by which the size of value can be demostrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values <code class=\"codespan\">[0.7, 0.44, 1]</code>, cooresponding to each dataValue.</p>\n<p>We can also set the visual range inversely, such as <code class=\"codespan\">opacity: [1, 0.4]</code>, and the final mapping result for the given series.data above will be <code class=\"codespan\">[0.7, 0.96, 0.4]</code>.</p>\n<p>Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by default, but not <code class=\"codespan\">dataMin</code> and <code class=\"codespan\">dataMax</code> in series.data.</p>\n<p>How to configure visualMap component to do Linear Mapping?</p>\n<ul>\n<li><p>When use <a href=\"#visualMap-continuous\">visualMap-continuous</a>, or</p>\n</li>\n<li><p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is not used.</p>\n</li>\n</ul>\n<p>About the value of visual channel (visual value):</p>\n<ul>\n<li><p>Basically <code class=\"codespan\">Array</code> is used to express the range of visual value, e.g., <code class=\"codespan\">color: [&#39;#333&#39;, &#39;#777&#39;]</code>.</p>\n</li>\n<li><p>Single <code class=\"codespan\">number</code> or single <code class=\"codespan\">string</code> can also be used, which will be converted to an <code class=\"codespan\">Array</code> by visualMap component. e.g.:  <code class=\"codespan\">opacity: 0.4</code> will be converted to <code class=\"codespan\">opacity: [0.4, 0.4]</code>, <code class=\"codespan\">color: &#39;#333&#39;</code> will be converted to <code class=\"codespan\">color: [&#39;#333&#39;, &#39;#333&#39;]</code>.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">symbolSize</code>, <code class=\"codespan\">opacity</code>, <code class=\"codespan\">colorAlpha</code>, <code class=\"codespan\">colorLightness</code>, <code class=\"codespan\">colorSaturation</code>, <code class=\"codespan\">colorHue</code>, the range of visual value is always in the form of: <code class=\"codespan\">[visual value of visualMap.min, visual value of visualMap.max]</code>. For example, <code class=\"codespan\">colorLightness: [0.8, 0.2]</code> means that the dataValue in series.data that equals to <code class=\"codespan\">visualMap.min</code> (if any) will be mapped to lightness <code class=\"codespan\">0.8</code>, and the dataValue that equals to <code class=\"codespan\">visualMap.max</code> (if any) will be mapped to lightness <code class=\"codespan\">0.2</code>, and other dataValues will be mapped by the linear calculateion based on the domain of <code class=\"codespan\">[visualMap.min, visualMap.max]</code> and the range of <code class=\"codespan\">[0.8, 0.2]</code>.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">color</code>, array is used, like: <code class=\"codespan\">[&#39;#333&#39;, &#39;#78ab23&#39;, &#39;blue&#39;]</code>, which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to <code class=\"codespan\">visualMap.min</code> will be mapped onto <code class=\"codespan\">&#39;#333&#39;</code>, the dataValue that equals to <code class=\"codespan\">visualMap.max</code> will be mapped onto <code class=\"codespan\">&#39;blue&#39;</code>, and other dataValues will be piecewisely interpolated to get the final color.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">symbol</code>, array is used, like: <code class=\"codespan\">[&#39;circle&#39;, &#39;rect&#39;, &#39;diamond&#39;]</code>, where the dataValue that equals to <code class=\"codespan\">visualMap.min</code> will be mapped onto <code class=\"codespan\">&#39;circle&#39;</code>, the dataValue that equals to <code class=\"codespan\">visualMap.max</code> will be mapped onto <code class=\"codespan\">&#39;diamond&#39;</code>, and other dataValues will be caculated based on the numerical distance to <code class=\"codespan\">visualMax.min</code> and to <code class=\"codespan\">visualMap.max</code>, and mapped onto one of <code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>.</p>\n</li>\n</ul>\n<p>About the possible value range of visual value:</p>\n<ul>\n<li><p><code class=\"codespan\">opacity</code>、<code class=\"codespan\">colorAlpha</code>、<code class=\"codespan\">colorLightness</code>、<code class=\"codespan\">colorSaturation</code>、<code class=\"codespan\">visual value</code></p>\n<p>  possible value range is <code class=\"codespan\">[0, 1]</code>.</p>\n</li>\n<li><p><code class=\"codespan\">colorHue</code>:</p>\n<p>  possible value range is <code class=\"codespan\">[0, 360]</code>.</p>\n</li>\n<li><p><code class=\"codespan\">color</code>:</p>\n<p>  color can use RGB expression, like <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>, or RGBA expression, like <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>, or Hex expression, like &#39;#ccc&#39;.</p>\n</li>\n<li><p><code class=\"codespan\">symbol</code>:</p>\n</li>\n</ul>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p><br></p>\n<hr>\n<p><strong>✦ Table Mapping to visual channel ✦</strong></p>\n<p><code class=\"codespan\">Table Mapping</code> could be used when dataValue (values in series.data, specified by <a href=\"#visualMap.dimension\">visualMap.dimension</a>) is enumerable and we intend to map them to visual value by looking up a given table.</p>\n<p>For instance, in a <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> component, <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is set to <code class=\"codespan\">[&#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. And there is series.data: <code class=\"codespan\">[&#39;Demon Hunter&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. Then we can establish the lookup rule for color: <code class=\"codespan\">color: {&#39;Warden&#39;: &#39;red&#39;, &#39;Demon Hunter&#39;: &#39;black&#39;}</code>, by which the <code class=\"codespan\">visualMap</code> component will map <code class=\"codespan\">dataValue</code> to <code class=\"codespan\">color</code>.</p>\n<p>How to configure <code class=\"codespan\">visualMap</code> component to do <code class=\"codespan\">Table Mapping</code>?</p>\n<p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a>is set.</p>\n<p>About the value of visual channel (visual value):</p>\n<p>Generally <code class=\"codespan\">Object</code> or <code class=\"codespan\">Array</code> is used, for instance:</p>\n<pre><code class=\"lang-javascript\">visualMap: {\n    type: &#39;piecewise&#39;,\n    // categories defines the items that to be displayed in visualMap-piecewise component.\n    categories: [\n        &#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;\n    ],\n    inRange: {\n        // visual value can be an Object:\n        color: {\n            &#39;Warden&#39;: &#39;red&#39;,\n            &#39;Demon Hunter&#39;: &#39;black&#39;,\n            &#39;&#39;: &#39;green&#39; // Blank string means that except &#39;Warden&#39; and &#39;Demon Hunter&#39;,\n                        // all other dataValues should be mapped to &#39;green&#39;.\n        }\n        // visual value can also be a single value,\n        // means that all dataValues should be mapped to the value.\n        color: &#39;green&#39;,\n        // visual value can also be a array, with the same length\n        // as the array of categories and one-one mapping onto it.\n        color: [&#39;red&#39;, &#39;black&#39;, &#39;green&#39;, &#39;yellow&#39;, &#39;white&#39;]\n    }\n}\n</code></pre>\n<p><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/scatter-visualMap-categories&amp;edit=1&amp;reset=1\" target=\"_blank\">Example</a></p>\n<hr>\n<p><strong>✦ How to modity configurations of vsiual encoding? ✦</strong></p>\n<p>If you want to modify the configurations of visual encoding after chart been rendered (by invoke <code class=\"codespan\">setOption</code> to set the initial <code class=\"codespan\">option</code>), <code class=\"codespan\">setOption</code> can be used again to modify configurations of visual encoding. For instance:</p>\n<pre><code class=\"lang-javascript\">chart.setOption({\n    visualMap: {\n        inRange: {color: [&#39;red&#39;, &#39;blue&#39;]}\n    }\n});\n</code></pre>\n<p>Notice:</p>\n<ul>\n<li><p>These visualMap properties (i.e. <code class=\"codespan\">inRange</code>, <code class=\"codespan\">outOfRange</code>, <code class=\"codespan\">target</code>, <code class=\"codespan\">controller</code>) do not support &quot;merge&quot;, that is, anyone among them is modified when use <code class=\"codespan\">setOption</code> again, all of the original values of them will not be kept but erased. The &quot;merge&quot; brings complication in implemnentation and understanding, whereas &quot;erase all&quot; normalize the practise: once you want to modify some visual values, you should pass all of them to <code class=\"codespan\">setOption</code>, no matter they are to be changed.</p>\n</li>\n<li><p>This way, <code class=\"codespan\">getOption() -&gt; modify the gotten option -&gt; setOption(modified option)</code>, is strongly <strong>not recommended</strong>, for instance:</p>\n</li>\n</ul>\n<pre><code class=\"lang-javascript\">// Not recommended approach, regardless of its correctness:\n\nvar option = chart.getOption(); // Get the entire option.\noption.visualMap.inRange.color = [&#39;red&#39;, &#39;blue&#39;]; // modify color, which is what you want.\n\n// You have to modify those two properties, otherwise you will not get what you want.\noption.visualMap.target.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\noption.visualMap.controller.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\n\nchart.setOption(option); // set the modified option back.\n// You should not use this approach, but use the\n// approach demostrated before this example.\n</code></pre>\n<p><strong>Notice:</strong> There is default color <code class=\"codespan\">[&#39;#f6efa6&#39;, &#39;#d88273&#39;, &#39;#bf444c&#39;]</code> in <code class=\"codespan\">inRange</code> if you not set <code class=\"codespan\">inRange</code>. If you dont want it, set <code class=\"codespan\">inRange: {color: null}</code> to disable it.</p>\n"},"outOfRange":{"type":["Object"],"description":"<p>Define visual channels that will mapped from dataValues that are <strong>out of selected range</strong>. (User can interact with visualMap component and make a seleced range by mouse or touch.)</p>\n<p>Possiable visual channels includes:</p>\n<ul>\n<li><code class=\"codespan\">symbol</code>: Type of symbol.</li>\n<li><code class=\"codespan\">symbolSize</code>: Symbol size.</li>\n<li><code class=\"codespan\">color</code>: Symbol color.</li>\n<li><code class=\"codespan\">colorAlpha</code>: Symbol alpha channel.</li>\n<li><code class=\"codespan\">opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code class=\"codespan\">colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<p><code class=\"codespan\">outOfRange</code> could customize visual channels both in series (by <a href=\"#visualMap-piecewise.seriesIndex\">visualMap-piecewise.seriesIndex</a>) and in <code class=\"codespan\">visualMap-piecewise</code> itself.</p>\n<p>For instance, if a <code class=\"codespan\">visualMap-piecewise</code> component is used on a scatter chart, the mapping approach from data to <code class=\"codespan\">color</code> (or <code class=\"codespan\">symbol</code>, <code class=\"codespan\">size</code>, ...) can be both customized in the scatter chart and <code class=\"codespan\">visualMap-piecewise</code> component itself. See the code as following:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels both in target series and visualMap-piecewise component itself:\n        outOfRange: {\n            color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n            symbolSize: [30, 100]\n        }\n    }\n]\n</code></pre>\n<p>If you want to define visual channels for target series and visualMap-piecewise component separately, you should do as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels only for target series.\n        target: {\n            outOfRange: {\n                color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n                symbolSize: [60, 200]\n            }\n        },\n        // Define visual channels only for visualMap-piecewise component.\n        controller: {\n            outOfRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n</code></pre>\n<p>Or define as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels for both target series and visualMap-piecewise component.\n        outOfRange: {\n            color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n            symbolSize: [60, 200]\n        },\n        // Define visual channels only for visualMap-piecewise component, which\n        // will overlap the properties with the same name in the above common\n        // definition. (symbolSize is overlapped by [30, 100] while color\n        // keeps the original value)\n        controller: {\n            outOfRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>✦ About visual channels ✦</strong></p>\n<ul>\n<li><p>Various visual channels (such as <code class=\"codespan\">color</code>、<code class=\"codespan\">symbolSize</code> and ect.) can be defined in outOfRange at the same time and all of them will be apopted.</p>\n</li>\n<li><p>Basically visual channels <code class=\"codespan\">opacity</code> is recommended, rather than <code class=\"codespan\">colorAlpha</code>. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.</p>\n</li>\n<li><p>There are two approaches of visual mapping supported: &#39;Linear Mapping&#39; and &#39;Table Mapping&#39;.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>✦ Linear Mapping to visual channel ✦</strong></p>\n<p><code class=\"codespan\">Linear Mapping</code> means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of <code class=\"codespan\">[visaulMap.min, visualMap.max]</code> to a given range of <code class=\"codespan\">[visual value 1, visual value 2]</code> and obtaining a final value (say visual value) for visual channel rendering.</p>\n<p>For instance, <code class=\"codespan\">[visualMap.min, visualMap.max]</code> is set to be <code class=\"codespan\">[0, 100]</code>, and there is series.data: <code class=\"codespan\">[50, 10, 100]</code>. We intend to map them to an <code class=\"codespan\">opacity</code> range <code class=\"codespan\">[0.4, 1]</code>, by which the size of value can be demostrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values <code class=\"codespan\">[0.7, 0.44, 1]</code>, cooresponding to each dataValue.</p>\n<p>We can also set the visual range inversely, such as <code class=\"codespan\">opacity: [1, 0.4]</code>, and the final mapping result for the given series.data above will be <code class=\"codespan\">[0.7, 0.96, 0.4]</code>.</p>\n<p>Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by default, but not <code class=\"codespan\">dataMin</code> and <code class=\"codespan\">dataMax</code> in series.data.</p>\n<p>How to configure visualMap component to do Linear Mapping?</p>\n<ul>\n<li><p>When use <a href=\"#visualMap-continuous\">visualMap-continuous</a>, or</p>\n</li>\n<li><p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is not used.</p>\n</li>\n</ul>\n<p>About the value of visual channel (visual value):</p>\n<ul>\n<li><p>Basically <code class=\"codespan\">Array</code> is used to express the range of visual value, e.g., <code class=\"codespan\">color: [&#39;#333&#39;, &#39;#777&#39;]</code>.</p>\n</li>\n<li><p>Single <code class=\"codespan\">number</code> or single <code class=\"codespan\">string</code> can also be used, which will be converted to an <code class=\"codespan\">Array</code> by visualMap component. e.g.:  <code class=\"codespan\">opacity: 0.4</code> will be converted to <code class=\"codespan\">opacity: [0.4, 0.4]</code>, <code class=\"codespan\">color: &#39;#333&#39;</code> will be converted to <code class=\"codespan\">color: [&#39;#333&#39;, &#39;#333&#39;]</code>.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">symbolSize</code>, <code class=\"codespan\">opacity</code>, <code class=\"codespan\">colorAlpha</code>, <code class=\"codespan\">colorLightness</code>, <code class=\"codespan\">colorSaturation</code>, <code class=\"codespan\">colorHue</code>, the range of visual value is always in the form of: <code class=\"codespan\">[visual value of visualMap.min, visual value of visualMap.max]</code>. For example, <code class=\"codespan\">colorLightness: [0.8, 0.2]</code> means that the dataValue in series.data that equals to <code class=\"codespan\">visualMap.min</code> (if any) will be mapped to lightness <code class=\"codespan\">0.8</code>, and the dataValue that equals to <code class=\"codespan\">visualMap.max</code> (if any) will be mapped to lightness <code class=\"codespan\">0.2</code>, and other dataValues will be mapped by the linear calculateion based on the domain of <code class=\"codespan\">[visualMap.min, visualMap.max]</code> and the range of <code class=\"codespan\">[0.8, 0.2]</code>.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">color</code>, array is used, like: <code class=\"codespan\">[&#39;#333&#39;, &#39;#78ab23&#39;, &#39;blue&#39;]</code>, which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to <code class=\"codespan\">visualMap.min</code> will be mapped onto <code class=\"codespan\">&#39;#333&#39;</code>, the dataValue that equals to <code class=\"codespan\">visualMap.max</code> will be mapped onto <code class=\"codespan\">&#39;blue&#39;</code>, and other dataValues will be piecewisely interpolated to get the final color.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">symbol</code>, array is used, like: <code class=\"codespan\">[&#39;circle&#39;, &#39;rect&#39;, &#39;diamond&#39;]</code>, where the dataValue that equals to <code class=\"codespan\">visualMap.min</code> will be mapped onto <code class=\"codespan\">&#39;circle&#39;</code>, the dataValue that equals to <code class=\"codespan\">visualMap.max</code> will be mapped onto <code class=\"codespan\">&#39;diamond&#39;</code>, and other dataValues will be caculated based on the numerical distance to <code class=\"codespan\">visualMax.min</code> and to <code class=\"codespan\">visualMap.max</code>, and mapped onto one of <code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>.</p>\n</li>\n</ul>\n<p>About the possible value range of visual value:</p>\n<ul>\n<li><p><code class=\"codespan\">opacity</code>、<code class=\"codespan\">colorAlpha</code>、<code class=\"codespan\">colorLightness</code>、<code class=\"codespan\">colorSaturation</code>、<code class=\"codespan\">visual value</code></p>\n<p>  possible value range is <code class=\"codespan\">[0, 1]</code>.</p>\n</li>\n<li><p><code class=\"codespan\">colorHue</code>:</p>\n<p>  possible value range is <code class=\"codespan\">[0, 360]</code>.</p>\n</li>\n<li><p><code class=\"codespan\">color</code>:</p>\n<p>  color can use RGB expression, like <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>, or RGBA expression, like <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>, or Hex expression, like &#39;#ccc&#39;.</p>\n</li>\n<li><p><code class=\"codespan\">symbol</code>:</p>\n</li>\n</ul>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p><br></p>\n<hr>\n<p><strong>✦ Table Mapping to visual channel ✦</strong></p>\n<p><code class=\"codespan\">Table Mapping</code> could be used when dataValue (values in series.data, specified by <a href=\"#visualMap.dimension\">visualMap.dimension</a>) is enumerable and we intend to map them to visual value by looking up a given table.</p>\n<p>For instance, in a <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> component, <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is set to <code class=\"codespan\">[&#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. And there is series.data: <code class=\"codespan\">[&#39;Demon Hunter&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. Then we can establish the lookup rule for color: <code class=\"codespan\">color: {&#39;Warden&#39;: &#39;red&#39;, &#39;Demon Hunter&#39;: &#39;black&#39;}</code>, by which the <code class=\"codespan\">visualMap</code> component will map <code class=\"codespan\">dataValue</code> to <code class=\"codespan\">color</code>.</p>\n<p>How to configure <code class=\"codespan\">visualMap</code> component to do <code class=\"codespan\">Table Mapping</code>?</p>\n<p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a>is set.</p>\n<p>About the value of visual channel (visual value):</p>\n<p>Generally <code class=\"codespan\">Object</code> or <code class=\"codespan\">Array</code> is used, for instance:</p>\n<pre><code class=\"lang-javascript\">visualMap: {\n    type: &#39;piecewise&#39;,\n    // categories defines the items that to be displayed in visualMap-piecewise component.\n    categories: [\n        &#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;\n    ],\n    outOfRange: {\n        // visual value can be an Object:\n        color: {\n            &#39;Warden&#39;: &#39;red&#39;,\n            &#39;Demon Hunter&#39;: &#39;black&#39;,\n            &#39;&#39;: &#39;green&#39; // Blank string means that except &#39;Warden&#39; and &#39;Demon Hunter&#39;,\n                        // all other dataValues should be mapped to &#39;green&#39;.\n        }\n        // visual value can also be a single value,\n        // means that all dataValues should be mapped to the value.\n        color: &#39;green&#39;,\n        // visual value can also be a array, with the same length\n        // as the array of categories and one-one mapping onto it.\n        color: [&#39;red&#39;, &#39;black&#39;, &#39;green&#39;, &#39;yellow&#39;, &#39;white&#39;]\n    }\n}\n</code></pre>\n<p><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/scatter-visualMap-categories&amp;edit=1&amp;reset=1\" target=\"_blank\">Example</a></p>\n<hr>\n<p><strong>✦ How to modity configurations of vsiual encoding? ✦</strong></p>\n<p>If you want to modify the configurations of visual encoding after chart been rendered (by invoke <code class=\"codespan\">setOption</code> to set the initial <code class=\"codespan\">option</code>), <code class=\"codespan\">setOption</code> can be used again to modify configurations of visual encoding. For instance:</p>\n<pre><code class=\"lang-javascript\">chart.setOption({\n    visualMap: {\n        inRange: {color: [&#39;red&#39;, &#39;blue&#39;]}\n    }\n});\n</code></pre>\n<p>Notice:</p>\n<ul>\n<li><p>These visualMap properties (i.e. <code class=\"codespan\">inRange</code>, <code class=\"codespan\">outOfRange</code>, <code class=\"codespan\">target</code>, <code class=\"codespan\">controller</code>) do not support &quot;merge&quot;, that is, anyone among them is modified when use <code class=\"codespan\">setOption</code> again, all of the original values of them will not be kept but erased. The &quot;merge&quot; brings complication in implemnentation and understanding, whereas &quot;erase all&quot; normalize the practise: once you want to modify some visual values, you should pass all of them to <code class=\"codespan\">setOption</code>, no matter they are to be changed.</p>\n</li>\n<li><p>This way, <code class=\"codespan\">getOption() -&gt; modify the gotten option -&gt; setOption(modified option)</code>, is strongly <strong>not recommended</strong>, for instance:</p>\n</li>\n</ul>\n<pre><code class=\"lang-javascript\">// Not recommended approach, regardless of its correctness:\n\nvar option = chart.getOption(); // Get the entire option.\noption.visualMap.inRange.color = [&#39;red&#39;, &#39;blue&#39;]; // modify color, which is what you want.\n\n// You have to modify those two properties, otherwise you will not get what you want.\noption.visualMap.target.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\noption.visualMap.controller.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\n\nchart.setOption(option); // set the modified option back.\n// You should not use this approach, but use the\n// approach demostrated before this example.\n</code></pre>\n"},"controller":{"type":["Object"],"description":"<p>Property <code class=\"codespan\">inRange</code> and <code class=\"codespan\">outOfRange</code> can be set within property <code class=\"codespan\">controller</code>, which means those <code class=\"codespan\">inRange</code> and <code class=\"codespan\">outOfRange</code> are only used on the controller (<code class=\"codespan\">visualMap</code> component itself), but are not used on chart (series). This property is useful in some scenarios when the view of controller needs to be customized in detail.</p>\n","properties":{"inRange":{"type":["Object"],"description":"<p>Define visual channels that will mapped from dataValues that are <strong>in selected range</strong>. (User can interact with visualMap component and make a seleced range by mouse or touch.)</p>\n<p>Possiable visual channels includes:</p>\n<ul>\n<li><code class=\"codespan\">symbol</code>: Type of symbol.</li>\n<li><code class=\"codespan\">symbolSize</code>: Symbol size.</li>\n<li><code class=\"codespan\">color</code>: Symbol color.</li>\n<li><code class=\"codespan\">colorAlpha</code>: Symbol alpha channel.</li>\n<li><code class=\"codespan\">opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code class=\"codespan\">colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<hr>\n<p><code class=\"codespan\">inRange</code> could customize visual channels both in series (by <a href=\"#visualMap-piecewise.seriesIndex\">visualMap-piecewise.seriesIndex</a>) and in <code class=\"codespan\">visualMap-piecewise</code> itself.</p>\n<p>For instance, if a <code class=\"codespan\">visualMap-piecewise</code> component is used on a scatter chart, the mapping approach from data to <code class=\"codespan\">color</code> (or <code class=\"codespan\">symbol</code>, <code class=\"codespan\">size</code>, ...) can be both customized in the scatter chart and <code class=\"codespan\">visualMap-piecewise</code> component itself. See the code as following:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels both in target series and visualMap-piecewise component itself:\n        inRange: {\n            color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n            symbolSize: [30, 100]\n        }\n    }\n]\n</code></pre>\n<p>If you want to define visual channels for target series and visualMap-piecewise component separately, you should do as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels only for target series.\n        target: {\n            inRange: {\n                color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n                symbolSize: [60, 200]\n            }\n        },\n        // Define visual channels only for visualMap-piecewise component.\n        controller: {\n            inRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n</code></pre>\n<p>Or define as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels for both target series and visualMap-piecewise component.\n        inRange: {\n            color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n            symbolSize: [60, 200]\n        },\n        // Define visual channels only for visualMap-piecewise component, which\n        // will overlap the properties with the same name in the above common\n        // definition. (symbolSize is overlapped by [30, 100] while color\n        // keeps the original value)\n        controller: {\n            inRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>✦ About visual channels ✦</strong></p>\n<ul>\n<li><p>Various visual channels (such as <code class=\"codespan\">color</code>、<code class=\"codespan\">symbolSize</code> and ect.) can be defined in inRange at the same time and all of them will be apopted.</p>\n</li>\n<li><p>Basically visual channels <code class=\"codespan\">opacity</code> is recommended, rather than <code class=\"codespan\">colorAlpha</code>. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.</p>\n</li>\n<li><p>There are two approaches of visual mapping supported: &#39;Linear Mapping&#39; and &#39;Table Mapping&#39;.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>✦ Linear Mapping to visual channel ✦</strong></p>\n<p><code class=\"codespan\">Linear Mapping</code> means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of <code class=\"codespan\">[visaulMap.min, visualMap.max]</code> to a given range of <code class=\"codespan\">[visual value 1, visual value 2]</code> and obtaining a final value (say visual value) for visual channel rendering.</p>\n<p>For instance, <code class=\"codespan\">[visualMap.min, visualMap.max]</code> is set to be <code class=\"codespan\">[0, 100]</code>, and there is series.data: <code class=\"codespan\">[50, 10, 100]</code>. We intend to map them to an <code class=\"codespan\">opacity</code> range <code class=\"codespan\">[0.4, 1]</code>, by which the size of value can be demostrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values <code class=\"codespan\">[0.7, 0.44, 1]</code>, cooresponding to each dataValue.</p>\n<p>We can also set the visual range inversely, such as <code class=\"codespan\">opacity: [1, 0.4]</code>, and the final mapping result for the given series.data above will be <code class=\"codespan\">[0.7, 0.96, 0.4]</code>.</p>\n<p>Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by default, but not <code class=\"codespan\">dataMin</code> and <code class=\"codespan\">dataMax</code> in series.data.</p>\n<p>How to configure visualMap component to do Linear Mapping?</p>\n<ul>\n<li><p>When use <a href=\"#visualMap-continuous\">visualMap-continuous</a>, or</p>\n</li>\n<li><p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is not used.</p>\n</li>\n</ul>\n<p>About the value of visual channel (visual value):</p>\n<ul>\n<li><p>Basically <code class=\"codespan\">Array</code> is used to express the range of visual value, e.g., <code class=\"codespan\">color: [&#39;#333&#39;, &#39;#777&#39;]</code>.</p>\n</li>\n<li><p>Single <code class=\"codespan\">number</code> or single <code class=\"codespan\">string</code> can also be used, which will be converted to an <code class=\"codespan\">Array</code> by visualMap component. e.g.:  <code class=\"codespan\">opacity: 0.4</code> will be converted to <code class=\"codespan\">opacity: [0.4, 0.4]</code>, <code class=\"codespan\">color: &#39;#333&#39;</code> will be converted to <code class=\"codespan\">color: [&#39;#333&#39;, &#39;#333&#39;]</code>.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">symbolSize</code>, <code class=\"codespan\">opacity</code>, <code class=\"codespan\">colorAlpha</code>, <code class=\"codespan\">colorLightness</code>, <code class=\"codespan\">colorSaturation</code>, <code class=\"codespan\">colorHue</code>, the range of visual value is always in the form of: <code class=\"codespan\">[visual value of visualMap.min, visual value of visualMap.max]</code>. For example, <code class=\"codespan\">colorLightness: [0.8, 0.2]</code> means that the dataValue in series.data that equals to <code class=\"codespan\">visualMap.min</code> (if any) will be mapped to lightness <code class=\"codespan\">0.8</code>, and the dataValue that equals to <code class=\"codespan\">visualMap.max</code> (if any) will be mapped to lightness <code class=\"codespan\">0.2</code>, and other dataValues will be mapped by the linear calculateion based on the domain of <code class=\"codespan\">[visualMap.min, visualMap.max]</code> and the range of <code class=\"codespan\">[0.8, 0.2]</code>.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">color</code>, array is used, like: <code class=\"codespan\">[&#39;#333&#39;, &#39;#78ab23&#39;, &#39;blue&#39;]</code>, which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to <code class=\"codespan\">visualMap.min</code> will be mapped onto <code class=\"codespan\">&#39;#333&#39;</code>, the dataValue that equals to <code class=\"codespan\">visualMap.max</code> will be mapped onto <code class=\"codespan\">&#39;blue&#39;</code>, and other dataValues will be piecewisely interpolated to get the final color.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">symbol</code>, array is used, like: <code class=\"codespan\">[&#39;circle&#39;, &#39;rect&#39;, &#39;diamond&#39;]</code>, where the dataValue that equals to <code class=\"codespan\">visualMap.min</code> will be mapped onto <code class=\"codespan\">&#39;circle&#39;</code>, the dataValue that equals to <code class=\"codespan\">visualMap.max</code> will be mapped onto <code class=\"codespan\">&#39;diamond&#39;</code>, and other dataValues will be caculated based on the numerical distance to <code class=\"codespan\">visualMax.min</code> and to <code class=\"codespan\">visualMap.max</code>, and mapped onto one of <code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>.</p>\n</li>\n</ul>\n<p>About the possible value range of visual value:</p>\n<ul>\n<li><p><code class=\"codespan\">opacity</code>、<code class=\"codespan\">colorAlpha</code>、<code class=\"codespan\">colorLightness</code>、<code class=\"codespan\">colorSaturation</code>、<code class=\"codespan\">visual value</code></p>\n<p>  possible value range is <code class=\"codespan\">[0, 1]</code>.</p>\n</li>\n<li><p><code class=\"codespan\">colorHue</code>:</p>\n<p>  possible value range is <code class=\"codespan\">[0, 360]</code>.</p>\n</li>\n<li><p><code class=\"codespan\">color</code>:</p>\n<p>  color can use RGB expression, like <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>, or RGBA expression, like <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>, or Hex expression, like &#39;#ccc&#39;.</p>\n</li>\n<li><p><code class=\"codespan\">symbol</code>:</p>\n</li>\n</ul>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p><br></p>\n<hr>\n<p><strong>✦ Table Mapping to visual channel ✦</strong></p>\n<p><code class=\"codespan\">Table Mapping</code> could be used when dataValue (values in series.data, specified by <a href=\"#visualMap.dimension\">visualMap.dimension</a>) is enumerable and we intend to map them to visual value by looking up a given table.</p>\n<p>For instance, in a <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> component, <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is set to <code class=\"codespan\">[&#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. And there is series.data: <code class=\"codespan\">[&#39;Demon Hunter&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. Then we can establish the lookup rule for color: <code class=\"codespan\">color: {&#39;Warden&#39;: &#39;red&#39;, &#39;Demon Hunter&#39;: &#39;black&#39;}</code>, by which the <code class=\"codespan\">visualMap</code> component will map <code class=\"codespan\">dataValue</code> to <code class=\"codespan\">color</code>.</p>\n<p>How to configure <code class=\"codespan\">visualMap</code> component to do <code class=\"codespan\">Table Mapping</code>?</p>\n<p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a>is set.</p>\n<p>About the value of visual channel (visual value):</p>\n<p>Generally <code class=\"codespan\">Object</code> or <code class=\"codespan\">Array</code> is used, for instance:</p>\n<pre><code class=\"lang-javascript\">visualMap: {\n    type: &#39;piecewise&#39;,\n    // categories defines the items that to be displayed in visualMap-piecewise component.\n    categories: [\n        &#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;\n    ],\n    inRange: {\n        // visual value can be an Object:\n        color: {\n            &#39;Warden&#39;: &#39;red&#39;,\n            &#39;Demon Hunter&#39;: &#39;black&#39;,\n            &#39;&#39;: &#39;green&#39; // Blank string means that except &#39;Warden&#39; and &#39;Demon Hunter&#39;,\n                        // all other dataValues should be mapped to &#39;green&#39;.\n        }\n        // visual value can also be a single value,\n        // means that all dataValues should be mapped to the value.\n        color: &#39;green&#39;,\n        // visual value can also be a array, with the same length\n        // as the array of categories and one-one mapping onto it.\n        color: [&#39;red&#39;, &#39;black&#39;, &#39;green&#39;, &#39;yellow&#39;, &#39;white&#39;]\n    }\n}\n</code></pre>\n<p><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/scatter-visualMap-categories&amp;edit=1&amp;reset=1\" target=\"_blank\">Example</a></p>\n<hr>\n<p><strong>✦ How to modity configurations of vsiual encoding? ✦</strong></p>\n<p>If you want to modify the configurations of visual encoding after chart been rendered (by invoke <code class=\"codespan\">setOption</code> to set the initial <code class=\"codespan\">option</code>), <code class=\"codespan\">setOption</code> can be used again to modify configurations of visual encoding. For instance:</p>\n<pre><code class=\"lang-javascript\">chart.setOption({\n    visualMap: {\n        inRange: {color: [&#39;red&#39;, &#39;blue&#39;]}\n    }\n});\n</code></pre>\n<p>Notice:</p>\n<ul>\n<li><p>These visualMap properties (i.e. <code class=\"codespan\">inRange</code>, <code class=\"codespan\">outOfRange</code>, <code class=\"codespan\">target</code>, <code class=\"codespan\">controller</code>) do not support &quot;merge&quot;, that is, anyone among them is modified when use <code class=\"codespan\">setOption</code> again, all of the original values of them will not be kept but erased. The &quot;merge&quot; brings complication in implemnentation and understanding, whereas &quot;erase all&quot; normalize the practise: once you want to modify some visual values, you should pass all of them to <code class=\"codespan\">setOption</code>, no matter they are to be changed.</p>\n</li>\n<li><p>This way, <code class=\"codespan\">getOption() -&gt; modify the gotten option -&gt; setOption(modified option)</code>, is strongly <strong>not recommended</strong>, for instance:</p>\n</li>\n</ul>\n<pre><code class=\"lang-javascript\">// Not recommended approach, regardless of its correctness:\n\nvar option = chart.getOption(); // Get the entire option.\noption.visualMap.inRange.color = [&#39;red&#39;, &#39;blue&#39;]; // modify color, which is what you want.\n\n// You have to modify those two properties, otherwise you will not get what you want.\noption.visualMap.target.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\noption.visualMap.controller.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\n\nchart.setOption(option); // set the modified option back.\n// You should not use this approach, but use the\n// approach demostrated before this example.\n</code></pre>\n<p><strong>Notice:</strong> There is default color <code class=\"codespan\">[&#39;#f6efa6&#39;, &#39;#d88273&#39;, &#39;#bf444c&#39;]</code> in <code class=\"codespan\">inRange</code> if you not set <code class=\"codespan\">inRange</code>. If you dont want it, set <code class=\"codespan\">inRange: {color: null}</code> to disable it.</p>\n"},"outOfRange":{"type":["Object"],"description":"<p>Define visual channels that will mapped from dataValues that are <strong>out of selected range</strong>. (User can interact with visualMap component and make a seleced range by mouse or touch.)</p>\n<p>Possiable visual channels includes:</p>\n<ul>\n<li><code class=\"codespan\">symbol</code>: Type of symbol.</li>\n<li><code class=\"codespan\">symbolSize</code>: Symbol size.</li>\n<li><code class=\"codespan\">color</code>: Symbol color.</li>\n<li><code class=\"codespan\">colorAlpha</code>: Symbol alpha channel.</li>\n<li><code class=\"codespan\">opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code class=\"codespan\">colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<p><code class=\"codespan\">outOfRange</code> could customize visual channels both in series (by <a href=\"#visualMap-piecewise.seriesIndex\">visualMap-piecewise.seriesIndex</a>) and in <code class=\"codespan\">visualMap-piecewise</code> itself.</p>\n<p>For instance, if a <code class=\"codespan\">visualMap-piecewise</code> component is used on a scatter chart, the mapping approach from data to <code class=\"codespan\">color</code> (or <code class=\"codespan\">symbol</code>, <code class=\"codespan\">size</code>, ...) can be both customized in the scatter chart and <code class=\"codespan\">visualMap-piecewise</code> component itself. See the code as following:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels both in target series and visualMap-piecewise component itself:\n        outOfRange: {\n            color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n            symbolSize: [30, 100]\n        }\n    }\n]\n</code></pre>\n<p>If you want to define visual channels for target series and visualMap-piecewise component separately, you should do as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels only for target series.\n        target: {\n            outOfRange: {\n                color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n                symbolSize: [60, 200]\n            }\n        },\n        // Define visual channels only for visualMap-piecewise component.\n        controller: {\n            outOfRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n</code></pre>\n<p>Or define as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n    {\n        ...,\n        // Define visual channels for both target series and visualMap-piecewise component.\n        outOfRange: {\n            color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n            symbolSize: [60, 200]\n        },\n        // Define visual channels only for visualMap-piecewise component, which\n        // will overlap the properties with the same name in the above common\n        // definition. (symbolSize is overlapped by [30, 100] while color\n        // keeps the original value)\n        controller: {\n            outOfRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>✦ About visual channels ✦</strong></p>\n<ul>\n<li><p>Various visual channels (such as <code class=\"codespan\">color</code>、<code class=\"codespan\">symbolSize</code> and ect.) can be defined in outOfRange at the same time and all of them will be apopted.</p>\n</li>\n<li><p>Basically visual channels <code class=\"codespan\">opacity</code> is recommended, rather than <code class=\"codespan\">colorAlpha</code>. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.</p>\n</li>\n<li><p>There are two approaches of visual mapping supported: &#39;Linear Mapping&#39; and &#39;Table Mapping&#39;.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>✦ Linear Mapping to visual channel ✦</strong></p>\n<p><code class=\"codespan\">Linear Mapping</code> means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of <code class=\"codespan\">[visaulMap.min, visualMap.max]</code> to a given range of <code class=\"codespan\">[visual value 1, visual value 2]</code> and obtaining a final value (say visual value) for visual channel rendering.</p>\n<p>For instance, <code class=\"codespan\">[visualMap.min, visualMap.max]</code> is set to be <code class=\"codespan\">[0, 100]</code>, and there is series.data: <code class=\"codespan\">[50, 10, 100]</code>. We intend to map them to an <code class=\"codespan\">opacity</code> range <code class=\"codespan\">[0.4, 1]</code>, by which the size of value can be demostrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values <code class=\"codespan\">[0.7, 0.44, 1]</code>, cooresponding to each dataValue.</p>\n<p>We can also set the visual range inversely, such as <code class=\"codespan\">opacity: [1, 0.4]</code>, and the final mapping result for the given series.data above will be <code class=\"codespan\">[0.7, 0.96, 0.4]</code>.</p>\n<p>Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by default, but not <code class=\"codespan\">dataMin</code> and <code class=\"codespan\">dataMax</code> in series.data.</p>\n<p>How to configure visualMap component to do Linear Mapping?</p>\n<ul>\n<li><p>When use <a href=\"#visualMap-continuous\">visualMap-continuous</a>, or</p>\n</li>\n<li><p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is not used.</p>\n</li>\n</ul>\n<p>About the value of visual channel (visual value):</p>\n<ul>\n<li><p>Basically <code class=\"codespan\">Array</code> is used to express the range of visual value, e.g., <code class=\"codespan\">color: [&#39;#333&#39;, &#39;#777&#39;]</code>.</p>\n</li>\n<li><p>Single <code class=\"codespan\">number</code> or single <code class=\"codespan\">string</code> can also be used, which will be converted to an <code class=\"codespan\">Array</code> by visualMap component. e.g.:  <code class=\"codespan\">opacity: 0.4</code> will be converted to <code class=\"codespan\">opacity: [0.4, 0.4]</code>, <code class=\"codespan\">color: &#39;#333&#39;</code> will be converted to <code class=\"codespan\">color: [&#39;#333&#39;, &#39;#333&#39;]</code>.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">symbolSize</code>, <code class=\"codespan\">opacity</code>, <code class=\"codespan\">colorAlpha</code>, <code class=\"codespan\">colorLightness</code>, <code class=\"codespan\">colorSaturation</code>, <code class=\"codespan\">colorHue</code>, the range of visual value is always in the form of: <code class=\"codespan\">[visual value of visualMap.min, visual value of visualMap.max]</code>. For example, <code class=\"codespan\">colorLightness: [0.8, 0.2]</code> means that the dataValue in series.data that equals to <code class=\"codespan\">visualMap.min</code> (if any) will be mapped to lightness <code class=\"codespan\">0.8</code>, and the dataValue that equals to <code class=\"codespan\">visualMap.max</code> (if any) will be mapped to lightness <code class=\"codespan\">0.2</code>, and other dataValues will be mapped by the linear calculateion based on the domain of <code class=\"codespan\">[visualMap.min, visualMap.max]</code> and the range of <code class=\"codespan\">[0.8, 0.2]</code>.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">color</code>, array is used, like: <code class=\"codespan\">[&#39;#333&#39;, &#39;#78ab23&#39;, &#39;blue&#39;]</code>, which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to <code class=\"codespan\">visualMap.min</code> will be mapped onto <code class=\"codespan\">&#39;#333&#39;</code>, the dataValue that equals to <code class=\"codespan\">visualMap.max</code> will be mapped onto <code class=\"codespan\">&#39;blue&#39;</code>, and other dataValues will be piecewisely interpolated to get the final color.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">symbol</code>, array is used, like: <code class=\"codespan\">[&#39;circle&#39;, &#39;rect&#39;, &#39;diamond&#39;]</code>, where the dataValue that equals to <code class=\"codespan\">visualMap.min</code> will be mapped onto <code class=\"codespan\">&#39;circle&#39;</code>, the dataValue that equals to <code class=\"codespan\">visualMap.max</code> will be mapped onto <code class=\"codespan\">&#39;diamond&#39;</code>, and other dataValues will be caculated based on the numerical distance to <code class=\"codespan\">visualMax.min</code> and to <code class=\"codespan\">visualMap.max</code>, and mapped onto one of <code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>.</p>\n</li>\n</ul>\n<p>About the possible value range of visual value:</p>\n<ul>\n<li><p><code class=\"codespan\">opacity</code>、<code class=\"codespan\">colorAlpha</code>、<code class=\"codespan\">colorLightness</code>、<code class=\"codespan\">colorSaturation</code>、<code class=\"codespan\">visual value</code></p>\n<p>  possible value range is <code class=\"codespan\">[0, 1]</code>.</p>\n</li>\n<li><p><code class=\"codespan\">colorHue</code>:</p>\n<p>  possible value range is <code class=\"codespan\">[0, 360]</code>.</p>\n</li>\n<li><p><code class=\"codespan\">color</code>:</p>\n<p>  color can use RGB expression, like <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>, or RGBA expression, like <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>, or Hex expression, like &#39;#ccc&#39;.</p>\n</li>\n<li><p><code class=\"codespan\">symbol</code>:</p>\n</li>\n</ul>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p><br></p>\n<hr>\n<p><strong>✦ Table Mapping to visual channel ✦</strong></p>\n<p><code class=\"codespan\">Table Mapping</code> could be used when dataValue (values in series.data, specified by <a href=\"#visualMap.dimension\">visualMap.dimension</a>) is enumerable and we intend to map them to visual value by looking up a given table.</p>\n<p>For instance, in a <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> component, <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is set to <code class=\"codespan\">[&#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. And there is series.data: <code class=\"codespan\">[&#39;Demon Hunter&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. Then we can establish the lookup rule for color: <code class=\"codespan\">color: {&#39;Warden&#39;: &#39;red&#39;, &#39;Demon Hunter&#39;: &#39;black&#39;}</code>, by which the <code class=\"codespan\">visualMap</code> component will map <code class=\"codespan\">dataValue</code> to <code class=\"codespan\">color</code>.</p>\n<p>How to configure <code class=\"codespan\">visualMap</code> component to do <code class=\"codespan\">Table Mapping</code>?</p>\n<p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a>is set.</p>\n<p>About the value of visual channel (visual value):</p>\n<p>Generally <code class=\"codespan\">Object</code> or <code class=\"codespan\">Array</code> is used, for instance:</p>\n<pre><code class=\"lang-javascript\">visualMap: {\n    type: &#39;piecewise&#39;,\n    // categories defines the items that to be displayed in visualMap-piecewise component.\n    categories: [\n        &#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;\n    ],\n    outOfRange: {\n        // visual value can be an Object:\n        color: {\n            &#39;Warden&#39;: &#39;red&#39;,\n            &#39;Demon Hunter&#39;: &#39;black&#39;,\n            &#39;&#39;: &#39;green&#39; // Blank string means that except &#39;Warden&#39; and &#39;Demon Hunter&#39;,\n                        // all other dataValues should be mapped to &#39;green&#39;.\n        }\n        // visual value can also be a single value,\n        // means that all dataValues should be mapped to the value.\n        color: &#39;green&#39;,\n        // visual value can also be a array, with the same length\n        // as the array of categories and one-one mapping onto it.\n        color: [&#39;red&#39;, &#39;black&#39;, &#39;green&#39;, &#39;yellow&#39;, &#39;white&#39;]\n    }\n}\n</code></pre>\n<p><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/scatter-visualMap-categories&amp;edit=1&amp;reset=1\" target=\"_blank\">Example</a></p>\n<hr>\n<p><strong>✦ How to modity configurations of vsiual encoding? ✦</strong></p>\n<p>If you want to modify the configurations of visual encoding after chart been rendered (by invoke <code class=\"codespan\">setOption</code> to set the initial <code class=\"codespan\">option</code>), <code class=\"codespan\">setOption</code> can be used again to modify configurations of visual encoding. For instance:</p>\n<pre><code class=\"lang-javascript\">chart.setOption({\n    visualMap: {\n        inRange: {color: [&#39;red&#39;, &#39;blue&#39;]}\n    }\n});\n</code></pre>\n<p>Notice:</p>\n<ul>\n<li><p>These visualMap properties (i.e. <code class=\"codespan\">inRange</code>, <code class=\"codespan\">outOfRange</code>, <code class=\"codespan\">target</code>, <code class=\"codespan\">controller</code>) do not support &quot;merge&quot;, that is, anyone among them is modified when use <code class=\"codespan\">setOption</code> again, all of the original values of them will not be kept but erased. The &quot;merge&quot; brings complication in implemnentation and understanding, whereas &quot;erase all&quot; normalize the practise: once you want to modify some visual values, you should pass all of them to <code class=\"codespan\">setOption</code>, no matter they are to be changed.</p>\n</li>\n<li><p>This way, <code class=\"codespan\">getOption() -&gt; modify the gotten option -&gt; setOption(modified option)</code>, is strongly <strong>not recommended</strong>, for instance:</p>\n</li>\n</ul>\n<pre><code class=\"lang-javascript\">// Not recommended approach, regardless of its correctness:\n\nvar option = chart.getOption(); // Get the entire option.\noption.visualMap.inRange.color = [&#39;red&#39;, &#39;blue&#39;]; // modify color, which is what you want.\n\n// You have to modify those two properties, otherwise you will not get what you want.\noption.visualMap.target.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\noption.visualMap.controller.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\n\nchart.setOption(option); // set the modified option back.\n// You should not use this approach, but use the\n// approach demostrated before this example.\n</code></pre>\n"}}},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":4},"left":{"type":["string","number"],"description":"<p>Distance between visualMap  component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":0},"top":{"type":["string","number"],"description":"<p>Distance between visualMap  component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"auto"},"right":{"type":["string","number"],"description":"<p>Distance between visualMap  component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n","default":"auto"},"bottom":{"type":["string","number"],"description":"<p>Distance between visualMap  component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n","default":0},"orient":{"type":["string"],"description":"<p>How to layout the visualMap component, <code class=\"codespan\">&#39;horizontal&#39;</code> or <code class=\"codespan\">&#39;vertical&#39;</code>.</p>\n","default":"'vertical'"},"padding":{"type":["number","Array"],"description":"<p>visualMap-piecewise space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"backgroundColor":{"type":["Color"],"description":"<p>background color of visualMap component.</p>\n","default":"'rgba(0,0,0,0)'"},"borderColor":{"type":["Color"],"description":"<p>border color of visualMap component.</p>\n","default":"'#ccc'"},"borderWidth":{"type":["number"],"description":"<p>border width of visualMap component, with unit: px.</p>\n","default":0},"color":{"type":["Array"],"description":"<p>This property remains only for compatibility with ECharts2, and is not recommended in ECharts3. It is recommended to configure color in <a href=\"#visualMap-piecewise.inRange\">visualMap-piecewise.inRange</a>, or <a href=\"#visualMap-piecewise.outOfRange\">visualMap-piecewise.outOfRange</a> if needed.</p>\n<p>If you persist in using it, the following issue should be noticed: the sequence of dataValues that are mapped to colorValues in property <code class=\"codespan\">color</code> is from <code class=\"codespan\">large</code> to <code class=\"codespan\">small</code>, whereas that in <a href=\"#visualMap-piecewise.inRange\">visualMap-piecewise.inRange</a> or <a href=\"#visualMap-piecewise.outOfRange\">visualMap-piecewise.outOfRange</a> is from <code class=\"codespan\">small</code> to <code class=\"codespan\">large</code>.</p>\n","default":"['#bf444c', '#d88273', '#f6efa6']"},"textStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>visualMap  text color.</p>\n","default":"#333"},"fontStyle":{"type":["string"],"description":"<p>visualMap  font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p>visualMap  font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>visualMap  font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>visualMap  font size.</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"formatter":{"type":["string","Function"],"description":"<p>the formatter tool for label.</p>\n<ul>\n<li><p>If it was set as a <code class=\"codespan\">string</code>, it refers to a template, for instance: <code class=\"codespan\">aaaa{value}bbbb{value2}</code>, where <code class=\"codespan\">{value}</code> and <code class=\"codespan\">{value2}</code> represents the current selected range of dataValues.</p>\n</li>\n<li><p>If it was set as a <code class=\"codespan\">Function</code>, it refers to a callback function, for instance:</p>\n</li>\n</ul>\n<pre><code class=\"lang-javascript\">formatter: function (value, value2) {\n    return &#39;aaaa&#39; + value + &#39;bbbb&#39; + value2;\n}\n</code></pre>\n"}}}]},"description":"<p><code class=\"codespan\">visualMap</code> is a type of component for visual encoding, which maps the data to visual channels, including:</p>\n<ul>\n<li><code class=\"codespan\">symbol</code>: Type of symbol.</li>\n<li><code class=\"codespan\">symbolSize</code>: Symbol size.</li>\n<li><code class=\"codespan\">color</code>: Symbol color.</li>\n<li><code class=\"codespan\">colorAlpha</code>: Symbol alpha channel.</li>\n<li><code class=\"codespan\">opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code class=\"codespan\">colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<p>Myltiple <code class=\"codespan\">visualMap</code> component could be defined in a chart instance, which enable that different dimensions of a series data are mapped to different visual channels.</p>\n<p><code class=\"codespan\">visualMap</code> could be defined as <a href=\"#visualMap-piecewise\">Piecewise (visualMapPiecewise)</a> or <a href=\"#visualMap-continuous\">Continuous (visualMapContinuous)</a>, which is distinguished by the property <code class=\"codespan\">type</code>. For instance:</p>\n<pre><code class=\"lang-javascript\">option = {\n    visualMap: [\n        { // the first visualMap component\n            type: &#39;continuous&#39;, // defined to be continuous visualMap\n            ...\n        },\n        { // the second visualMap component\n            type: &#39;piecewise&#39;, // defined to be piecewise visualMap\n            ...\n        }\n    ],\n    ...\n};\n</code></pre>\n<p><br>\n<strong>✦ Configure mapping ✦</strong></p>\n<p>The dimension of <a href=\"#series.data\">series.data</a> can be specified by <a href=\"#visualMap.dimension\">visualMap.dimension</a>, from which the value can be retrieved and mapped onto visual channels, which can be defined in <a href=\"#visualMap.inRange\">visualMap.inRange</a> and <a href=\"#visualMap.outOfRange\">visualMap.outOfRange</a>.</p>\n<p><br>\nIn series that controlled by visualMap, if a data item needs to escape from controlled by visualMap, you can set like this:</p>\n<pre><code>series: {\n    type: &#39;...&#39;,\n    data: [\n        {name: &#39;Shanghai&#39;, value: 251},\n        {name: &#39;Haikou&#39;, value: 21},\n        // Mark as `visualMap: false`, then this item does not controlled by visualMap any more,\n        // and series visual config (like color, symbol, ...) can be used to this item.\n        {name: &#39;Beijing&#39;, value: 821, },\n        ...\n    ]\n}\n</code></pre><p><br>\n<strong>✦ The relationship between visualMap of ECharts3 and dataRange of ECharts2 ✦</strong></p>\n<p><code class=\"codespan\">visualMap</code> is renamed from the <code class=\"codespan\">dataRange</code> of ECharts2, and the scope of functionalities are extended a lot. The configurations of <code class=\"codespan\">dataRange</code> are still compatible in ECharts3, which automatically convert them to <code class=\"codespan\">visualMap</code>. It is recommended to use <code class=\"codespan\">visualMap</code> instead of <code class=\"codespan\">dataRange</code> in ECharts3.</p>\n<p><br>\n<strong>✦ The detailed configurations of visualMap are elaborated as follows. ✦</strong></p>\n<p><br>\n<br></p>\n","properties":{}},"tooltip":{"type":["Object"],"description":"<p>Tooltip component.</p>\n<hr>\n<p><strong>General Introduction:</strong></p>\n<p>tooltip can be configured on different places:</p>\n<ul>\n<li><p>Configured on global: <a href=\"#tooltip\">tooltip</a></p>\n</li>\n<li><p>Configured in a coordinate system: <a href=\"#grid.tooltip\">grid.tooltip</a>, <a href=\"#polar.tooltip\">polar.tooltip</a>, <a href=\"#single.tooltip\">single.tooltip</a></p>\n</li>\n<li><p>Configured in a series: <a href=\"#series.tooltip\">series.tooltip</a></p>\n</li>\n<li><p>Configured in each item of <code class=\"codespan\">series.data</code>: <a href=\"#series.data.tooltip\">series.data.tooltip</a></p>\n</li>\n</ul>\n<hr>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the tooltip component, including tooltip floating layer and <a href=\"#tooltip.axisPointer\">axisPointer</a>.</p>\n","default":true},"trigger":{"type":["string"],"description":"<p>Type of triggering.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;item&#39;</code></p>\n<p>  Triggered by data item, which is mainly used for charts that don&#39;t have a category axis like scatter charts or pie charts.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;axis&#39;</code></p>\n<p>  Triggered by axes, which is mainly used for charts that have category axes, like bar charts or line charts.</p>\n<p> ECharts 2.x only supports axis trigger for category axis. In ECharts 3, it is supported for all types of axes in <a href=\"#grid\">grid</a> or <a href=\"#polar\">polar</a>. Also, you may assign axis with <a href=\"#tooltip.axisPointer.axis\">axisPointer.axis</a>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;none&#39;</code></p>\n<p>  Trigger nothing.</p>\n</li>\n</ul>\n","default":"'item'"},"axisPointer":{"type":["Object"],"description":"<p>Configuration item for axisPointer.</p>\n<p><code class=\"codespan\">tooltip.axisPointer</code> is like syntactic sugar of axisPointer settings on axes (for example, <a href=\"#xAxis.axisPointer\">xAxis.axisPointer</a> or <a href=\"#angleAxis.axisPointer\">angleAxis.axisPointer</a>). More detailed features can be configured on <code class=\"codespan\">someAxis.axisPointer</code>. But in common cases, using <code class=\"codespan\">tooltip.axisPointer</code> is more convenient.</p>\n<blockquote>\n<p><strong>Notice:</strong> configurations of <code class=\"codespan\">tooltip.axisPointer</code> has lower priority than that of <code class=\"codespan\">someAxis.axisPointer</code>.</p>\n</blockquote>\n<hr>\n<p><code class=\"codespan\">axisPointer</code> is a tool for displaying reference line and axis value under mouse pointer.</p>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/candlestick-axisPointer&edit=1&reset=1\" width=\"600\" height=\"450\"><iframe />\n\n\n<p>In the demo above, <a href=\"#axisPointer.link\">axisPointer.link</a> is used to link axisPointer from different coordinate systems.</p>\n<p><code class=\"codespan\">axisPointer</code> can also be used on touch device, where user can drag the button to move the reference line and label.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-tooltip-touch&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n<p>In the cases that more than one axis exist, axisPointer helps to look inside the data.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=multiple-y-axis&edit=1&reset=1\" width=\"600\" height=\"300\"><iframe />\n\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=multiple-x-axis&edit=1&reset=1\" width=\"600\" height=\"300\"><iframe />\n\n\n\n<hr>\n<blockquote>\n<p><strong>Notice:</strong>\nGenerally, axisPointers is configured in each axes who need them (for example <a href=\"#xAxis.axisPointer\">xAxis.axisPointer</a>), or configured in <code class=\"codespan\">tooltip</code> (for example <a href=\"#tooltip.axisPointer\">tooltip.axisPointer</a>).</p>\n</blockquote>\n<blockquote>\n<p>But these configurations can only be configured in global axisPointer:\n<a href=\"#axisPointer.triggerOn\">axisPointer.triggerOn</a>, <a href=\"#axisPointer.link\">axisPointer.link</a>.</p>\n</blockquote>\n<hr>\n<hr>\n<p><strong>How to display axisPointer:</strong></p>\n<p>In <a href=\"#grid\">cartesian (grid)</a> and <a href=\"#single\">polar](~polar) and (single axis</a>, each axis has its own axisPointer.</p>\n<p>Those axisPointer will not be displayed by default, utill configured as follows:</p>\n<ul>\n<li><p>Set <code class=\"codespan\">someAxis.axisPointer.show</code> (like <a href=\"#xAxis.axisPointer.show\">xAxis.axisPointer.show</a>) as <code class=\"codespan\">true</code>. Then axisPointer of this axis will be displayed.</p>\n</li>\n<li><p>Set <a href=\"#tooltip.trigger\">tooltip.trigger</a> as <code class=\"codespan\">&#39;axis&#39;</code>, or set <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> as <code class=\"codespan\">&#39;cross&#39;</code>. Then coordinate system will automatically chose the axes who will display their axisPointers. (<a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> can be used to change the choice.) Notice, <code class=\"codespan\">axis.axisPointer</code> will override <code class=\"codespan\">tooltip.axisPointer</code> settings.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to display the label of axisPointer:</strong></p>\n<p>The label of axisPointer will not be displayed by default(namely, only reference line will be displayed by default), utill configured as follows:</p>\n<ul>\n<li><p>Set <code class=\"codespan\">someAxis.axisPointer.label.show</code> (for example <a href=\"#xAxis.axisPointer.show\">xAxis.axisPointer.label.show</a>) as <code class=\"codespan\">true</code>. Then the label of the axisPointer will be displayed.</p>\n</li>\n<li><p>Set <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> as  <code class=\"codespan\">&#39;cross&#39;</code>. Then the label of the crossed axisPointers will be displayed.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to configure axisPointer on touch device:</strong></p>\n<p>Set <code class=\"codespan\">someAxis.axisPointer.handle.show</code> (for example <a href=\"#xAxis.axisPointer.handle.show\">xAxis.axisPointer.handle.show</a> as <code class=\"codespan\">true</code>. Then the button for dragging will be displayed. (This feature is not supported on polar).</p>\n<p><strong>Notice:</strong>\nIf tooltip does not work well in this case, try to set<a href=\"#tooltip.triggerOn\">tooltip.triggerOn</a> as <code class=\"codespan\">&#39;none&#39;</code> (for the effect: show tooltip when finger holding on the button, and hide tooltip after finger left the button), or set <a href=\"#tooltip.alwaysShowContent\">tooltip.alwaysShowContent</a> as <code class=\"codespan\">true</code> (then tooltip will always be displayed).</p>\n<p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>.</p>\n<hr>\n<p><strong>Snap to point</strong></p>\n<p>In value axis and time axis, if <a href=\"#xAxis.axisPointer.snap\">snap</a> is set as true, axisPointer will snap to point automatically.</p>\n<hr>\n","properties":{"type":{"type":["string"],"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;line&#39;</code> line indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;shadow&#39;</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;none&#39;</code> no indicator displayed.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;cross&#39;</code> crosshair indicator, which is actually the shortcut of enable two axisPointers of two orthometric axes.</p>\n</li>\n</ul>\n","default":"'line'"},"axis":{"type":["string"],"description":"<p>The coordinate axis, which could be <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, <code class=\"codespan\">&#39;radius&#39;</code>, or <code class=\"codespan\">&#39;angle&#39;</code>. By default, each coordinate system will automatically chose the axes whose will display its axisPointer (category axis or time axis is used by default).</p>\n","default":"'auto'"},"snap":{"type":["boolean"],"description":"<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n"},"z":{"type":["number"],"description":"<p>z value, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n"},"label":{"type":["Object"],"description":"<p>label of axisPointer</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label. Label will not show by default. But if <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as  <code class=\"codespan\">&#39;cross&#39;</code>, label will be displayed automatically.</p>\n","default":false},"precision":{"type":["number","string"],"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code class=\"codespan\">&#39;2&#39;</code>, which indicates that two decimal fractions are reserved.</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"<p>The formatter of label.</p>\n<p>If set as <code class=\"codespan\">string</code>, for example it can be: <code class=\"codespan\">formatter: &#39;some text {value} some text</code>, where <code class=\"codespan\">{value}</code> will be replaced by axis value automatically.</p>\n<p>If set as <code class=\"codespan\">function</code>:</p>\n<p><strong>Parameters:</strong></p>\n<p><code class=\"codespan\">{Object}</code> params: Including fields as follows:</p>\n<p><code class=\"codespan\">{Object}</code> params.value: current value of this axis. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;category&#39;</code>, it is one of the value in <code class=\"codespan\">axis.data</code>. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;time&#39;</code>, it is a timestamp.</p>\n<p><code class=\"codespan\">{Array.&lt;Object&gt;}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<p><code class=\"codespan\">{string}</code> params.axisDimension: The dimension name of the axis. For example, in catesian it will be <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, and in polar it will be <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code>.</p>\n<p><code class=\"codespan\">{number}</code> params.axisIndex: The index of the axis, for example, <code class=\"codespan\">0</code>,<code class=\"codespan\">1</code>, <code class=\"codespan\">2</code>, ...</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n    axisDim: &#39;x&#39;, // &#39;x&#39;, &#39;y&#39;, &#39;angle&#39;, &#39;radius&#39;, &#39;single&#39;\n    axisId: &#39;xxx&#39;,\n    axisName: &#39;xxx&#39;,\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: &#39;text of value&#39;\n}\n</code></pre>\n<p><strong>Return:</strong></p>\n<p>The string to be displayed.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n    // If axis.type is &#39;time&#39;\n    return &#39;some text&#39; + echarts.format.formatTime(params.value);\n}\n</code></pre>\n","default":null},"margin":{"type":["boolean"],"description":"<p>Distance between label and axis.</p>\n","default":3},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"padding":{"type":["string","Array"],"description":"<p>axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"<p>Border color of label.</p>\n","default":null},"borderWidth":{"type":["string"],"description":"<p>Border width of label.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"lineStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;line&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"shadowStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;shadow&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"crossStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;cross&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"dashed"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":200},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"exponentialOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"showContent":{"type":["boolean"],"description":"<p>Whether to show the tooltip floating layer, whose default value is true. It should be configurated to be <code class=\"codespan\">false</code>, if you only need tooltip to trigger the event or show the axisPointer without content.</p>\n","default":true},"alwaysShowContent":{"type":["boolean"],"description":"<p>Whether to show tooltip content all the time. By default, it will be hidden <a href=\"#tooltip.hideDelay\">after some time</a>. It can be set to be <code class=\"codespan\">true</code> to preserve displaying.</p>\n<p>This attribute is newly added to ECharts 3.0.</p>\n","default":false},"triggerOn":{"type":["string"],"description":"<p>Conditions to trigger tooltip. Options:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;mousemove&#39;</code></p>\n<p>  Trigger when mouse moves.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;click&#39;</code></p>\n<p>  Trigger when mouse clicks.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;mousemove|click&#39;</code></p>\n<p>  Trigger when mouse clicks and moves.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;none&#39;</code></p>\n<p>  Do not triggered by <code class=\"codespan\">&#39;mousemove&#39;</code> and <code class=\"codespan\">&#39;click&#39;</code>. Tooltip can be triggered and hidden manually by calling <a href=\"api.html#action.tooltip.showTip\" target=\"_blank\">action.tooltip.showTip</a> and <a href=\"api.html#action.tooltip.hideTip\" target=\"_blank\">action.tooltip.hideTip</a>. It can also be triggered by <a href=\"#xAxis.axisPointer.handle\">axisPointer.handle</a> in this case.</p>\n</li>\n</ul>\n<p>This attribute is new to ECharts 3.0.</p>\n","default":"'mousemove|click'"},"showDelay":{"type":["number"],"description":"<p>Delay time for showing tooltip, in ms. No delay by default, and it is not recommended to set. Only valid when <a href=\"#tooltip.triggerOn\">triggerOn</a> is set to be <code class=\"codespan\">&#39;mousemove&#39;</code>.</p>\n","default":0},"hideDelay":{"type":["number"],"description":"<p>Delay time for hiding tooltip, in ms. It will be invalid when <a href=\"#tooltip.alwaysShowContent\">alwaysShowContent</a> is <code class=\"codespan\">true</code>.</p>\n","default":100},"enterable":{"type":["boolean"],"description":"<p>Whether mouse is allowed to enter the floating layer of tooltip, whose default value is false. If you need to interact in the tooltip like with links or buttons, it can be set as <code class=\"codespan\">true</code>.</p>\n","default":true},"renderMode":{"type":["string"],"description":"<p>Render mode for tooltip. By default, it is set to be <code class=\"codespan\">&#39;html&#39;</code> so that extra DOM element is used for tooltip. It can also set to be <code class=\"codespan\">&#39;richText&#39;</code> so that the tooltip will be rendered inside Canvas (SVG rich text is not implemented yet). This is very useful for environments that don&#39;t have DOM, such as Wechat applications.</p>\n","default":"'html'"},"confine":{"type":["boolean"],"description":"<p>Whether confine tooltip content in the view rect of chart instance.</p>\n<p>Useful when tooltip is cut because of <code class=\"codespan\">&#39;overflow: hidden&#39;</code> set on outer dom of chart instance, or because of narrow screen on mobile.</p>\n","default":false},"appendToBody":{"type":["boolean"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.7.0</code></p>\n</blockquote>\n<p>Whether to append the tooltip DOM element as a child of the <code class=\"codespan\">&lt;body&gt;</code> of the HTML page, when using <a href=\"#tooltip.renderMode\">renderMode</a> <code class=\"codespan\">&#39;html&#39;</code>.</p>\n<p>By default <code class=\"codespan\">false</code>, means that the tooltip DOM element will be one of a descendant of its echarts DOM container. But that means that the tooltip might be cut when overflow the container if some of the ancestors DOM element of the echarts container are styled with <code class=\"codespan\">overflow: hidden</code>. This case could also be resolved by setting <a href=\"#tooltip.confine\">tooltip.confine</a>, but it might not suitable for all scenarios.</p>\n<p>Here we provide <code class=\"codespan\">appendToBody: true</code> to auto append the tooltip element to <code class=\"codespan\">&lt;body&gt;</code>, which is a common way to resolve this kind of issue. But <code class=\"codespan\">true</code> is not set as a default value because to void to bring break change for some cases where tooltip is deeply customized and to void some unexpected bad cases.</p>\n<p>Note that it also works when CSS transform used.</p>\n","default":false},"transitionDuration":{"type":["number"],"description":"<p>The transition duration of tooltip&#39;s animation, in seconds. When it is set to be 0, it would move closely with the mouse.</p>\n","default":0.4},"position":{"type":["string","Array"],"description":"<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}},"axisPointer":{"type":["Object"],"description":"<p>This is the global configurations of axisPointer.</p>\n<hr>\n<p><code class=\"codespan\">axisPointer</code> is a tool for displaying reference line and axis value under mouse pointer.</p>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/candlestick-axisPointer&edit=1&reset=1\" width=\"600\" height=\"450\"><iframe />\n\n\n<p>In the demo above, <a href=\"#axisPointer.link\">axisPointer.link</a> is used to link axisPointer from different coordinate systems.</p>\n<p><code class=\"codespan\">axisPointer</code> can also be used on touch device, where user can drag the button to move the reference line and label.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-tooltip-touch&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n<p>In the cases that more than one axis exist, axisPointer helps to look inside the data.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=multiple-y-axis&edit=1&reset=1\" width=\"600\" height=\"300\"><iframe />\n\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=multiple-x-axis&edit=1&reset=1\" width=\"600\" height=\"300\"><iframe />\n\n\n\n<hr>\n<blockquote>\n<p><strong>Notice:</strong>\nGenerally, axisPointers is configured in each axes who need them (for example <a href=\"#xAxis.axisPointer\">xAxis.axisPointer</a>), or configured in <code class=\"codespan\">tooltip</code> (for example <a href=\"#tooltip.axisPointer\">tooltip.axisPointer</a>).</p>\n</blockquote>\n<blockquote>\n<p>But these configurations can only be configured in global axisPointer:\n<a href=\"#axisPointer.triggerOn\">axisPointer.triggerOn</a>, <a href=\"#axisPointer.link\">axisPointer.link</a>.</p>\n</blockquote>\n<hr>\n<hr>\n<p><strong>How to display axisPointer:</strong></p>\n<p>In <a href=\"#grid\">cartesian (grid)</a> and <a href=\"#single\">polar](~polar) and (single axis</a>, each axis has its own axisPointer.</p>\n<p>Those axisPointer will not be displayed by default, utill configured as follows:</p>\n<ul>\n<li><p>Set <code class=\"codespan\">someAxis.axisPointer.show</code> (like <a href=\"#xAxis.axisPointer.show\">xAxis.axisPointer.show</a>) as <code class=\"codespan\">true</code>. Then axisPointer of this axis will be displayed.</p>\n</li>\n<li><p>Set <a href=\"#tooltip.trigger\">tooltip.trigger</a> as <code class=\"codespan\">&#39;axis&#39;</code>, or set <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> as <code class=\"codespan\">&#39;cross&#39;</code>. Then coordinate system will automatically chose the axes who will display their axisPointers. (<a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> can be used to change the choice.) Notice, <code class=\"codespan\">axis.axisPointer</code> will override <code class=\"codespan\">tooltip.axisPointer</code> settings.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to display the label of axisPointer:</strong></p>\n<p>The label of axisPointer will not be displayed by default(namely, only reference line will be displayed by default), utill configured as follows:</p>\n<ul>\n<li><p>Set <code class=\"codespan\">someAxis.axisPointer.label.show</code> (for example <a href=\"#xAxis.axisPointer.show\">xAxis.axisPointer.label.show</a>) as <code class=\"codespan\">true</code>. Then the label of the axisPointer will be displayed.</p>\n</li>\n<li><p>Set <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> as  <code class=\"codespan\">&#39;cross&#39;</code>. Then the label of the crossed axisPointers will be displayed.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to configure axisPointer on touch device:</strong></p>\n<p>Set <code class=\"codespan\">someAxis.axisPointer.handle.show</code> (for example <a href=\"#xAxis.axisPointer.handle.show\">xAxis.axisPointer.handle.show</a> as <code class=\"codespan\">true</code>. Then the button for dragging will be displayed. (This feature is not supported on polar).</p>\n<p><strong>Notice:</strong>\nIf tooltip does not work well in this case, try to set<a href=\"#tooltip.triggerOn\">tooltip.triggerOn</a> as <code class=\"codespan\">&#39;none&#39;</code> (for the effect: show tooltip when finger holding on the button, and hide tooltip after finger left the button), or set <a href=\"#tooltip.alwaysShowContent\">tooltip.alwaysShowContent</a> as <code class=\"codespan\">true</code> (then tooltip will always be displayed).</p>\n<p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>.</p>\n<hr>\n<p><strong>Snap to point</strong></p>\n<p>In value axis and time axis, if <a href=\"#xAxis.axisPointer.snap\">snap</a> is set as true, axisPointer will snap to point automatically.</p>\n<hr>\n<hr>\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"show":{"type":["boolean"],"description":"<p>axisPointer will not be displayed by default. But if <a href=\"#tooltip.trigger\">tooltip.trigger</a> is set as <code class=\"codespan\">&#39;axis&#39;</code> or <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as  <code class=\"codespan\">&#39;cross&#39;</code>, axisPointer will be displayed automatically. Each coordinate system will automatically chose the axes whose will display its axisPointer. <a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> can be used to change the choice.</p>\n","default":false},"type":{"type":["string"],"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;line&#39;</code> line indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;shadow&#39;</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;none&#39;</code> no indicator displayed.</p>\n</li>\n</ul>\n","default":"'line'"},"snap":{"type":["boolean"],"description":"<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n"},"z":{"type":["number"],"description":"<p>z value, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n"},"label":{"type":["Object"],"description":"<p>label of axisPointer</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label. Label will not show by default. But if <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as  <code class=\"codespan\">&#39;cross&#39;</code>, label will be displayed automatically.</p>\n","default":false},"precision":{"type":["number","string"],"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code class=\"codespan\">&#39;2&#39;</code>, which indicates that two decimal fractions are reserved.</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"<p>The formatter of label.</p>\n<p>If set as <code class=\"codespan\">string</code>, for example it can be: <code class=\"codespan\">formatter: &#39;some text {value} some text</code>, where <code class=\"codespan\">{value}</code> will be replaced by axis value automatically.</p>\n<p>If set as <code class=\"codespan\">function</code>:</p>\n<p><strong>Parameters:</strong></p>\n<p><code class=\"codespan\">{Object}</code> params: Including fields as follows:</p>\n<p><code class=\"codespan\">{Object}</code> params.value: current value of this axis. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;category&#39;</code>, it is one of the value in <code class=\"codespan\">axis.data</code>. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;time&#39;</code>, it is a timestamp.</p>\n<p><code class=\"codespan\">{Array.&lt;Object&gt;}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<p><code class=\"codespan\">{string}</code> params.axisDimension: The dimension name of the axis. For example, in catesian it will be <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, and in polar it will be <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code>.</p>\n<p><code class=\"codespan\">{number}</code> params.axisIndex: The index of the axis, for example, <code class=\"codespan\">0</code>,<code class=\"codespan\">1</code>, <code class=\"codespan\">2</code>, ...</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n    axisDim: &#39;x&#39;, // &#39;x&#39;, &#39;y&#39;, &#39;angle&#39;, &#39;radius&#39;, &#39;single&#39;\n    axisId: &#39;xxx&#39;,\n    axisName: &#39;xxx&#39;,\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: &#39;text of value&#39;\n}\n</code></pre>\n<p><strong>Return:</strong></p>\n<p>The string to be displayed.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n    // If axis.type is &#39;time&#39;\n    return &#39;some text&#39; + echarts.format.formatTime(params.value);\n}\n</code></pre>\n","default":null},"margin":{"type":["boolean"],"description":"<p>Distance between label and axis.</p>\n","default":3},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"padding":{"type":["string","Array"],"description":"<p>axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"<p>Border color of label.</p>\n","default":null},"borderWidth":{"type":["string"],"description":"<p>Border width of label.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"lineStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;line&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"shadowStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;shadow&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"triggerTooltip":{"type":["boolean"],"description":"<p>Whether to trigger tooltip.</p>\n","default":true},"value":{"type":["number"],"description":"<p>current value. When using <a href=\"xAxisPointer.handle\" target=\"_blank\">axisPointer.handle</a>, <code class=\"codespan\">value</code> can be set to define the initail position of axisPointer.</p>\n","default":null},"status":{"type":["boolean"],"description":"<p>Current status, can be <code class=\"codespan\">&#39;show&#39;</code> 和 <code class=\"codespan\">&#39;hide&#39;</code>.</p>\n"},"handle":{"type":["Object"],"description":"<p>A button used to drag axisPointer. This feature is applicable in touch device. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set to <code class=\"codespan\">true</code> to use handle.</p>\n","default":false},"icon":{"type":["*"],"description":"<p>The icon of the handle.</p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/axisPointer-handle-image&amp;edit=1&amp;reset=1\" target=\"_blank\">example of using image</a></p>\n"},"size":{"type":["number","Array"],"description":"<p>The size of the handle, which can be set as a single value or an array (<code class=\"codespan\">[width, height]</code>).</p>\n","default":45},"margin":{"type":["number"],"description":"<p>Distance from handle center to axis.</p>\n","default":50},"color":{"type":["string"],"description":"<p>The color of the handle.</p>\n","default":"'#333'"},"throttle":{"type":["number"],"description":"<p>Throttle rate of trigger view update when dragging handle, in ms. Increase the value to improve performance, but decrease the experience.</p>\n","default":40},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":2},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"link":{"type":["Array"],"description":"<p>axisPointers can be linked to each other. The term &quot;link&quot; represents that axes are synchronized and move together. Axes are linked according to the value of axisPointer.</p>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/view.html?c=candlestick-brush&amp;edit=1&amp;reset=1\" target=\"_blank\">sampleA</a> and <a href=\"https://echarts.apache.org/examples/zh/view.html?c=scatter-nutrients-matrix&amp;edit=1&amp;reset=1\" target=\"_blank\">sampleB</a>.</p>\n<p>link is an array, where each item represents a &quot;link group&quot;. Axes will be linked when they are refered in the same link group. For example:</p>\n<pre><code class=\"lang-js\">link: [\n    {\n        // All axes with xAxisIndex 0, 3, 4 and yAxisName &#39;sameName&#39; will be linked.\n        xAxisIndex: [0, 3, 4],\n        yAxisName: &#39;someName&#39;\n    },\n    {\n        // All axes with xAxisId &#39;aa&#39;, &#39;cc&#39; and all angleAxis will be linked.\n        xAxisId: [&#39;aa&#39;, &#39;cc&#39;],\n        angleAxis: &#39;all&#39;\n    },\n    ...\n]\n</code></pre>\n<p>As illustrated above, axes can be refered in these approaches in a link group:</p>\n<pre><code class=\"lang-js\">{\n    // &#39;some&#39; represent the dimension name of a axis, namely, &#39;x&#39;, &#39;y&#39;, &#39;radius&#39;, &#39;angle&#39;, &#39;single&#39;\n    someAxisIndex: [...], // can be an array or a value or &#39;all&#39;\n    someAxisName: [...],  // can be an array or a value or &#39;all&#39;\n    someAxisId: [...],    // can be an array or a value or &#39;all&#39;\n}\n</code></pre>\n<hr>\n<hr>\n<p><strong>How to link axes with different <a href=\"#xAxis.type\">axis.type</a>?</strong></p>\n<p>For example, the type of axisA is &#39;category&#39;, and the type of axisB type is &#39;time&#39;, we can write conversion function (mapper) in link group to convert values from an axis to another axis. For example:</p>\n<pre><code class=\"lang-js\">link: [{\n    xAxisIndex: [0, 1],\n    yAxisName: [&#39;yy&#39;],\n    mapper: function (sourceVal, sourceAxisInfo, targetAxisInfo) {\n        if (sourceAxisInfo.axisName === &#39;yy&#39;) {\n            // from timestamp to &#39;2012-02-05&#39;\n            return echarts.format.formatTime(&#39;yyyy-MM-dd&#39;, sourceVal);\n        }\n        else if (targetAxisInfo.axisName === &#39;yy&#39;) {\n            // from &#39;2012-02-05&#39; to date\n            return echarts.number.parseDate(dates[sourceVal]);\n        }\n        else {\n            return sourceVal;\n        }\n    }\n}]\n</code></pre>\n<p>Input parameters of mapper:</p>\n<p><code class=\"codespan\">{number}</code> sourceVal</p>\n<p><code class=\"codespan\">{Object}</code> sourceAxisInfo Including {axisDim, axisId, axisName, axisIndex, ...}</p>\n<p><code class=\"codespan\">{Object}</code> targetAxisInfo Including {axisDim, axisId, axisName, axisIndex, ...}</p>\n<p>Return of mapper:</p>\n<p><code class=\"codespan\">{number}</code> The result of conversion.</p>\n"},"triggerOn":{"type":["string"],"description":"<p>Conditions to trigger tooltip. Options:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;mousemove&#39;</code></p>\n<p>  Trigger when mouse moves.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;click&#39;</code></p>\n<p>  Trigger when mouse clicks.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;mousemove|click&#39;</code></p>\n<p>  Trigger when mouse clicks and moves.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;none&#39;</code></p>\n<p>  Do not triggered by <code class=\"codespan\">&#39;mousemove&#39;</code> and <code class=\"codespan\">&#39;click&#39;</code></p>\n</li>\n</ul>\n","default":"'mousemove|click'"}}},"toolbox":{"type":["Object"],"description":"<p>A group of utility tools, which includes <a href=\"#toolbox.feature.saveAsImage\">export</a>, <a href=\"#toolbox.feature.dataView\">data view</a>, <a href=\"#toolbox.feature.magicType\">dynamic type switching</a>, <a href=\"#toolbox.feature.dataZoom\">data area zooming</a>, and <a href=\"#toolbox.feature.reset\">reset</a>.</p>\n<p><strong>Example: </strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-marker&reset=1&edit=1\" width=\"600\" height=\"400\"><iframe />\n\n\n\n\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"show":{"type":["boolean"],"description":"<p>Whether to show toolbox component.</p>\n","default":true},"orient":{"type":["string"],"description":"<p>The layout orientation of toolbox&#39;s icon.</p>\n<p>Options:</p>\n<ul>\n<li>&#39;horizontal&#39;</li>\n<li>&#39;vertical&#39;</li>\n</ul>\n","default":"'horizontal'"},"itemSize":{"type":["number"],"description":"<p>The size of toolbox&#39;s icon.</p>\n","default":15},"itemGap":{"type":["number"],"description":"<p>The gap between each icon of toolbox. It is horizontal gap in horizontal layout, while vertical gap in vertical layout.</p>\n","default":10},"showTitle":{"type":["boolean"],"description":"<p>Whether to show the title of each tool icon when mouse hovers.</p>\n","default":true},"feature":{"type":["Object"],"description":"<p>The configuration item for each tool.</p>\n<p>Besides the tools we provide, user-defined toolbox is also supported.</p>\n<p>Notes: User-defined tool name could only start with <code class=\"codespan\">my</code>, like <code class=\"codespan\">myTool1</code> and <code class=\"codespan\">myTool2</code> in the below example:</p>\n<pre><code class=\"lang-javascript\">{\n    toolbox: {\n        feature: {\n            myTool1: {\n                show: true,\n                title: &#39;custom extension method 1&#39;,\n                icon: &#39;path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891&#39;,\n                onclick: function (){\n                    alert(&#39;myToolHandler1&#39;)\n                }\n            },\n            myTool2: {\n                show: true,\n                title: &#39;custom extension method&#39;,\n                icon: &#39;image://http://echarts.baidu.com/images/favicon.png&#39;,\n                onclick: function (){\n                    alert(&#39;myToolHandler2&#39;)\n                }\n            }\n        }\n    }\n}\n</code></pre>\n","properties":{"saveAsImage":{"type":["Object"],"description":"<p>Save as image.</p>\n","properties":{"type":{"type":["string"],"description":"<p>File suffix of the image saved.</p>\n<ul>\n<li>If the <code class=\"codespan\">renderer</code> is set to be <code class=\"codespan\">&#39;canvas&#39;</code> when chart <a href=\"api.html#echarts.init\" target=\"_blank\">initialized</a> (default), then <code class=\"codespan\">&#39;png&#39;</code> (default) and <code class=\"codespan\">&#39;jpeg&#39;</code> are supported.</li>\n<li>If the <code class=\"codespan\">renderer</code> is set to be <code class=\"codespan\">&#39;svg&#39;</code> when when chart <a href=\"api.html#echarts.init\" target=\"_blank\">initialized</a>, then only <code class=\"codespan\">&#39;svg&#39;</code> is supported for <code class=\"codespan\">type</code> (<code class=\"codespan\">&#39;svg&#39;</code> type is supported since <code class=\"codespan\">v4.8.0</code>).</li>\n</ul>\n","default":"'png'"},"name":{"type":["string"],"description":"<p>Name to save the image, whose default value is <a href=\"#title.text\">title.text</a>.</p>\n"},"backgroundColor":{"type":["Color"],"description":"<p>Background color to save the image, whose default value is <a href=\"#backgroundColor\">backgroundColor</a>. If <code class=\"codespan\">backgroundColor</code> is not set, white color is used.</p>\n","default":"'auto'"},"connectedBackgroundColor":{"type":["Color"],"description":"<p>When <a href=\"api.html#echarts.connect\" target=\"_blank\">echarts.connect</a> is used to connect the interaction of multiple chart series, they will all be included in the exported image. This option sets the background color between these charts.</p>\n","default":"'#fff'"},"excludeComponents":{"type":["Array"],"description":"<p>Components to be excluded when export. By default, toolbox is excluded.</p>\n","default":"['toolbox']"},"show":{"type":["boolean"],"description":"<p>Whether to show the tool.</p>\n","default":true},"title":{"type":["string"],"description":"","default":"'save as image'"},"icon":{"type":["*"],"description":"<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"iconStyle":{"type":["Object"],"description":"<p>The style setting of save as image icon. Since icon label is displayed only when hovering on the icon, the label configuration options are available under <code class=\"codespan\">emphasis</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"none"},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"#666"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"iconStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"textPosition":{"type":["string"],"description":"<p>Text position: <code class=\"codespan\">&#39;left&#39;</code> / <code class=\"codespan\">&#39;right&#39;</code> / <code class=\"codespan\">&#39;top&#39;</code> / <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n","default":"'bottom'"},"textFill":{"type":["string"],"description":"<p>Fill color of text. If it&#39;s not set, it will use in the order of icon&#39;s fill color, stroke color, and <code class=\"codespan\">&#39;#000&#39;</code>.</p>\n","default":"'#000'"},"textAlign":{"type":["string"],"description":"<p>Text align: <code class=\"codespan\">&#39;left&#39;</code> / <code class=\"codespan\">&#39;center&#39;</code> / <code class=\"codespan\">&#39;right&#39;</code>.</p>\n","default":"'center'"},"textBackgroundColor":{"type":["string"],"description":"<p>Text background color.</p>\n"},"textBorderRadius":{"type":["number"],"description":"<p>Border radius of text area.</p>\n"},"textPadding":{"type":["number"],"description":"<p>Padding of text area.</p>\n"}}}}},"pixelRatio":{"type":["number"],"description":"<p>Resolution ratio to save image, whose default value is that of the container. Values larger than 1 (e.g.: 2) is supported when you need higher resolution.</p>\n","default":1}}},"restore":{"type":["Object"],"description":"<p>Restore configuration item.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the tool.</p>\n","default":true},"title":{"type":["string"],"description":"","default":"'restore'"},"icon":{"type":["*"],"description":"<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"iconStyle":{"type":["Object"],"description":"<p>The style setting of restore icon. Since icon label is displayed only when hovering on the icon, the label configuration options are available under <code class=\"codespan\">emphasis</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"none"},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"#666"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"iconStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"textPosition":{"type":["string"],"description":"<p>Text position: <code class=\"codespan\">&#39;left&#39;</code> / <code class=\"codespan\">&#39;right&#39;</code> / <code class=\"codespan\">&#39;top&#39;</code> / <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n","default":"'bottom'"},"textFill":{"type":["string"],"description":"<p>Fill color of text. If it&#39;s not set, it will use in the order of icon&#39;s fill color, stroke color, and <code class=\"codespan\">&#39;#000&#39;</code>.</p>\n","default":"'#000'"},"textAlign":{"type":["string"],"description":"<p>Text align: <code class=\"codespan\">&#39;left&#39;</code> / <code class=\"codespan\">&#39;center&#39;</code> / <code class=\"codespan\">&#39;right&#39;</code>.</p>\n","default":"'center'"},"textBackgroundColor":{"type":["string"],"description":"<p>Text background color.</p>\n"},"textBorderRadius":{"type":["number"],"description":"<p>Border radius of text area.</p>\n"},"textPadding":{"type":["number"],"description":"<p>Padding of text area.</p>\n"}}}}}}},"dataView":{"type":["Object"],"description":"<p>Data view tool, which could display data in current chart and updates chart after being edited.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the tool.</p>\n","default":true},"title":{"type":["string"],"description":"","default":"'data view'"},"icon":{"type":["*"],"description":"<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"iconStyle":{"type":["Object"],"description":"<p>The style setting of data view icon. Since icon label is displayed only when hovering on the icon, the label configuration options are available under <code class=\"codespan\">emphasis</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"none"},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"#666"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"iconStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"textPosition":{"type":["string"],"description":"<p>Text position: <code class=\"codespan\">&#39;left&#39;</code> / <code class=\"codespan\">&#39;right&#39;</code> / <code class=\"codespan\">&#39;top&#39;</code> / <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n","default":"'bottom'"},"textFill":{"type":["string"],"description":"<p>Fill color of text. If it&#39;s not set, it will use in the order of icon&#39;s fill color, stroke color, and <code class=\"codespan\">&#39;#000&#39;</code>.</p>\n","default":"'#000'"},"textAlign":{"type":["string"],"description":"<p>Text align: <code class=\"codespan\">&#39;left&#39;</code> / <code class=\"codespan\">&#39;center&#39;</code> / <code class=\"codespan\">&#39;right&#39;</code>.</p>\n","default":"'center'"},"textBackgroundColor":{"type":["string"],"description":"<p>Text background color.</p>\n"},"textBorderRadius":{"type":["number"],"description":"<p>Border radius of text area.</p>\n"},"textPadding":{"type":["number"],"description":"<p>Padding of text area.</p>\n"}}}}},"readOnly":{"type":["boolean"],"description":"<p>Whether it is read-only.</p>\n","default":false},"optionToContent":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(option:Object) =&gt; HTMLDomElement|string\n</code></pre>\n<p>Define a function to present dataView. It is used to replace default textarea for richer data editing. It can return a DOM object, or an HTML string.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">optionToContent: function(opt) {\n    var axisData = opt.xAxis[0].data;\n    var series = opt.series;\n    var table = &#39;&lt;table style=&quot;width:100%;text-align:center&quot;&gt;&lt;tbody&gt;&lt;tr&gt;&#39;\n                 + &#39;&lt;td&gt;Time:&lt;/td&gt;&#39;\n                 + &#39;&lt;td&gt;&#39; + series[0].name + &#39;&lt;/td&gt;&#39;\n                 + &#39;&lt;td&gt;&#39; + series[1].name + &#39;&lt;/td&gt;&#39;\n                 + &#39;&lt;/tr&gt;&#39;;\n    for (var i = 0, l = axisData.length; i &lt; l; i++) {\n        table += &#39;&lt;tr&gt;&#39;\n                 + &#39;&lt;td&gt;&#39; + axisData[i] + &#39;&lt;/td&gt;&#39;\n                 + &#39;&lt;td&gt;&#39; + series[0].data[i] + &#39;&lt;/td&gt;&#39;\n                 + &#39;&lt;td&gt;&#39; + series[1].data[i] + &#39;&lt;/td&gt;&#39;\n                 + &#39;&lt;/tr&gt;&#39;;\n    }\n    table += &#39;&lt;/tbody&gt;&lt;/table&gt;&#39;;\n    return table;\n}\n</code></pre>\n"},"contentToOption":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(container:HTMLDomElement, option:Object) =&gt; Object\n</code></pre>\n<p>When optionToContent is used, if you want to support refreshing chart after data changes, you need to implement the logic to merge options in this function.</p>\n"},"lang":{"type":["Array"],"description":"<p>There are 3 names in data view, which are <code class=\"codespan\">[&#39;data view&#39;, &#39;turn off&#39; and &#39;refresh&#39;]</code>.</p>\n","default":"['data view', 'turn off', 'refresh']"},"backgroundColor":{"type":["string"],"description":"<p>Background color of the floating layer in data view.</p>\n","default":"'#fff'"},"textareaColor":{"type":["string"],"description":"<p>Background color of input area of the floating layer in data view.</p>\n","default":"'#fff'"},"textareaBorderColor":{"type":["string"],"description":"<p>Border color of input area of the floating layer in data view.</p>\n","default":"'#333'"},"textColor":{"type":["string"],"description":"<p>Text color.</p>\n","default":"'#000'"},"buttonColor":{"type":["string"],"description":"<p>Button color.</p>\n","default":"'#c23531'"},"buttonTextColor":{"type":["string"],"description":"<p>Color of button text.</p>\n","default":"'#fff'"}}},"dataZoom":{"type":["Object"],"description":"<p>Data area zooming, which only supports rectangular coordinate by now.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the tool.</p>\n","default":true},"title":{"type":["Object"],"description":"<p>Restored and zoomed title text.</p>\n","properties":{"zoom":{"type":["string"],"description":"","default":"'area zooming'"},"back":{"type":["string"],"description":"","default":"'restore area zooming'"}}},"icon":{"type":["Object"],"description":"<p>Zooming and restore icon path.</p>\n","properties":{"zoom":{"type":["string"],"description":"<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"back":{"type":["string"],"description":"<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"}}},"iconStyle":{"type":["Object"],"description":"<p>The style setting of data area zooming icon. Since icon label is displayed only when hovering on the icon, the label configuration options are available under <code class=\"codespan\">emphasis</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"none"},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"#666"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"iconStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"textPosition":{"type":["string"],"description":"<p>Text position: <code class=\"codespan\">&#39;left&#39;</code> / <code class=\"codespan\">&#39;right&#39;</code> / <code class=\"codespan\">&#39;top&#39;</code> / <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n","default":"'bottom'"},"textFill":{"type":["string"],"description":"<p>Fill color of text. If it&#39;s not set, it will use in the order of icon&#39;s fill color, stroke color, and <code class=\"codespan\">&#39;#000&#39;</code>.</p>\n","default":"'#000'"},"textAlign":{"type":["string"],"description":"<p>Text align: <code class=\"codespan\">&#39;left&#39;</code> / <code class=\"codespan\">&#39;center&#39;</code> / <code class=\"codespan\">&#39;right&#39;</code>.</p>\n","default":"'center'"},"textBackgroundColor":{"type":["string"],"description":"<p>Text background color.</p>\n"},"textBorderRadius":{"type":["number"],"description":"<p>Border radius of text area.</p>\n"},"textPadding":{"type":["number"],"description":"<p>Padding of text area.</p>\n"}}}}},"filterMode":{"type":["string"],"description":"<p>The same meaning as <a href=\"#dataZoom.filterMode\">dataZoom.filterMode</a>.</p>\n","default":"'filter'"},"xAxisIndex":{"type":["number","Array","boolean"],"description":"<p>Defines which <a href=\"#xAxis\">xAxis</a> should be controlled. By default, it controls all x axes. If it is set to be <code class=\"codespan\">false</code>, then no x axis is controlled. If it is set to be then it controls axis with axisIndex of <code class=\"codespan\">3</code>. If it is set to be <code class=\"codespan\">[0, 3]</code>, it controls the x-axes with axisIndex of <code class=\"codespan\">0</code> and <code class=\"codespan\">3</code>.</p>\n"},"yAxisIndex":{"type":["number","Array","boolean"],"description":"<p>Defines which <a href=\"#yAxis\">yAxis</a> should be controlled. By default, it controls all y axes. If it is set to be <code class=\"codespan\">false</code>, then no y axis is controlled. If it is set to be then it controls axis with axisIndex of <code class=\"codespan\">3</code>. If it is set to be <code class=\"codespan\">[0, 3]</code>, it controls the x-axes with axisIndex of <code class=\"codespan\">0</code> and <code class=\"codespan\">3</code>.</p>\n"}}},"magicType":{"type":["Object"],"description":"<p>Magic type switching.\n<strong>示例: </strong></p>\n<pre><code class=\"lang-js\">feature: {\n    magicType: {\n        type: [&#39;line&#39;, &#39;bar&#39;, &#39;stack&#39;, &#39;tiled&#39;]\n    }\n}\n</code></pre>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the tool.</p>\n","default":true},"type":{"type":["Array"],"description":"<p>Enabled magic types, including <code class=\"codespan\">&#39;line&#39;</code> (for line charts), <code class=\"codespan\">&#39;bar&#39;</code> (for bar charts), <code class=\"codespan\">&#39;stack&#39;</code> (for stacked charts), and <code class=\"codespan\">&#39;tiled&#39;</code> (for tiled charts).</p>\n"},"title":{"type":["Object"],"description":"<p>Title for different types, can be configured seperately.</p>\n","properties":{"line":{"type":["string"],"description":"","default":"'for line charts'"},"bar":{"type":["string"],"description":"","default":"'for bar charts'"},"stack":{"type":["string"],"description":"","default":"'for stacked charts'"},"tiled":{"type":["string"],"description":"","default":"'for tiled charts'"}}},"icon":{"type":["Object"],"description":"<p>the different types of icon path , which could be configurated individually.</p>\n","properties":{"line":{"type":["string"],"description":"<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"bar":{"type":["string"],"description":"<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"stack":{"type":["string"],"description":"<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"tiled":{"type":["string"],"description":"<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"}}},"iconStyle":{"type":["Object"],"description":"<p>The style setting of magic type switching icon. Since icon label is displayed only when hovering on the icon, the label configuration options are available under <code class=\"codespan\">emphasis</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"none"},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"#666"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"iconStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"textPosition":{"type":["string"],"description":"<p>Text position: <code class=\"codespan\">&#39;left&#39;</code> / <code class=\"codespan\">&#39;right&#39;</code> / <code class=\"codespan\">&#39;top&#39;</code> / <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n","default":"'bottom'"},"textFill":{"type":["string"],"description":"<p>Fill color of text. If it&#39;s not set, it will use in the order of icon&#39;s fill color, stroke color, and <code class=\"codespan\">&#39;#000&#39;</code>.</p>\n","default":"'#000'"},"textAlign":{"type":["string"],"description":"<p>Text align: <code class=\"codespan\">&#39;left&#39;</code> / <code class=\"codespan\">&#39;center&#39;</code> / <code class=\"codespan\">&#39;right&#39;</code>.</p>\n","default":"'center'"},"textBackgroundColor":{"type":["string"],"description":"<p>Text background color.</p>\n"},"textBorderRadius":{"type":["number"],"description":"<p>Border radius of text area.</p>\n"},"textPadding":{"type":["number"],"description":"<p>Padding of text area.</p>\n"}}}}},"option":{"type":["Object"],"description":"<p>Configuration item for each type, which will be used when switching to certain type.</p>\n","properties":{"line":{"type":["Object"],"description":""},"bar":{"type":["Object"],"description":""},"stack":{"type":["Object"],"description":""},"tiled":{"type":["Object"],"description":""}}},"seriesIndex":{"type":["Object"],"description":"<p>Series list for each type.</p>\n","properties":{"line":{"type":["Array"],"description":""},"bar":{"type":["Array"],"description":""},"stack":{"type":["Array"],"description":""},"tiled":{"type":["Array"],"description":""}}}}},"brush":{"type":["Object"],"description":"<p>Brush-selecting icon.</p>\n<p>It can also be configured at <a href=\"#brush.toolbox\">brush.toolbox</a>.</p>\n","properties":{"type":{"type":["Array"],"description":"<p>Icons used, whose values are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;rect&#39;</code>: Enabling selecting with rectangle area.</li>\n<li><code class=\"codespan\">&#39;polygon&#39;</code>: Enabling selecting with any shape.</li>\n<li><code class=\"codespan\">&#39;lineX&#39;</code>: Enabling horizontal selecting.</li>\n<li><code class=\"codespan\">&#39;lineY&#39;</code>: Enabling vertical selecting.</li>\n<li><code class=\"codespan\">&#39;keep&#39;</code>: Switching between <em>single selecting</em> and <em>multiple selecting</em>. The latter one can select multiple areas, while the former one cancels previous selection.</li>\n<li><code class=\"codespan\">&#39;clear&#39;</code>: Clearing all selection.</li>\n</ul>\n"},"icon":{"type":["Object"],"description":"<p>Icon path for each icon.</p>\n","properties":{"rect":{"type":["string"],"description":"<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"polygon":{"type":["string"],"description":"<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"lineX":{"type":["string"],"description":"<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"lineY":{"type":["string"],"description":"<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"keep":{"type":["string"],"description":"<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"clear":{"type":["string"],"description":"<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"}}},"title":{"type":["Object"],"description":"<p>Title.</p>\n","properties":{"rect":{"type":["string"],"description":"","default":"'Rectangle selection'"},"polygon":{"type":["string"],"description":"","default":"'Polygon selection'"},"lineX":{"type":["string"],"description":"","default":"'Horizontal selection'"},"lineY":{"type":["string"],"description":"","default":"'Vertical selection'"},"keep":{"type":["string"],"description":"","default":"'Keep previous selection'"},"clear":{"type":["string"],"description":"","default":"'Clear selection'"}}}}}}},"iconStyle":{"type":["Object"],"description":"<p>The style setting of Shared icon. Since icon label is displayed only when hovering on the icon, the label configuration options are available under <code class=\"codespan\">emphasis</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"none"},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"#666"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"iconStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"textPosition":{"type":["string"],"description":"<p>Text position: <code class=\"codespan\">&#39;left&#39;</code> / <code class=\"codespan\">&#39;right&#39;</code> / <code class=\"codespan\">&#39;top&#39;</code> / <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n","default":"'bottom'"},"textFill":{"type":["string"],"description":"<p>Fill color of text. If it&#39;s not set, it will use in the order of icon&#39;s fill color, stroke color, and <code class=\"codespan\">&#39;#000&#39;</code>.</p>\n","default":"'#000'"},"textAlign":{"type":["string"],"description":"<p>Text align: <code class=\"codespan\">&#39;left&#39;</code> / <code class=\"codespan\">&#39;center&#39;</code> / <code class=\"codespan\">&#39;right&#39;</code>.</p>\n","default":"'center'"},"textBackgroundColor":{"type":["string"],"description":"<p>Text background color.</p>\n"},"textBorderRadius":{"type":["number"],"description":"<p>Border radius of text area.</p>\n"},"textPadding":{"type":["number"],"description":"<p>Padding of text area.</p>\n"}}}}},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between toolbox component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"top":{"type":["string","number"],"description":"<p>Distance between toolbox component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"right":{"type":["string","number"],"description":"<p>Distance between toolbox component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"<p>Distance between toolbox component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"width":{"type":["string","number"],"description":"<p>Width of toolbox component. Adaptive by default.</p>\n","default":"'auto'"},"height":{"type":["string","number"],"description":"<p>Height of toolbox component. Adaptive by default.</p>\n","default":"'auto'"},"tooltip":{"type":["Object"],"description":"<p>Tooltip configuration for toolbox tooltip, which is similar to <a href=\"#tooltip\">tooltip</a>. It is not shown by default. If you wish to set special style for toolbox icon label (especially when using CSS to control text style), you may set as the following example:</p>\n<pre><code class=\"lang-js\">option = {\n    tooltip: {\n        show: true // include tooltip component for the feature\n    },\n    toolbox: {\n        show: true,\n        showTitle: false, // hide the default text so they don&#39;t overlap each other\n        feature: {\n            saveAsImage: {\n                show: true,\n                title: &#39;Save As Image&#39;\n            },\n            dataView: {\n                show: true,\n                title: &#39;Data View&#39;\n            },\n        },\n        tooltip: { // same as option.tooltip\n            show: true,\n            formatter: function (param) {\n                return return &#39;&lt;div&gt;&#39; + param.title + &#39;&lt;/div&gt;&#39;; // user-defined DOM structure\n            },\n            backgroundColor: &#39;#222&#39;,\n            textStyle: {\n                fontSize: 12,\n            },\n            extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39; // user-defined CSS styles\n        }\n    },\n    ...\n}\n</code></pre>\n"}}},"brush":{"type":["Object"],"description":"<p><code class=\"codespan\">brush</code> is an area-selecting component, with which user can select part of data from a chart to display in detail, or do calculations with them.</p>\n<p><br></p>\n<hr>\n<p><strong>Brush type and triggering button</strong></p>\n<p>Currently, supported <code class=\"codespan\">brush</code> types include: <code class=\"codespan\">scatter</code>, <code class=\"codespan\">bar</code>, <code class=\"codespan\">candlestick</code>. (Note that <code class=\"codespan\">parallel</code> contains brush function by itself, which is not provided by brush component.)</p>\n<p>Click the button in <code class=\"codespan\">toolbox</code> to enable operations like <em>area selecting</em>, or <em>canceling selecting</em>.</p>\n<p><br>\nExample of <code class=\"codespan\">horizontal brush</code>: (Click the button in <code class=\"codespan\">toolbox</code> to enable brushing.)</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=candlestick-brush&edit=1&reset=1\" width=\"800\" height=\"500\"><iframe />\n\n\n<p><br>\nExample of <code class=\"codespan\">brush</code> in <code class=\"codespan\">bar</code> charts:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-brush&edit=1&reset=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n<p>Button for <code class=\"codespan\">brush</code> can be assigned in <a href=\"#toolbox.feature.brush.type\"><code class=\"codespan\">toolbox</code></a> or <a href=\"#brush.toolbox\"><code class=\"codespan\">brush</code> configuration</a>.</p>\n<p>The following types of brushes are supported: <code class=\"codespan\">rect</code>, <code class=\"codespan\">polygon</code>, <code class=\"codespan\">lineX</code>, <code class=\"codespan\">lineY</code>. See <a href=\"#brush.toolbox\">brush.toolbox</a> for more information.</p>\n<p><code class=\"codespan\">keep</code> button can be used to toggle a single or multiple selections.</p>\n<ul>\n<li>Only one select box is available in single selection mode, and the select-box can be removed by clicking on the blank area.</li>\n<li>Multiple select boxes are available in multiple selection mode, and the select-boxes cannot be removed by click on the blank area. Instead, you need to click the <em>clear</em> button.</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>Relationship between brush-selecting and coordinates</strong></p>\n<p><code class=\"codespan\">brush</code> can be set to be <em>global</em>, or <em>belonging to a particular coordinate</em>.</p>\n<p><strong>Global brushes</strong></p>\n<p>Selecting is enabled for everywhere in ECharts&#39;s instance in this case. This is the default situation, when brush is not set to be global.</p>\n<p><strong>Coordinate brushes</strong></p>\n<p>Selecting is enabled only in the assigned coordinates in this case. Selecting-box will be altered according to scaling and translating of coordinate (see <code class=\"codespan\">roam</code> and <code class=\"codespan\">dataZoom</code>).</p>\n<p>In practice, you may often find coordinate brush to be a more frequently made choice, particularly in <code class=\"codespan\">geo</code> charts.</p>\n<p>By assigning <a href=\"#brush.geoIndex\">brush.geoIndex</a>, or <a href=\"#brush.xAxisIndex\">brush.xAxisIndex</a>, or <a href=\"#brush.yAxisIndex\">brush.yAxisIndex</a>, brush selecting axes can be assigned, whose value can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;all&#39;</code>: for all axes;</li>\n<li><code class=\"codespan\">number</code>: like <code class=\"codespan\">0</code>, for a particular coordinate with that index;</li>\n<li><code class=\"codespan\">Array</code>: like <code class=\"codespan\">[0, 4, 2]</code>, for coordinates with those indexes;</li>\n<li><code class=\"codespan\">&#39;none&#39;</code>, or <code class=\"codespan\">null</code>, or <code class=\"codespan\">undefined</code>: for not assigning.</li>\n</ul>\n<p>Example:</p>\n<pre><code class=\"lang-javascript\">option = {\n    geo: {\n        ...\n    },\n    brush: {\n        geoIndex: &#39;all&#39;, // brush selecting is enabled only in all geo charts above\n        ...\n    }\n};\n</code></pre>\n<p>Example:</p>\n<pre><code class=\"lang-javascript\">option = {\n    grid: [\n        {...}, // grid 0\n        {...}  // grid 1\n    ],\n    xAxis: [\n        {gridIndex: 1, ...}, // xAxis 0 for grid 1\n        {gridIndex: 0, ...}  // xAxis 1 for grid 0\n    ],\n    yAxis: [\n        {gridIndex: 1, ...}, // yAxis 0 for grid 1\n        {gridIndex: 0, ...}  // yAxis 1 for grid 0\n    ],\n    brush: {\n        xAxisIndex: [0, 1], // brush selecting is enabled only in coordinates with xAxisIndex as `0` or `1`\n        ...\n    }\n};\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>Control select-box with API</strong></p>\n<p><code class=\"codespan\">dispatchAction</code> can be used to render select-box programatically. For example:</p>\n<pre><code class=\"lang-javascript\">myChart.dispatchAction({\n    type: &#39;brush&#39;,\n    areas: [\n        {\n            geoIndex: 0,\n            // Assign select-box type\n            brushType: &#39;polygon&#39;,\n            // Assign select-box shape\n            coordRange: [[119.72,34.85],[119.68,34.85],[119.5,34.84],[119.19,34.77]]\n        }\n    ]\n});\n</code></pre>\n<p>Please refer to <a href=\"api.html#action.brush\" target=\"_blank\">action.brush</a> for more information.</p>\n<p><br></p>\n<hr>\n<p><strong>brushLink</strong></p>\n<p>Links interaction between selected items in different series.</p>\n<p>Following is an example of enabling selected effect for <code class=\"codespan\">scatter</code> and <code class=\"codespan\">parallel</code> charts once a scatter chart is selected.</p>\n<p><code class=\"codespan\">brushLink</code> is an array of <code class=\"codespan\">seriesIndex</code>es, which assignes the series that can be interacted. For example, it can be:</p>\n<ul>\n<li><code class=\"codespan\">[3, 4, 5]</code> for interacting series with seriesIndex as <code class=\"codespan\">3</code>, <code class=\"codespan\">4</code>, or <code class=\"codespan\">5</code>;</li>\n<li><code class=\"codespan\">&#39;all&#39;</code> for interacting all series;</li>\n<li><code class=\"codespan\">&#39;none&#39;</code>, or <code class=\"codespan\">null</code>, or <code class=\"codespan\">undefined</code> for disabling <code class=\"codespan\">brushLink</code>.</li>\n</ul>\n<p><strong>Attention</strong></p>\n<p><code class=\"codespan\">brushLink</code> is a mapping of <code class=\"codespan\">dataIndex</code>. So <strong><code class=\"codespan\">data</code> of every series with <code class=\"codespan\">brushLink</code> should be guaranteed to correspond to the other</strong>.</p>\n<p>Example:</p>\n<pre><code class=\"lang-javascript\">option = {\n    brush: {\n        brushLink: [0, 1]\n    },\n    series: [\n        {\n            type: &#39;bar&#39;\n            data: [232,    4434,    545,      654]     // data has 4 items\n        },\n        {\n            type: &#39;parallel&#39;,\n            data: [[4, 5], [3, 5], [66, 33], [99, 66]] // data also has 4 items, which correspond to the data above\n        }\n    ]\n};\n</code></pre>\n<p>Please refer to <a href=\"#brush.brushLink\">brush.brushLink</a>.</p>\n<p><br></p>\n<hr>\n<p><strong>throttle / debounce</strong></p>\n<p>By default, <code class=\"codespan\">brushSelected</code> is always triggered when selection-box is selected or moved, to tell the outside about the event.</p>\n<p>But efficiency problems may occur when events are triggered too frequently, or the animation result may be affected. So brush components provides <a href=\"#brush.throttleType\">brush.throttleType</a> and <a href=\"#brush.throttleDelay\">brush.throttleDelay</a> to solve this problem.</p>\n<p>Valid <code class=\"codespan\">throttleType</code> values can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;debounce&#39;</code>: for triggering events only when the action has been stopped (no action after some duration). Time threshold can be assigned with <a href=\"#brush.throttleDelay\">brush.throttleDelay</a>;</li>\n<li><code class=\"codespan\">&#39;fixRate&#39;</code>: for triggering event with a certain frequency. The frequency can be assigned with <a href=\"#brush.throttleDelay\">brush.throttleDelay</a>.</li>\n</ul>\n<p>In this <a href=\"https://echarts.apache.org/examples/zh/view.html?c=scatter-map-brush&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>, <code class=\"codespan\">debounce</code> is used to make sure the bar chart is updated only when the user has stopped action. In other cases, the animation result may not be so good.</p>\n<p><br></p>\n<hr>\n<p><strong>Visual configurations of selected and unselected items</strong></p>\n<p>Refer to <a href=\"#brush.inBrush\">brush.inBrush</a> and <a href=\"#brush.outOfBrush\">brush.outOfBrush</a>.</p>\n<p><br></p>\n<hr>\n<p>Here is the configuration in detail.</p>\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"toolbox":{"type":["Array"],"description":"<p>Use the buttons in toolbox.</p>\n<p>Buttons in toolbox that is related to brush includes:</p>\n<ul>\n<li><code class=\"codespan\">&#39;rect&#39;</code>: for selection-box in rectangle shape;</li>\n<li><code class=\"codespan\">&#39;polygon&#39;</code>: for selection-box in polygon shape;</li>\n<li><code class=\"codespan\">&#39;lineX&#39;</code>: for horizontal selection-box;</li>\n<li><code class=\"codespan\">&#39;lineY&#39;</code>: for vertical selection-box;</li>\n<li><code class=\"codespan\">&#39;keep&#39;</code>: for setting mode between <code class=\"codespan\">single</code> and <code class=\"codespan\">multiple</code> selection, the former of which supports clearing selection on click, and the latter selecting multiple areas;</li>\n<li><code class=\"codespan\">&#39;clear&#39;</code>: for clearing all selections.</li>\n</ul>\n","default":"['rect', 'polygon', 'keep', 'clear']"},"brushLink":{"type":["Array","string"],"description":"<p>Links interaction between selected items in different series.</p>\n<p>Following is an example of enabling selected effect for <code class=\"codespan\">scatter</code> and <code class=\"codespan\">parallel</code> charts once a scatter chart is selected.</p>\n<p><code class=\"codespan\">brushLink</code> is an array of <code class=\"codespan\">seriesIndex</code>es, which assignes the series that can be interacted. For example, it can be:</p>\n<ul>\n<li><code class=\"codespan\">[3, 4, 5]</code> for interacting series with seriesIndex as <code class=\"codespan\">3</code>, <code class=\"codespan\">4</code>, or <code class=\"codespan\">5</code>;</li>\n<li><code class=\"codespan\">&#39;all&#39;</code> for interacting all series;</li>\n<li><code class=\"codespan\">&#39;none&#39;</code>, or <code class=\"codespan\">null</code>, or <code class=\"codespan\">undefined</code> for disabling <code class=\"codespan\">brushLink</code>.</li>\n</ul>\n<p><strong>Attention</strong></p>\n<p><code class=\"codespan\">brushLink</code> is a mapping of <code class=\"codespan\">dataIndex</code>. So <strong><code class=\"codespan\">data</code> of every series with <code class=\"codespan\">brushLink</code> should be guaranteed to correspond to the other</strong>.</p>\n<p>Example:</p>\n<pre><code class=\"lang-javascript\">option = {\n    brush: {\n        brushLink: [0, 1]\n    },\n    series: [\n        {\n            type: &#39;bar&#39;\n            data: [232,    4434,    545,      654]     // data has 4 items\n        },\n        {\n            type: &#39;parallel&#39;,\n            data: [[4, 5], [3, 5], [66, 33], [99, 66]] // data also has 4 items, which correspond to the data above\n        }\n    ]\n};\n</code></pre>\n","default":null},"seriesIndex":{"type":["Array","number","string"],"description":"<p>Assigns which of the series can use brush selecting, whose value can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;all&#39;</code>: all series;</li>\n<li><code class=\"codespan\">&#39;Array&#39;</code>: series index array;</li>\n<li><code class=\"codespan\">&#39;number&#39;</code>: certain series index.</li>\n</ul>\n","default":"'all'"},"geoIndex":{"type":["Array","number","string"],"description":"<p>Assigns which of the geo can use brush selecting.</p>\n<p><code class=\"codespan\">brush</code> can be set to be <em>global</em>, or <em>belonging to a particular coordinate</em>.</p>\n<p><strong>Global brushes</strong></p>\n<p>Selecting is enabled for everywhere in ECharts&#39;s instance in this case. This is the default situation, when brush is not set to be global.</p>\n<p><strong>Coordinate brushes</strong></p>\n<p>Selecting is enabled only in the assigned coordinates in this case. Selecting-box will be altered according to scaling and translating of coordinate (see <code class=\"codespan\">roam</code> and <code class=\"codespan\">dataZoom</code>).</p>\n<p>In practice, you may often find coordinate brush to be a more frequently made choice, particularly in <code class=\"codespan\">geo</code> charts.</p>\n<p>By assigning <a href=\"#brush.geoIndex\">brush.geoIndex</a>, or <a href=\"#brush.xAxisIndex\">brush.xAxisIndex</a>, or <a href=\"#brush.yAxisIndex\">brush.yAxisIndex</a>, brush selecting axes can be assigned, whose value can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;all&#39;</code>: for all axes;</li>\n<li><code class=\"codespan\">number</code>: like <code class=\"codespan\">0</code>, for a particular coordinate with that index;</li>\n<li><code class=\"codespan\">Array</code>: like <code class=\"codespan\">[0, 4, 2]</code>, for coordinates with those indexes;</li>\n<li><code class=\"codespan\">&#39;none&#39;</code>, or <code class=\"codespan\">null</code>, or <code class=\"codespan\">undefined</code>: for not assigning.</li>\n</ul>\n<p>Example:</p>\n<pre><code class=\"lang-javascript\">option = {\n    geo: {\n        ...\n    },\n    brush: {\n        geoIndex: &#39;all&#39;, // brush selecting is enabled only in all geo charts above\n        ...\n    }\n};\n</code></pre>\n<p>Example:</p>\n<pre><code class=\"lang-javascript\">option = {\n    grid: [\n        {...}, // grid 0\n        {...}  // grid 1\n    ],\n    xAxis: [\n        {gridIndex: 1, ...}, // xAxis 0 for grid 1\n        {gridIndex: 0, ...}  // xAxis 1 for grid 0\n    ],\n    yAxis: [\n        {gridIndex: 1, ...}, // yAxis 0 for grid 1\n        {gridIndex: 0, ...}  // yAxis 1 for grid 0\n    ],\n    brush: {\n        xAxisIndex: [0, 1], // brush selecting is enabled only in coordinates with xAxisIndex as `0` or `1`\n        ...\n    }\n};\n</code></pre>\n","default":null},"xAxisIndex":{"type":["Array","number","string"],"description":"<p>Assigns which of the xAxisIndex can use brush selecting.</p>\n<p><code class=\"codespan\">brush</code> can be set to be <em>global</em>, or <em>belonging to a particular coordinate</em>.</p>\n<p><strong>Global brushes</strong></p>\n<p>Selecting is enabled for everywhere in ECharts&#39;s instance in this case. This is the default situation, when brush is not set to be global.</p>\n<p><strong>Coordinate brushes</strong></p>\n<p>Selecting is enabled only in the assigned coordinates in this case. Selecting-box will be altered according to scaling and translating of coordinate (see <code class=\"codespan\">roam</code> and <code class=\"codespan\">dataZoom</code>).</p>\n<p>In practice, you may often find coordinate brush to be a more frequently made choice, particularly in <code class=\"codespan\">geo</code> charts.</p>\n<p>By assigning <a href=\"#brush.geoIndex\">brush.geoIndex</a>, or <a href=\"#brush.xAxisIndex\">brush.xAxisIndex</a>, or <a href=\"#brush.yAxisIndex\">brush.yAxisIndex</a>, brush selecting axes can be assigned, whose value can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;all&#39;</code>: for all axes;</li>\n<li><code class=\"codespan\">number</code>: like <code class=\"codespan\">0</code>, for a particular coordinate with that index;</li>\n<li><code class=\"codespan\">Array</code>: like <code class=\"codespan\">[0, 4, 2]</code>, for coordinates with those indexes;</li>\n<li><code class=\"codespan\">&#39;none&#39;</code>, or <code class=\"codespan\">null</code>, or <code class=\"codespan\">undefined</code>: for not assigning.</li>\n</ul>\n<p>Example:</p>\n<pre><code class=\"lang-javascript\">option = {\n    geo: {\n        ...\n    },\n    brush: {\n        geoIndex: &#39;all&#39;, // brush selecting is enabled only in all geo charts above\n        ...\n    }\n};\n</code></pre>\n<p>Example:</p>\n<pre><code class=\"lang-javascript\">option = {\n    grid: [\n        {...}, // grid 0\n        {...}  // grid 1\n    ],\n    xAxis: [\n        {gridIndex: 1, ...}, // xAxis 0 for grid 1\n        {gridIndex: 0, ...}  // xAxis 1 for grid 0\n    ],\n    yAxis: [\n        {gridIndex: 1, ...}, // yAxis 0 for grid 1\n        {gridIndex: 0, ...}  // yAxis 1 for grid 0\n    ],\n    brush: {\n        xAxisIndex: [0, 1], // brush selecting is enabled only in coordinates with xAxisIndex as `0` or `1`\n        ...\n    }\n};\n</code></pre>\n","default":null},"yAxisIndex":{"type":["Array","number","string"],"description":"<p>Assigns which of the yAxisIndex can use brush selecting.</p>\n<p><code class=\"codespan\">brush</code> can be set to be <em>global</em>, or <em>belonging to a particular coordinate</em>.</p>\n<p><strong>Global brushes</strong></p>\n<p>Selecting is enabled for everywhere in ECharts&#39;s instance in this case. This is the default situation, when brush is not set to be global.</p>\n<p><strong>Coordinate brushes</strong></p>\n<p>Selecting is enabled only in the assigned coordinates in this case. Selecting-box will be altered according to scaling and translating of coordinate (see <code class=\"codespan\">roam</code> and <code class=\"codespan\">dataZoom</code>).</p>\n<p>In practice, you may often find coordinate brush to be a more frequently made choice, particularly in <code class=\"codespan\">geo</code> charts.</p>\n<p>By assigning <a href=\"#brush.geoIndex\">brush.geoIndex</a>, or <a href=\"#brush.xAxisIndex\">brush.xAxisIndex</a>, or <a href=\"#brush.yAxisIndex\">brush.yAxisIndex</a>, brush selecting axes can be assigned, whose value can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;all&#39;</code>: for all axes;</li>\n<li><code class=\"codespan\">number</code>: like <code class=\"codespan\">0</code>, for a particular coordinate with that index;</li>\n<li><code class=\"codespan\">Array</code>: like <code class=\"codespan\">[0, 4, 2]</code>, for coordinates with those indexes;</li>\n<li><code class=\"codespan\">&#39;none&#39;</code>, or <code class=\"codespan\">null</code>, or <code class=\"codespan\">undefined</code>: for not assigning.</li>\n</ul>\n<p>Example:</p>\n<pre><code class=\"lang-javascript\">option = {\n    geo: {\n        ...\n    },\n    brush: {\n        geoIndex: &#39;all&#39;, // brush selecting is enabled only in all geo charts above\n        ...\n    }\n};\n</code></pre>\n<p>Example:</p>\n<pre><code class=\"lang-javascript\">option = {\n    grid: [\n        {...}, // grid 0\n        {...}  // grid 1\n    ],\n    xAxis: [\n        {gridIndex: 1, ...}, // xAxis 0 for grid 1\n        {gridIndex: 0, ...}  // xAxis 1 for grid 0\n    ],\n    yAxis: [\n        {gridIndex: 1, ...}, // yAxis 0 for grid 1\n        {gridIndex: 0, ...}  // yAxis 1 for grid 0\n    ],\n    brush: {\n        xAxisIndex: [0, 1], // brush selecting is enabled only in coordinates with xAxisIndex as `0` or `1`\n        ...\n    }\n};\n</code></pre>\n","default":null},"brushType":{"type":["string"],"description":"<p>Default type of brush.</p>\n<ul>\n<li><code class=\"codespan\">&#39;rect&#39;</code>: for selection-box in rectangle shape;</li>\n<li><code class=\"codespan\">&#39;polygon&#39;</code>: for selection-box in polygon shape;</li>\n<li><code class=\"codespan\">&#39;lineX&#39;</code>: for horizontal selection-box;</li>\n<li><code class=\"codespan\">&#39;lineY&#39;</code>: for vertical selection-box;</li>\n</ul>\n","default":"'rect'"},"brushMode":{"type":["string"],"description":"<p>Default brush mode, whose value can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;single&#39;</code>: for single selection;</li>\n<li><code class=\"codespan\">&#39;multiple&#39;</code>: for multiple selection.</li>\n</ul>\n","default":"'single'"},"transformable":{"type":["boolean"],"description":"<p>Determines whether a selected box can be changed in shape or translated.</p>\n","default":true},"brushStyle":{"type":["Object"],"description":"<p>Default brush style, whose value is:</p>\n<pre><code class=\"lang-javascript\">{\n    borderWidth: 1,\n    color: &#39;rgba(120,140,180,0.3)&#39;,\n    borderColor: &#39;rgba(120,140,180,0.8)&#39;\n},\n</code></pre>\n"},"throttleType":{"type":["string"],"description":"<p>By default, <code class=\"codespan\">brushSelected</code> is always triggered when selection-box is selected or moved, to tell the outside about the event.</p>\n<p>But efficiency problems may occur when events are triggered too frequently, or the animation result may be affected. So brush components provides <a href=\"#brush.throttleType\">brush.throttleType</a> and <a href=\"#brush.throttleDelay\">brush.throttleDelay</a> to solve this problem.</p>\n<p>Valid <code class=\"codespan\">throttleType</code> values can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;debounce&#39;</code>: for triggering events only when the action has been stopped (no action after some duration). Time threshold can be assigned with <a href=\"#brush.throttleDelay\">brush.throttleDelay</a>;</li>\n<li><code class=\"codespan\">&#39;fixRate&#39;</code>: for triggering event with a certain frequency. The frequency can be assigned with <a href=\"#brush.throttleDelay\">brush.throttleDelay</a>.</li>\n</ul>\n<p>In this <a href=\"https://echarts.apache.org/examples/zh/view.html?c=scatter-map-brush&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>, <code class=\"codespan\">debounce</code> is used to make sure the bar chart is updated only when the user has stopped action. In other cases, the animation result may not be so good.</p>\n","default":"'fixRate'"},"throttleDelay":{"type":["number"],"description":"<p><code class=\"codespan\">0</code> for disabling throttle.</p>\n<p>By default, <code class=\"codespan\">brushSelected</code> is always triggered when selection-box is selected or moved, to tell the outside about the event.</p>\n<p>But efficiency problems may occur when events are triggered too frequently, or the animation result may be affected. So brush components provides <a href=\"#brush.throttleType\">brush.throttleType</a> and <a href=\"#brush.throttleDelay\">brush.throttleDelay</a> to solve this problem.</p>\n<p>Valid <code class=\"codespan\">throttleType</code> values can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;debounce&#39;</code>: for triggering events only when the action has been stopped (no action after some duration). Time threshold can be assigned with <a href=\"#brush.throttleDelay\">brush.throttleDelay</a>;</li>\n<li><code class=\"codespan\">&#39;fixRate&#39;</code>: for triggering event with a certain frequency. The frequency can be assigned with <a href=\"#brush.throttleDelay\">brush.throttleDelay</a>.</li>\n</ul>\n<p>In this <a href=\"https://echarts.apache.org/examples/zh/view.html?c=scatter-map-brush&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>, <code class=\"codespan\">debounce</code> is used to make sure the bar chart is updated only when the user has stopped action. In other cases, the animation result may not be so good.</p>\n","default":0},"removeOnClick":{"type":["boolean"],"description":"<p>Defined whether <em>clearing all select-boxes on click</em> is enabled when <a href=\"#brush.brushMode\">brush.brushMode</a> is <code class=\"codespan\">&#39;single&#39;</code>.</p>\n","default":true},"inBrush":{"type":["Object"],"description":"<p>Defines visual effects of items in selection.</p>\n<p>Available visual effects include:</p>\n<ul>\n<li><code class=\"codespan\">symbol</code>: Type of symbol.</li>\n<li><code class=\"codespan\">symbolSize</code>: Symbol size.</li>\n<li><code class=\"codespan\">color</code>: Symbol color.</li>\n<li><code class=\"codespan\">colorAlpha</code>: Symbol alpha channel.</li>\n<li><code class=\"codespan\">opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code class=\"codespan\">colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<p>In most cases, inBrush can be left unassigned, in which case default visual configuration remains.</p>\n"},"outOfBrush":{"type":["Object"],"description":"<p>Defines visual effects of items out of selection.</p>\n<p>Available visual effects include:</p>\n<ul>\n<li><code class=\"codespan\">symbol</code>: Type of symbol.</li>\n<li><code class=\"codespan\">symbolSize</code>: Symbol size.</li>\n<li><code class=\"codespan\">color</code>: Symbol color.</li>\n<li><code class=\"codespan\">colorAlpha</code>: Symbol alpha channel.</li>\n<li><code class=\"codespan\">opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code class=\"codespan\">colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<p><strong>Note:</strong> If <code class=\"codespan\">outOfBrush</code> is not assigned, <code class=\"codespan\">color</code> will be set to be <code class=\"codespan\">&#39;#ddd&#39;</code> by default. If the color is not desired, you can use:</p>\n<pre><code class=\"lang-javascript\">brush: {\n    ...,\n    outOfBrush: {\n        colorAlpha: 0.1\n    }\n}\n</code></pre>\n"},"z":{"type":["number"],"description":"<p>z-index of brush cover box. It can be adjust when incorrect overlap occurs.</p>\n","default":10000}}},"geo":{"type":["Object"],"description":"<p>Geographic coorinate system component.</p>\n<p>Geographic coorinate system component is used to draw maps, which also supports <a href=\"#series-scatter\">scatter series</a>, and <a href=\"#series-lines\">line series</a>.</p>\n<p>From <code class=\"codespan\">3.1.10</code>, geo component also supports mouse events, whose parameters are:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;geo&#39;,\n    // geo component&#39;s index in option\n    geoIndex: number,\n    // name of clicking area, e.g., Shanghai\n    name: string,\n    // clicking region object as input, see geo.regions\n    region: Object\n}\n</code></pre>\n<p><strong>Tip:</strong>\nThe region color can also be controlled by map series. See <a href=\"#series-map.geoIndex\">series-map.geoIndex</a>.</p>\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"show":{"type":["boolean"],"description":"<p>Whether to show the geo component.</p>\n","default":true},"map":{"type":["string"],"description":"<p>Map charts.</p>\n<p>Due to the increase of fineness of map, ECharts 3 doesn&#39;t include map data by default for package size consideration. You may find map files you need on <a href=\"http://ecomfe.github.io/echarts-builder-web/map3.html\" target=\"_blank\">map download page</a> and then include and register them in ECharts.</p>\n<p>Two formats of map data are provided in ECharts, one of which can be included in <code class=\"codespan\">&lt;script&gt;</code> tag as JavaScript file, and the other of is in JSON format and should be loaded using AJAX. Map name and data will be loaded automatically once the JavaScript file is loaded, while in the JSON form, you have to assign name explicitly.</p>\n<p>Here are examples of these two types:</p>\n<p><strong> JavaScript importing example </strong></p>\n<pre><code class=\"lang-html\">&lt;script src=&quot;echarts.js&quot;&gt;&lt;/script&gt;\n&lt;script src=&quot;map/js/china.js&quot;&gt;&lt;/script&gt;\n&lt;script&gt;\nvar chart = echarts.init(document.getElmentById(&#39;main&#39;));\nchart.setOption({\n    series: [{\n        type: &#39;map&#39;,\n        map: &#39;china&#39;\n    }]\n});\n&lt;/script&gt;\n</code></pre>\n<p><strong> JSON importing example </strong></p>\n<pre><code class=\"lang-js\">$.get(&#39;map/json/china.json&#39;, function (chinaJson) {\n    echarts.registerMap(&#39;china&#39;, chinaJson);\n    var chart = echarts.init(document.getElmentById(&#39;main&#39;));\n    chart.setOption({\n        series: [{\n            type: &#39;map&#39;,\n            map: &#39;china&#39;\n        }]\n    });\n});\n</code></pre>\n<p>ECharts uses <a href=\"http://geojson.org/\" target=\"_blank\">geoJSON</a> format as map outline. Besides the methods introduced above, you can also get <a href=\"http://geojson.org/\" target=\"_blank\">geoJSON</a> data through in other methods if you like and register it in ECharts. Reference to <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=map-usa\" target=\"_blank\">USA Population Estimates</a> for more information.</p>\n","default":"''"},"roam":{"type":["boolean","string"],"description":"<p>Whether to enable mouse zooming and translating. <code class=\"codespan\">false</code> by default. If either zooming or translating is wanted, it can be set to <code class=\"codespan\">&#39;scale&#39;</code> or <code class=\"codespan\">&#39;move&#39;</code>. Otherwise, set it to be <code class=\"codespan\">true</code> to enable both.</p>\n","default":false},"center":{"type":["Array"],"description":"<p>Center of current view-port, in longitude and latitude.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">center: [115.97, 29.71]\n</code></pre>\n"},"aspectScale":{"type":["number"],"description":"<p>Used to scale aspect of geo.</p>\n<p>The final aspect is calculated by: <code class=\"codespan\">geoBoundingRect.width / geoBoundingRect.height * aspectScale</code>.</p>\n","default":0.75},"boundingCoords":{"type":["Array"],"description":"<p>Two dimension array. Define coord of left-top, right-bottom in layout box.</p>\n<pre><code class=\"lang-js\">// A complete world map\nmap: &#39;world&#39;,\nleft: 0, top: 0, right: 0, bottom: 0,\nboundingCoords: [\n    // [lng, lat] of left-top corner\n    [-180, 90],\n    // [lng, lat] of right-bottom corner\n    [180, -90]\n],\n</code></pre>\n","default":null},"zoom":{"type":["number"],"description":"<p>Zoom rate of current view-port.</p>\n","default":1},"scaleLimit":{"type":["Object"],"description":"<p>Limit of scaling, with <code class=\"codespan\">min</code> and <code class=\"codespan\">max</code>. <code class=\"codespan\">1</code> by default.</p>\n","properties":{"min":{"type":["number"],"description":"<p>Minimum scaling</p>\n"},"max":{"type":["number"],"description":"<p>Maximum scaling</p>\n"}}},"nameMap":{"type":["Object"],"description":"<p>Name mapping for customized areas. For example:</p>\n<pre><code class=\"lang-js\">{\n    &#39;China&#39; : &#39;中国&#39;\n}\n</code></pre>\n"},"nameProperty":{"type":["string"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.8.0</code></p>\n</blockquote>\n<p>customized property key for GeoJSON feature. By default, &#39;name&#39; is used as primary key to identify GeoJSON feature.\nFor example:</p>\n<pre><code class=\"lang-js\">{\n    nameProperty: &#39;NAME&#39;, // key to connect following data point to GeoJSON region {&quot;type&quot;:&quot;Feature&quot;,&quot;id&quot;:&quot;01&quot;,&quot;properties&quot;:{&quot;NAME&quot;:&quot;Alabama&quot;}, &quot;geometry&quot;: { ... }}\n    data:[\n        {name: &#39;Alabama&#39;, value: 4822023},\n        {name: &#39;Alaska&#39;, value: 731449},\n    ]\n}\n</code></pre>\n","default":"'name'"},"selectedMode":{"type":["boolean","string"],"description":"<p>Selected mode decides whether multiple selecting is supported. By default, <code class=\"codespan\">false</code> is used for disabling selection. Its value can also be <code class=\"codespan\">&#39;single&#39;</code> for selecting single area, or <code class=\"codespan\">&#39;multiple&#39;</code> for selecting multiple areas.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of Map Area Border, <code class=\"codespan\">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"areaColor":{"type":["Color"],"description":"<p>Area filling color.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#eee'"},"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"<p>Map area style in highlighted state.</p>\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"areaColor":{"type":["Color"],"description":"<p>Area filling color.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#eee'"},"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between  component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"top":{"type":["string","number"],"description":"<p>Distance between  component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"right":{"type":["string","number"],"description":"<p>Distance between  component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"<p>Distance between  component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"layoutCenter":{"type":["Array"],"description":"<p><code class=\"codespan\">layoutCenter</code> and <code class=\"codespan\">layoutSize</code> provides layout strategy other than <code class=\"codespan\">left/right/top/bottom/width/height</code>.</p>\n<p>When using <code class=\"codespan\">left/right/top/bottom/width/height</code>, it is hard to put the map inside a box area with a fixed width-height ratio. In this case, <code class=\"codespan\">layoutCenter</code> attribute can be used to define the center position of map, and <code class=\"codespan\">layoutSize</code> can be used to define the size of map. For example:</p>\n<pre><code class=\"lang-js\">layoutCenter: [&#39;30%&#39;, &#39;30%&#39;],\n// If width-height ratio is larger than 1, then width is set to be 100.\n// Otherwise, height is set to be 100.\n// This makes sure that it will not exceed the area of 100x100\nlayoutSize: 100\n</code></pre>\n<p>After setting these two values, <code class=\"codespan\">left/right/top/bottom/width/height</code> becomes invalid.</p>\n","default":null},"layoutSize":{"type":["number","string"],"description":"<p>Size of map, see <code class=\"codespan\">layoutCenter</code> for more information. Percentage relative to screen width, and absolute pixel values are supported.</p>\n"},"regions":{"type":["Array"],"description":"<p>Configure style for specified regions.\nFor example:</p>\n<pre><code class=\"lang-js\">regions: [{\n    name: &#39;Guangdong&#39;,\n    itemStyle: {\n        areaColor: &#39;red&#39;,\n        color: &#39;red&#39;\n    }\n}]\n</code></pre>\n<p>The region color can also be controlled by map series. See <a href=\"#series-map.geoIndex\">series-map.geoIndex</a>.</p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Name of area in map, like <code class=\"codespan\">&#39;Guangdong&#39;</code>, or <code class=\"codespan\">&#39;Zhejiang&#39;</code>.</p>\n"},"selected":{"type":["boolean"],"description":"<p>Whether this area is selected.</p>\n","default":false},"itemStyle":{"type":["Object"],"description":"<p>Item style of this area.</p>\n","properties":{"areaColor":{"type":["Color"],"description":"<p>Area color in the map.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"areaColor":{"type":["Color"],"description":"<p>Area color in the map.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false}}},"parallel":{"type":["Object"],"description":"<p><br></p>\n<hr>\n<p><strong>Introduction about Parallel coordinates</strong></p>\n<p><a href=\"https://en.wikipedia.org/wiki/Parallel_coordinates\" target=\"_blank\">Parallel Coordinates</a> is a common way of visualizing high-dimensional geometry and analyzing multivariate data.</p>\n<p>For example, <a href=\"#series-parallel.data\">series-parallel.data</a> is the following data:</p>\n<pre><code class=\"lang-javascript\">[\n    [1,  55,  9,   56,  0.46,  18,  6,  &#39;good&#39;],\n    [2,  25,  11,  21,  0.65,  34,  9,  &#39;excellent&#39;],\n    [3,  56,  7,   63,  0.3,   14,  5,  &#39;good&#39;],\n    [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],\n    { // Data item can also be an Object, so that perticular settings of its line can be set here.\n        value: [5,  42,  24,  44,  0.76,  40,  16, &#39;excellent&#39;]\n        lineStyle: {...},\n    }\n    ...\n]\n</code></pre>\n<p>In data above, each row is a &quot;data item&quot;, and each column represents a &quot;dimension&quot;. For example, the meanings of columns above are: &quot;data&quot;, &quot;AQI&quot;, &quot;PM2.5&quot;, &quot;PM10&quot;, &quot;carbon monoxide level&quot;, &quot;nitrogen dioxide level&quot;, and &quot;sulfur dioxide level&quot;.</p>\n<p>Parallel coordinates are often used to visualize multi-dimension data shown above. Each axis represents a dimension (namely, a column), and each line represents a data item. Data can be brush-selected on axes. For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/parallel-all&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n<hr>\n<p><strong>Brief about Configuration</strong></p>\n<p>Basic configuration parallel coordinates is shown as follow:</p>\n<pre><code class=\"lang-javascript\">option = {\n    parallelAxis: [                     // Definitions of axes.\n        {dim: 0, name: schema[0].text}, // Each axis has a &#39;dim&#39; attribute, representing dimension index in data.\n        {dim: 1, name: schema[1].text},\n        {dim: 2, name: schema[2].text},\n        {dim: 3, name: schema[3].text},\n        {dim: 4, name: schema[4].text},\n        {dim: 5, name: schema[5].text},\n        {dim: 6, name: schema[6].text},\n        {dim: 7, name: schema[7].text,\n            type: &#39;category&#39;,           // Also supports category data.\n            data: [&#39;Excellent&#39;, &#39;good&#39;, &#39;light pollution&#39;, &#39;moderate pollution&#39;, &#39;heavy pollution&#39;, &#39;severe pollution&#39;]\n        }\n    ],\n    parallel: {                         // Definition of a parallel coordinate system.\n        left: &#39;5%&#39;,                     // Location of parallel coordinate system.\n        right: &#39;13%&#39;,\n        bottom: &#39;10%&#39;,\n        top: &#39;20%&#39;,\n        parallelAxisDefault: {          // A pattern for axis definition, which can avoid repeating in `parallelAxis`.\n            type: &#39;value&#39;,\n            nameLocation: &#39;end&#39;,\n            nameGap: 20\n        }\n    },\n    series: [                           // Here the three series sharing the same parallel coordinate system.\n        {\n            name: &#39;Beijing&#39;,\n            type: &#39;parallel&#39;,           // The type of this series is &#39;parallel&#39;\n            data: [\n                [1,  55,  9,   56,  0.46,  18,  6,  &#39;good&#39;],\n                [2,  25,  11,  21,  0.65,  34,  9,  &#39;excellent&#39;],\n                ...\n            ]\n        },\n        {\n            name: &#39;Shanghai&#39;,\n            type: &#39;parallel&#39;,\n            data: [\n                [3,  56,  7,   63,  0.3,   14,  5,  &#39;good&#39;],\n                [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],\n                ...\n            ]\n        },\n        {\n            name: &#39;Guangzhou&#39;,\n            type: &#39;parallel&#39;,\n            data: [\n                [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],\n                [5,  42,  24,  44,  0.76,  40,  16, &#39;excellent&#39;],\n                ...\n            ]\n        }\n    ]\n};\n</code></pre>\n<p>Three components are involved here: <a href=\"#parallel\">parallel</a>, <a href=\"#parallelAxis\">parallelAxis</a>, <a href=\"#series-parallel\">series-parallel</a></p>\n<ul>\n<li><p><a href=\"#parallel\">parallel</a></p>\n<p>  This component is the coordinate system. One or more series (like &quot;Beijing&quot;, &quot;Shanghai&quot;, and &quot;Guangzhou&quot; in the above example) can share one coordinate system.</p>\n<p>  Like other coordinate systems, multiple parallel coordinate systems can be created in one echarts instance.</p>\n<p>  Position setting is also carried out here.</p>\n</li>\n<li><p><a href=\"#parallelAxis\">parallelAxis</a></p>\n<p>  This is axis configuration. Multiple axes are needed in parallel coordinates.</p>\n<p>  <a href=\"#parallelAxis.parallelIndex\">parallelAxis.parallelIndex</a> is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.</p>\n</li>\n<li><p><a href=\"#series-parallel\">series-parallel</a></p>\n<p>  This is the definition of parallel series, which will be drawn on parallel coordinate system.</p>\n<p>  <a href=\"#parallelAxis.parallelIndex\">parallelAxis.parallelIndex</a> is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>Notes and Best Practices</strong></p>\n<p>When configuring multiple <a href=\"#parallelAxis\">parallelAxis</a>, there might be some common attributes in each axis configuration. To avoid writing them repeatly, they can be put under <a href=\"#parallel.parallelAxisDefault\">parallel.parallelAxisDefault</a>. Before initializing axis, configurations in <a href=\"#parallel.parallelAxisDefault\">parallel.parallelAxisDefault</a> will be merged into <a href=\"#parallelAxis\">parallelAxis</a> to generate the final axis configuration.</p>\n<p><strong>If data is too large and cause bad performance</strong></p>\n<p>It is suggested to set <a href=\"#series-parallel.lineStyle.width\">series-parallel.lineStyle.width</a> to be <code class=\"codespan\">0.5</code> (or less), which may improve performance significantly.</p>\n<p><br></p>\n<hr>\n<p><strong>Display High-Dimension Data</strong></p>\n<p>When dimension number is extremely large, say, more than 50 dimensions, there will be more than 50 axes, which may hardly display in a page.</p>\n<p>In this case, you may use <a href=\"#parallel.axisExpandable\">parallel.axisExpandable</a> to improve the display. See this example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=map-parallel-prices&edit=1&reset=1\" width=\"600\" height=\"460\"><iframe />\n\n\n\n\n\n\n\n<p><br>\n<br></p>\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between parallel  component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":80},"top":{"type":["string","number"],"description":"<p>Distance between parallel  component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":60},"right":{"type":["string","number"],"description":"<p>Distance between parallel  component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n","default":80},"bottom":{"type":["string","number"],"description":"<p>Distance between parallel  component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n","default":60},"width":{"type":["string","number"],"description":"<p>Width of parallel  component. Adaptive by default.</p>\n","default":"'auto'"},"height":{"type":["string","number"],"description":"<p>Height of parallel  component. Adaptive by default.</p>\n","default":"'auto'"},"layout":{"type":["string"],"description":"<p>Layout modes, whose optional values are:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;horizontal&#39;</code>: place each axis horizontally.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;vertical&#39;</code>: place each axis vertically.</p>\n</li>\n</ul>\n","default":"'horizontal'"},"axisExpandable":{"type":["boolean"],"description":"<p>When dimension number is extremely large, say, more than 50 dimensions, there will be more than 50 axes, which may hardly display in a page.</p>\n<p>In this case, you may use <a href=\"#parallel.axisExpandable\">parallel.axisExpandable</a> to improve the display. See this example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=map-parallel-prices&edit=1&reset=1\" width=\"600\" height=\"460\"><iframe />\n\n\n\n\n<p>Whether to enable toggling axis on clicking.</p>\n","default":false},"axisExpandCenter":{"type":["number"],"description":"<p>Index of the axis which is used as the center of expanding initially. It doesn&#39;t have a default value, and needs to be assigned manually.</p>\n<p>Please refer to <a href=\"parallel.axisExpandable\" target=\"_blank\">parallel.axisExpandable</a> for more information.</p>\n","default":null},"axisExpandCount":{"type":["number"],"description":"<p>Defines how many axes are at expanding state initially. We&#39;d suggest you assign this value manually according to dimensions.</p>\n<p>Please refer to <a href=\"parallel.axisExpandCenter\" target=\"_blank\">parallel.axisExpandCenter</a> and <a href=\"parallel.axisExpandable\" target=\"_blank\">parallel.axisExpandable</a>.</p>\n","default":0},"axisExpandWidth":{"type":["number"],"description":"<p>Distance between two axes when at expanding state, in pixels.</p>\n<p>Please refer to <a href=\"parallel.axisExpandable\" target=\"_blank\">parallel.axisExpandable</a> for more information.</p>\n","default":50},"axisExpandTriggerOn":{"type":["string"],"description":"<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;click&#39;</code>: Trigger expanding when mouse clicking.</li>\n<li><code class=\"codespan\">&#39;mousemove&#39;</code>: Trigger expanding when mouse hovering.</li>\n</ul>\n","default":"'click'"},"parallelAxisDefault":{"type":["Object"],"description":"<p>When configuring multiple <a href=\"#parallelAxis\">parallelAxis</a>, there might be some common attributes in each axis configuration. To avoid writing them repeatly, they can be put under <a href=\"#parallel.parallelAxisDefault\">parallel.parallelAxisDefault</a>. Before initializing axis, configurations in <a href=\"#parallel.parallelAxisDefault\">parallel.parallelAxisDefault</a> will be merged into <a href=\"#parallelAxis\">parallelAxis</a> to generate the final axis configuration.</p>\n<p><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/parallel-all&amp;edit=1&amp;reset=1\" target=\"_blank\">See the sample</a>.</p>\n<p><br></p>\n","properties":{"type":{"type":["string"],"description":"<p>Type of axis.</p>\n<p>Option:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;value&#39;</code>\n  Numerical axis, suitable for continuous data.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;category&#39;</code>\n  Category axis, suitable for discrete category data. Category data can be auto retrieved from <a href=\"#series.data\">series.data</a> or <a href=\"#dataset.source\">dataset.source</a>, or can be specified via <a href=\"#parallelAxis.data\">parallelAxis.data</a>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;time&#39;</code>\n  Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;log&#39;</code>\n  Log axis, suitable for log data.</p>\n</li>\n</ul>\n","default":"value"},"name":{"type":["string"],"description":"<p>Name of axis.</p>\n"},"nameLocation":{"type":["string"],"description":"<p>Location of axis name.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> or <code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;end&#39;</code></li>\n</ul>\n","default":"'end'"},"nameTextStyle":{"type":["Object"],"description":"<p>Text style of axis name.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Color of axis name uses <a href=\"#parallelAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"fontStyle":{"type":["string"],"description":"<p>axis name font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p>axis name font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>axis name font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>axis name font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n\n","default":0}}}}}}},"nameGap":{"type":["number"],"description":"<p>Gap between axis name and axis line.</p>\n","default":15},"nameRotate":{"type":["number"],"description":"<p>Rotation of axis name.</p>\n","default":null},"inverse":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to invert the axis.\nThis is a new option available from Echarts 3 and newer.</p>\n","default":false},"boundaryGap":{"type":["boolean","Array"],"description":"<p>The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different.</p>\n<p>The <code class=\"codespan\">boundaryGap</code> of category axis can be set to either <code class=\"codespan\">true</code> or <code class=\"codespan\">false</code>. Default value is set to be <code class=\"codespan\">true</code>, in which case <a href=\"#parallelAxis.axisTick\">axisTick</a> is served only as a separation line, and labels and data appear only in the center part of two <a href=\"#parallelAxis.axisTick\">axis ticks</a>, which is called <em>band</em>.</p>\n<p>For non-category axis, including time, numerical value, and log axes, <code class=\"codespan\">boundaryGap</code> is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting <a href=\"#parallelAxis.min\">min</a> and <a href=\"#parallelAxis.max\">max</a>.\n<strong>Example: </strong></p>\n<pre><code class=\"lang-js\">boundaryGap: [&#39;20%&#39;, &#39;20%&#39;]\n</code></pre>\n"},"min":{"type":["number","string","Function"],"description":"<p>The minimun value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">&#39;dataMin&#39;</code> so that the minimum value on this axis is set to be the minimum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class=\"codespan\">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class=\"codespan\">2</code> represents <code class=\"codespan\">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class=\"codespan\">-3</code>.</p>\n<p>If <code class=\"codespan\">min</code> is specified as a function, it should return a min value, like:</p>\n<pre><code class=\"lang-js\">min: function (value) {\n    return value.min - 20;\n}\n</code></pre>\n<p><code class=\"codespan\">value</code> is an object, containing the <code class=\"codespan\">min</code> value and <code class=\"codespan\">max</code> value of the data. This function should return the min value of axis, or return <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> to make echarts use the auto calculated min value (<code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> return is only supported since <code class=\"codespan\">v4.8.0</code>).</p>\n","default":null},"max":{"type":["number","string","Function"],"description":"<p>The maximum value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">&#39;dataMax&#39;</code> so that the minimum value on this axis is set to be the maximum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class=\"codespan\">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class=\"codespan\">2</code> represents <code class=\"codespan\">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class=\"codespan\">-3</code>.</p>\n<p>If <code class=\"codespan\">max</code> is specified as a function, it should return a max value, like:</p>\n<pre><code class=\"lang-js\">max: function (value) {\n    return value.max - 20;\n}\n</code></pre>\n<p><code class=\"codespan\">value</code> is an object, containing the <code class=\"codespan\">min</code> value and <code class=\"codespan\">max</code> value of the data. This function should return the max value of axis, or return <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> to make echarts use the auto calculated max value (<code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> return is only supported since <code class=\"codespan\">v4.8.0</code>).</p>\n","default":null},"scale":{"type":["boolean"],"description":"<p>It is available only in numerical axis, i.e., <a href=\"#parallelAxis.type\">type</a>: &#39;value&#39;.</p>\n<p>It specifies whether not to contain zero position of axis compulsively. When it is set to be <code class=\"codespan\">true</code>, the axis may not contain zero position, which is useful in the scatter chart for both value axes.</p>\n<p>This configuration item is unavailable when the <a href=\"#parallelAxis.min\">min</a> and <a href=\"#parallelAxis.max\">max</a> are set.</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.</p>\n<p>This is unavailable for category axis.</p>\n","default":5},"minInterval":{"type":["number"],"description":"<p>Minimum gap between split lines.</p>\n<p>For example, it can be set to be <code class=\"codespan\">1</code> to make sure axis label is show as integer.</p>\n<pre><code class=\"lang-js\">{\n    minInterval: 1\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#parallelAxis.type\">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n","default":0},"maxInterval":{"type":["number"],"description":"<p>Maximum gap between split lines.</p>\n<p>For example, in time axis (<a href=\"#parallelAxis.type\">type</a> is &#39;time&#39;), it can be set to be <code class=\"codespan\">3600 * 24 * 1000</code> to make sure that the gap between axis labels is less than or equal to one day.</p>\n<pre><code class=\"lang-js\">{\n    maxInterval: 3600 * 1000 * 24\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#parallelAxis.type\">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n"},"interval":{"type":["number"],"description":"<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href=\"#parallelAxis.splitNumber\">splitNumber</a> is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with <a href=\"#parallelAxis.min\">min</a> and <a href=\"#parallelAxis.max\">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situations.</p>\n<p>This is unavailable for category axis. Timestamp should be passed for <a href=\"#parallelAxis.type\">type</a>: &#39;time&#39; axis. Logged value should be passed for <a href=\"#parallelAxis.type\">type</a>: &#39;log&#39; axis.</p>\n"},"logBase":{"type":["number"],"description":"<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#parallelAxis.type\">type</a>: &#39;log&#39;.</p>\n","default":10},"silent":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code>, to prevent interaction with the axis.</p>\n","default":false},"triggerEvent":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to enable triggering events.</p>\n<p>Parameters of the event include:</p>\n<pre><code class=\"lang-js\">{\n    // Component type: xAxis, yAxis, radiusAxis, angleAxis\n    // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n    componentType: string,\n    // Value on axis before being formatted.\n    // Click on value label to trigger event.\n    value: &#39;&#39;,\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: &#39;&#39;\n}\n</code></pre>\n","default":false},"axisLine":{"type":["Object"],"description":"<p>Settings related to axis line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n","default":true},"symbol":{"type":["string","Array"],"description":"<p>Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It&#39;s set to be <code class=\"codespan\">&#39;none&#39;</code> by default, meaning no arrow for either end. If it is set to be <code class=\"codespan\">&#39;arrow&#39;</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code class=\"codespan\">[&#39;none&#39;, &#39;arrow&#39;]</code>.</p>\n","default":"'none'"},"symbolSize":{"type":["Array"],"description":"<p>Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.</p>\n","default":"[10, 15]"},"symbolOffset":{"type":["Array","number"],"description":"<p>Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>line styleLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#333'"},"width":{"type":["number"],"description":"<p>line style line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>line style line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"axisTick":{"type":["Object"],"description":"<p>Settings related to axis tick.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis tick from showing.</p>\n","default":true},"alignWithLabel":{"type":["boolean"],"description":"<p>Align axis tick with label, which is available only when <code class=\"codespan\">boundaryGap</code> is set to be <code class=\"codespan\">true</code> in category axis. See the following picture:</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/axis-align-with-label.png\"></p>\n","default":false},"interval":{"type":["number","Function"],"description":"<p>Interval of axisTick, which is available in category axis.  is set to be the same as <a href=\"#parallelAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> so the axis labels face the <code class=\"codespan\">inside</code> direction.</p>\n","default":false},"length":{"type":["number"],"description":"<p>The length of the axis tick.</p>\n","default":5},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Color of axis label is set to be <a href=\"#parallelAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"width":{"type":["number"],"description":"<p>axisTick line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>axisTick line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"minorTick":{"type":["Object"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.6.0</code></p>\n</blockquote>\n<p>Settings related minor ticks.</p>\n<p>Note: <code class=\"codespan\">minorTick</code> is not available in the <code class=\"codespan\">category</code> type axis.</p>\n<p>Examples:</p>\n<p>1) Using minor ticks in function plotting.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-function&edit=1&reset=1\" width=\"600\" height=\"350\"><iframe />\n\n\n<p>2) Using minor ticks in log axis.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-log&edit=1&reset=1\" width=\"600\" height=\"350\"><iframe />\n\n\n","properties":{"show":{"type":["boolean"],"description":"<p>If show minor ticks.</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>Number of interval splited by minor ticks.</p>\n","default":5},"length":{"type":["number"],"description":"<p>Length of minor ticks lines。</p>\n","default":3},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Style configuration of minor ticks lines <a href=\"#parallelAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。</p>\n"},"width":{"type":["number"],"description":"<p>minorTick line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>minorTick line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"axisLabel":{"type":["Object"],"description":"<p>Settings related to axis label.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis label from appearing.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>Interval of Axis label, which is available in category axis. </p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> so the axis labels face the <code class=\"codespan\">inside</code> direction.</p>\n","default":false},"rotate":{"type":["number"],"description":"<p>Rotation degree of axis label, which is especially useful when there is no enough space for category axis.</p>\n<p>Rotation degree is from -90 to 90.</p>\n","default":0},"margin":{"type":["number"],"description":"<p>The margin between the axis label and the axis line.</p>\n","default":8},"formatter":{"type":["string","Function"],"description":"<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Use string template; template variable is the default label of axis {value}\nformatter: &#39;{value} kg&#39;\n\n// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (idx === 0) {\n        texts.unshift(date.getYear());\n    }\n    return texts.join(&#39;/&#39;);\n}\n</code></pre>\n","default":null},"showMinLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the min tick. Optional values: <code class=\"codespan\">true</code>, <code class=\"codespan\">false</code>, <code class=\"codespan\">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.</p>\n","default":null},"showMaxLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the max tick. Optional values: <code class=\"codespan\">true</code>, <code class=\"codespan\">false</code>, <code class=\"codespan\">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.</p>\n","default":null},"color":{"type":["Color","Function"],"description":"<p>Color of axis label is set to be <a href=\"#parallelAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class=\"lang-js\">(val: string) =&gt; Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class=\"lang-js\">textStyle: {\n    color: function (value, index) {\n        return value &gt;= 0 ? &#39;green&#39; : &#39;red&#39;;\n    }\n}\n</code></pre>\n"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n\n","default":0}}}}}}},"data":{"type":["Array"],"description":"<p>Category data, available in <a href=\"#parallelAxis.type\">type</a>: &#39;category&#39; axis.</p>\n<p>If <a href=\"#parallelAxis.type\">type</a> is not specified, but <code class=\"codespan\">axis.data</code> is specified, the <a href=\"#parallelAxis.type\">type</a> is auto set as <code class=\"codespan\">&#39;category&#39;</code>.</p>\n<p>If <a href=\"#parallelAxis.type\">type</a> is specified as <code class=\"codespan\">&#39;category&#39;</code>, but <code class=\"codespan\">axis.data</code> is not specified, <code class=\"codespan\">axis.data</code> will be auto collected from <a href=\"#series.data\">series.data</a>. It brings convenience, but we should notice that <code class=\"codespan\">axis.data</code> provides then value range of the <code class=\"codespan\">&#39;category&#39;</code> axis. If  it is auto collected from <a href=\"#series.data\">series.data</a>, Only the values appearing in <a href=\"#series.data\">series.data</a> can be collected. For example, if <a href=\"#series.data\">series.data</a> is empty, nothing will be collected.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Name list of all categories\ndata: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n// Each item could also be a specific configuration item.\n// In this case, `value` is used as the category name.\ndata: [{\n    value: &#39;Monday&#39;,\n    // Highlight Monday\n    textStyle: {\n        fontSize: 20,\n        color: &#39;red&#39;\n    }\n}, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n</code></pre>\n","items":{"type":"Object","properties":{"value":{"type":["string"],"description":"<p>Name of a category.</p>\n"},"textStyle":{"type":["Object"],"description":"<p>Text style of the category.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}}},"parallelAxis":{"type":["Object"],"description":"<p>This component is the coordinate axis for parallel coordinate.</p>\n<p><br></p>\n<hr>\n<p><strong>Introduction about Parallel coordinates</strong></p>\n<p><a href=\"https://en.wikipedia.org/wiki/Parallel_coordinates\" target=\"_blank\">Parallel Coordinates</a> is a common way of visualizing high-dimensional geometry and analyzing multivariate data.</p>\n<p>For example, <a href=\"#series-parallel.data\">series-parallel.data</a> is the following data:</p>\n<pre><code class=\"lang-javascript\">[\n    [1,  55,  9,   56,  0.46,  18,  6,  &#39;good&#39;],\n    [2,  25,  11,  21,  0.65,  34,  9,  &#39;excellent&#39;],\n    [3,  56,  7,   63,  0.3,   14,  5,  &#39;good&#39;],\n    [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],\n    { // Data item can also be an Object, so that perticular settings of its line can be set here.\n        value: [5,  42,  24,  44,  0.76,  40,  16, &#39;excellent&#39;]\n        lineStyle: {...},\n    }\n    ...\n]\n</code></pre>\n<p>In data above, each row is a &quot;data item&quot;, and each column represents a &quot;dimension&quot;. For example, the meanings of columns above are: &quot;data&quot;, &quot;AQI&quot;, &quot;PM2.5&quot;, &quot;PM10&quot;, &quot;carbon monoxide level&quot;, &quot;nitrogen dioxide level&quot;, and &quot;sulfur dioxide level&quot;.</p>\n<p>Parallel coordinates are often used to visualize multi-dimension data shown above. Each axis represents a dimension (namely, a column), and each line represents a data item. Data can be brush-selected on axes. For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/parallel-all&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n<hr>\n<p><strong>Brief about Configuration</strong></p>\n<p>Basic configuration parallel coordinates is shown as follow:</p>\n<pre><code class=\"lang-javascript\">option = {\n    parallelAxis: [                     // Definitions of axes.\n        {dim: 0, name: schema[0].text}, // Each axis has a &#39;dim&#39; attribute, representing dimension index in data.\n        {dim: 1, name: schema[1].text},\n        {dim: 2, name: schema[2].text},\n        {dim: 3, name: schema[3].text},\n        {dim: 4, name: schema[4].text},\n        {dim: 5, name: schema[5].text},\n        {dim: 6, name: schema[6].text},\n        {dim: 7, name: schema[7].text,\n            type: &#39;category&#39;,           // Also supports category data.\n            data: [&#39;Excellent&#39;, &#39;good&#39;, &#39;light pollution&#39;, &#39;moderate pollution&#39;, &#39;heavy pollution&#39;, &#39;severe pollution&#39;]\n        }\n    ],\n    parallel: {                         // Definition of a parallel coordinate system.\n        left: &#39;5%&#39;,                     // Location of parallel coordinate system.\n        right: &#39;13%&#39;,\n        bottom: &#39;10%&#39;,\n        top: &#39;20%&#39;,\n        parallelAxisDefault: {          // A pattern for axis definition, which can avoid repeating in `parallelAxis`.\n            type: &#39;value&#39;,\n            nameLocation: &#39;end&#39;,\n            nameGap: 20\n        }\n    },\n    series: [                           // Here the three series sharing the same parallel coordinate system.\n        {\n            name: &#39;Beijing&#39;,\n            type: &#39;parallel&#39;,           // The type of this series is &#39;parallel&#39;\n            data: [\n                [1,  55,  9,   56,  0.46,  18,  6,  &#39;good&#39;],\n                [2,  25,  11,  21,  0.65,  34,  9,  &#39;excellent&#39;],\n                ...\n            ]\n        },\n        {\n            name: &#39;Shanghai&#39;,\n            type: &#39;parallel&#39;,\n            data: [\n                [3,  56,  7,   63,  0.3,   14,  5,  &#39;good&#39;],\n                [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],\n                ...\n            ]\n        },\n        {\n            name: &#39;Guangzhou&#39;,\n            type: &#39;parallel&#39;,\n            data: [\n                [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],\n                [5,  42,  24,  44,  0.76,  40,  16, &#39;excellent&#39;],\n                ...\n            ]\n        }\n    ]\n};\n</code></pre>\n<p>Three components are involved here: <a href=\"#parallel\">parallel</a>, <a href=\"#parallelAxis\">parallelAxis</a>, <a href=\"#series-parallel\">series-parallel</a></p>\n<ul>\n<li><p><a href=\"#parallel\">parallel</a></p>\n<p>  This component is the coordinate system. One or more series (like &quot;Beijing&quot;, &quot;Shanghai&quot;, and &quot;Guangzhou&quot; in the above example) can share one coordinate system.</p>\n<p>  Like other coordinate systems, multiple parallel coordinate systems can be created in one echarts instance.</p>\n<p>  Position setting is also carried out here.</p>\n</li>\n<li><p><a href=\"#parallelAxis\">parallelAxis</a></p>\n<p>  This is axis configuration. Multiple axes are needed in parallel coordinates.</p>\n<p>  <a href=\"#parallelAxis.parallelIndex\">parallelAxis.parallelIndex</a> is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.</p>\n</li>\n<li><p><a href=\"#series-parallel\">series-parallel</a></p>\n<p>  This is the definition of parallel series, which will be drawn on parallel coordinate system.</p>\n<p>  <a href=\"#parallelAxis.parallelIndex\">parallelAxis.parallelIndex</a> is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>Notes and Best Practices</strong></p>\n<p>When configuring multiple <a href=\"#parallelAxis\">parallelAxis</a>, there might be some common attributes in each axis configuration. To avoid writing them repeatly, they can be put under <a href=\"#parallel.parallelAxisDefault\">parallel.parallelAxisDefault</a>. Before initializing axis, configurations in <a href=\"#parallel.parallelAxisDefault\">parallel.parallelAxisDefault</a> will be merged into <a href=\"#parallelAxis\">parallelAxis</a> to generate the final axis configuration.</p>\n<p><strong>If data is too large and cause bad performance</strong></p>\n<p>It is suggested to set <a href=\"#series-parallel.lineStyle.width\">series-parallel.lineStyle.width</a> to be <code class=\"codespan\">0.5</code> (or less), which may improve performance significantly.</p>\n<p><br></p>\n<hr>\n<p><strong>Display High-Dimension Data</strong></p>\n<p>When dimension number is extremely large, say, more than 50 dimensions, there will be more than 50 axes, which may hardly display in a page.</p>\n<p>In this case, you may use <a href=\"#parallel.axisExpandable\">parallel.axisExpandable</a> to improve the display. See this example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=map-parallel-prices&edit=1&reset=1\" width=\"600\" height=\"460\"><iframe />\n\n\n\n\n\n\n\n\n<p><br>\n<br></p>\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"dim":{"type":["number"],"description":"<p>Dimension index of coordinate axis.</p>\n<p>For example, <a href=\"#series-parallel.data\">series-parallel.data</a> is the following data:</p>\n<pre><code class=\"lang-javascript\">[\n    [1,  55,  9,   56,  0.46,  18,  6,  &#39;good&#39;],\n    [2,  25,  11,  21,  0.65,  34,  9,  &#39;excellent&#39;],\n    [3,  56,  7,   63,  0.3,   14,  5,  &#39;good&#39;],\n    [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],\n    { // Data item can also be an Object, so that perticular settings of its line can be set here.\n        value: [5,  42,  24,  44,  0.76,  40,  16, &#39;excellent&#39;]\n        lineStyle: {...},\n    }\n    ...\n]\n</code></pre>\n<p>In data above, each row is a &quot;data item&quot;, and each column represents a &quot;dimension&quot;. For example, the meanings of columns above are: &quot;data&quot;, &quot;AQI&quot;, &quot;PM2.5&quot;, &quot;PM10&quot;, &quot;carbon monoxide level&quot;, &quot;nitrogen dioxide level&quot;, and &quot;sulfur dioxide level&quot;.</p>\n<p><code class=\"codespan\">dim</code> defines which dimension (which <em>row</em>) of data would map to this axis.</p>\n<p>Started from <code class=\"codespan\">0</code>. For example, if the <code class=\"codespan\">dim</code> of coordinate axis is <code class=\"codespan\">1</code>, it indicates that the second row of data would map to this axis.</p>\n"},"parallelIndex":{"type":["number"],"description":"<p>It is used to define which <em>coordinate</em> the <em>axis</em> should map to.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">myChart.setOption({\n    parallel: [\n        {...},                      // the first parallel coordinate\n        {...}                       // the second parallel coordinate\n    ],\n    parallelAxis: [\n        {parallelIndex: 1, ...},    // the first coordinate axis, mapping to the second parallel coordinate\n        {parallelIndex: 0, ...},    //  the second coordinate axis, mapping to the first parallel coordinate\n        {parallelIndex: 1, ...},    //  the third coordinate axis, mapping to the second parallel coordinate\n        {parallelIndex: 0, ...}     //  the fourth coordinate axis, mapping to the first parallel coordinate\n    ],\n    ...\n});\n</code></pre>\n<p>If there is only one parallel coordinate, you don&#39;t have to configure it, whose default value is <code class=\"codespan\">0</code>.</p>\n","default":0},"realtime":{"type":["boolean"],"description":"<p>Whether to refresh view when brush-selecting axis. If is set to be <code class=\"codespan\">false</code>, view is updated after brush-selecting action ends.</p>\n<p>When data amount is large, it is suggested to set to be <code class=\"codespan\">false</code> to avoid efficiency problems.</p>\n","default":true},"areaSelectStyle":{"type":["Object"],"description":"<p>Area selecting is available on axes. Here is some configurations.</p>\n<p><br></p>\n","properties":{"width":{"type":["number"],"description":"<p>Width of selecting box.</p>\n","default":20},"borderWidth":{"type":["number"],"description":"<p>Border width of the select box.</p>\n","default":1},"borderColor":{"type":["Color"],"description":"<p>Border color of the select box.</p>\n","default":"'rgba(160,197,232)'"},"color":{"type":["Color"],"description":"<p>Border fill color of the select box.</p>\n","default":"'rgba(160,197,232)'"},"opacity":{"type":["number"],"description":"<p>Opacity of the select box.</p>\n","default":0.3}}},"type":{"type":["string"],"description":"<p>Type of axis.</p>\n<p>Option:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;value&#39;</code>\n  Numerical axis, suitable for continuous data.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;category&#39;</code>\n  Category axis, suitable for discrete category data. Category data can be auto retrieved from <a href=\"#series.data\">series.data</a> or <a href=\"#dataset.source\">dataset.source</a>, or can be specified via <a href=\"#parallelAxis.data\">parallelAxis.data</a>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;time&#39;</code>\n  Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;log&#39;</code>\n  Log axis, suitable for log data.</p>\n</li>\n</ul>\n","default":"value"},"name":{"type":["string"],"description":"<p>Name of axis.</p>\n"},"nameLocation":{"type":["string"],"description":"<p>Location of axis name.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> or <code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;end&#39;</code></li>\n</ul>\n","default":"'end'"},"nameTextStyle":{"type":["Object"],"description":"<p>Text style of axis name.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Color of axis name uses <a href=\"#parallelAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"fontStyle":{"type":["string"],"description":"<p>axis name font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p>axis name font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>axis name font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>axis name font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n\n","default":0}}}}}}},"nameGap":{"type":["number"],"description":"<p>Gap between axis name and axis line.</p>\n","default":15},"nameRotate":{"type":["number"],"description":"<p>Rotation of axis name.</p>\n","default":null},"inverse":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to invert the axis.\nThis is a new option available from Echarts 3 and newer.</p>\n","default":false},"boundaryGap":{"type":["boolean","Array"],"description":"<p>The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different.</p>\n<p>The <code class=\"codespan\">boundaryGap</code> of category axis can be set to either <code class=\"codespan\">true</code> or <code class=\"codespan\">false</code>. Default value is set to be <code class=\"codespan\">true</code>, in which case <a href=\"#parallelAxis.axisTick\">axisTick</a> is served only as a separation line, and labels and data appear only in the center part of two <a href=\"#parallelAxis.axisTick\">axis ticks</a>, which is called <em>band</em>.</p>\n<p>For non-category axis, including time, numerical value, and log axes, <code class=\"codespan\">boundaryGap</code> is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting <a href=\"#parallelAxis.min\">min</a> and <a href=\"#parallelAxis.max\">max</a>.\n<strong>Example: </strong></p>\n<pre><code class=\"lang-js\">boundaryGap: [&#39;20%&#39;, &#39;20%&#39;]\n</code></pre>\n"},"min":{"type":["number","string","Function"],"description":"<p>The minimun value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">&#39;dataMin&#39;</code> so that the minimum value on this axis is set to be the minimum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class=\"codespan\">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class=\"codespan\">2</code> represents <code class=\"codespan\">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class=\"codespan\">-3</code>.</p>\n<p>If <code class=\"codespan\">min</code> is specified as a function, it should return a min value, like:</p>\n<pre><code class=\"lang-js\">min: function (value) {\n    return value.min - 20;\n}\n</code></pre>\n<p><code class=\"codespan\">value</code> is an object, containing the <code class=\"codespan\">min</code> value and <code class=\"codespan\">max</code> value of the data. This function should return the min value of axis, or return <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> to make echarts use the auto calculated min value (<code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> return is only supported since <code class=\"codespan\">v4.8.0</code>).</p>\n","default":null},"max":{"type":["number","string","Function"],"description":"<p>The maximum value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">&#39;dataMax&#39;</code> so that the minimum value on this axis is set to be the maximum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class=\"codespan\">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class=\"codespan\">2</code> represents <code class=\"codespan\">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class=\"codespan\">-3</code>.</p>\n<p>If <code class=\"codespan\">max</code> is specified as a function, it should return a max value, like:</p>\n<pre><code class=\"lang-js\">max: function (value) {\n    return value.max - 20;\n}\n</code></pre>\n<p><code class=\"codespan\">value</code> is an object, containing the <code class=\"codespan\">min</code> value and <code class=\"codespan\">max</code> value of the data. This function should return the max value of axis, or return <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> to make echarts use the auto calculated max value (<code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> return is only supported since <code class=\"codespan\">v4.8.0</code>).</p>\n","default":null},"scale":{"type":["boolean"],"description":"<p>It is available only in numerical axis, i.e., <a href=\"#parallelAxis.type\">type</a>: &#39;value&#39;.</p>\n<p>It specifies whether not to contain zero position of axis compulsively. When it is set to be <code class=\"codespan\">true</code>, the axis may not contain zero position, which is useful in the scatter chart for both value axes.</p>\n<p>This configuration item is unavailable when the <a href=\"#parallelAxis.min\">min</a> and <a href=\"#parallelAxis.max\">max</a> are set.</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.</p>\n<p>This is unavailable for category axis.</p>\n","default":5},"minInterval":{"type":["number"],"description":"<p>Minimum gap between split lines.</p>\n<p>For example, it can be set to be <code class=\"codespan\">1</code> to make sure axis label is show as integer.</p>\n<pre><code class=\"lang-js\">{\n    minInterval: 1\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#parallelAxis.type\">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n","default":0},"maxInterval":{"type":["number"],"description":"<p>Maximum gap between split lines.</p>\n<p>For example, in time axis (<a href=\"#parallelAxis.type\">type</a> is &#39;time&#39;), it can be set to be <code class=\"codespan\">3600 * 24 * 1000</code> to make sure that the gap between axis labels is less than or equal to one day.</p>\n<pre><code class=\"lang-js\">{\n    maxInterval: 3600 * 1000 * 24\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#parallelAxis.type\">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n"},"interval":{"type":["number"],"description":"<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href=\"#parallelAxis.splitNumber\">splitNumber</a> is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with <a href=\"#parallelAxis.min\">min</a> and <a href=\"#parallelAxis.max\">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situations.</p>\n<p>This is unavailable for category axis. Timestamp should be passed for <a href=\"#parallelAxis.type\">type</a>: &#39;time&#39; axis. Logged value should be passed for <a href=\"#parallelAxis.type\">type</a>: &#39;log&#39; axis.</p>\n"},"logBase":{"type":["number"],"description":"<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#parallelAxis.type\">type</a>: &#39;log&#39;.</p>\n","default":10},"silent":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code>, to prevent interaction with the axis.</p>\n","default":false},"triggerEvent":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to enable triggering events.</p>\n<p>Parameters of the event include:</p>\n<pre><code class=\"lang-js\">{\n    // Component type: xAxis, yAxis, radiusAxis, angleAxis\n    // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n    componentType: string,\n    // Value on axis before being formatted.\n    // Click on value label to trigger event.\n    value: &#39;&#39;,\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: &#39;&#39;\n}\n</code></pre>\n","default":false},"axisLine":{"type":["Object"],"description":"<p>Settings related to axis line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n","default":true},"symbol":{"type":["string","Array"],"description":"<p>Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It&#39;s set to be <code class=\"codespan\">&#39;none&#39;</code> by default, meaning no arrow for either end. If it is set to be <code class=\"codespan\">&#39;arrow&#39;</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code class=\"codespan\">[&#39;none&#39;, &#39;arrow&#39;]</code>.</p>\n","default":"'none'"},"symbolSize":{"type":["Array"],"description":"<p>Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.</p>\n","default":"[10, 15]"},"symbolOffset":{"type":["Array","number"],"description":"<p>Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>line styleLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#333'"},"width":{"type":["number"],"description":"<p>line style line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>line style line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"axisTick":{"type":["Object"],"description":"<p>Settings related to axis tick.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis tick from showing.</p>\n","default":true},"alignWithLabel":{"type":["boolean"],"description":"<p>Align axis tick with label, which is available only when <code class=\"codespan\">boundaryGap</code> is set to be <code class=\"codespan\">true</code> in category axis. See the following picture:</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/axis-align-with-label.png\"></p>\n","default":false},"interval":{"type":["number","Function"],"description":"<p>Interval of axisTick, which is available in category axis.  is set to be the same as <a href=\"#parallelAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> so the axis labels face the <code class=\"codespan\">inside</code> direction.</p>\n","default":false},"length":{"type":["number"],"description":"<p>The length of the axis tick.</p>\n","default":5},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Color of axis label is set to be <a href=\"#parallelAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"width":{"type":["number"],"description":"<p>axisTick line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>axisTick line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"minorTick":{"type":["Object"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.6.0</code></p>\n</blockquote>\n<p>Settings related minor ticks.</p>\n<p>Note: <code class=\"codespan\">minorTick</code> is not available in the <code class=\"codespan\">category</code> type axis.</p>\n<p>Examples:</p>\n<p>1) Using minor ticks in function plotting.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-function&edit=1&reset=1\" width=\"600\" height=\"350\"><iframe />\n\n\n<p>2) Using minor ticks in log axis.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-log&edit=1&reset=1\" width=\"600\" height=\"350\"><iframe />\n\n\n","properties":{"show":{"type":["boolean"],"description":"<p>If show minor ticks.</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>Number of interval splited by minor ticks.</p>\n","default":5},"length":{"type":["number"],"description":"<p>Length of minor ticks lines。</p>\n","default":3},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Style configuration of minor ticks lines <a href=\"#parallelAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。</p>\n"},"width":{"type":["number"],"description":"<p>minorTick line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>minorTick line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"axisLabel":{"type":["Object"],"description":"<p>Settings related to axis label.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis label from appearing.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>Interval of Axis label, which is available in category axis. </p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> so the axis labels face the <code class=\"codespan\">inside</code> direction.</p>\n","default":false},"rotate":{"type":["number"],"description":"<p>Rotation degree of axis label, which is especially useful when there is no enough space for category axis.</p>\n<p>Rotation degree is from -90 to 90.</p>\n","default":0},"margin":{"type":["number"],"description":"<p>The margin between the axis label and the axis line.</p>\n","default":8},"formatter":{"type":["string","Function"],"description":"<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Use string template; template variable is the default label of axis {value}\nformatter: &#39;{value} kg&#39;\n\n// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (idx === 0) {\n        texts.unshift(date.getYear());\n    }\n    return texts.join(&#39;/&#39;);\n}\n</code></pre>\n","default":null},"showMinLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the min tick. Optional values: <code class=\"codespan\">true</code>, <code class=\"codespan\">false</code>, <code class=\"codespan\">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.</p>\n","default":null},"showMaxLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the max tick. Optional values: <code class=\"codespan\">true</code>, <code class=\"codespan\">false</code>, <code class=\"codespan\">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.</p>\n","default":null},"color":{"type":["Color","Function"],"description":"<p>Color of axis label is set to be <a href=\"#parallelAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class=\"lang-js\">(val: string) =&gt; Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class=\"lang-js\">textStyle: {\n    color: function (value, index) {\n        return value &gt;= 0 ? &#39;green&#39; : &#39;red&#39;;\n    }\n}\n</code></pre>\n"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n\n","default":0}}}}}}},"data":{"type":["Array"],"description":"<p>Category data, available in <a href=\"#parallelAxis.type\">type</a>: &#39;category&#39; axis.</p>\n<p>If <a href=\"#parallelAxis.type\">type</a> is not specified, but <code class=\"codespan\">axis.data</code> is specified, the <a href=\"#parallelAxis.type\">type</a> is auto set as <code class=\"codespan\">&#39;category&#39;</code>.</p>\n<p>If <a href=\"#parallelAxis.type\">type</a> is specified as <code class=\"codespan\">&#39;category&#39;</code>, but <code class=\"codespan\">axis.data</code> is not specified, <code class=\"codespan\">axis.data</code> will be auto collected from <a href=\"#series.data\">series.data</a>. It brings convenience, but we should notice that <code class=\"codespan\">axis.data</code> provides then value range of the <code class=\"codespan\">&#39;category&#39;</code> axis. If  it is auto collected from <a href=\"#series.data\">series.data</a>, Only the values appearing in <a href=\"#series.data\">series.data</a> can be collected. For example, if <a href=\"#series.data\">series.data</a> is empty, nothing will be collected.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Name list of all categories\ndata: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n// Each item could also be a specific configuration item.\n// In this case, `value` is used as the category name.\ndata: [{\n    value: &#39;Monday&#39;,\n    // Highlight Monday\n    textStyle: {\n        fontSize: 20,\n        color: &#39;red&#39;\n    }\n}, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n</code></pre>\n","items":{"type":"Object","properties":{"value":{"type":["string"],"description":"<p>Name of a category.</p>\n"},"textStyle":{"type":["Object"],"description":"<p>Text style of the category.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"singleAxis":{"type":["Object"],"description":"<p>An axis with a single dimension. It can be used to display data in one dimension. For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=scatter-single-axis&edit=1&reset=1\" width=\"700\" height=\"500\"><iframe />\n\n\n\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between grid  component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'5%'"},"top":{"type":["string","number"],"description":"<p>Distance between grid  component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'5%'"},"right":{"type":["string","number"],"description":"<p>Distance between grid  component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n","default":"'5%'"},"bottom":{"type":["string","number"],"description":"<p>Distance between grid  component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n","default":"'5%'"},"width":{"type":["string","number"],"description":"<p>Width of grid  component. Adaptive by default.</p>\n","default":"'auto'"},"height":{"type":["string","number"],"description":"<p>Height of grid  component. Adaptive by default.</p>\n","default":"'auto'"},"orient":{"type":["string"],"description":"<p>Orientation of the axis. By default, it&#39;s <code class=\"codespan\">&#39;horizontal&#39;</code>. You can set it to be <code class=\"codespan\">&#39;vertical&#39;</code> to make a vertical axis.</p>\n","default":"'horizontal'"},"type":{"type":["string"],"description":"<p>Type of axis.</p>\n<p>Option:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;value&#39;</code>\n  Numerical axis, suitable for continuous data.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;category&#39;</code>\n  Category axis, suitable for discrete category data. Category data can be auto retrieved from <a href=\"#series.data\">series.data</a> or <a href=\"#dataset.source\">dataset.source</a>, or can be specified via <a href=\"#singleAxis.data\">singleAxis.data</a>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;time&#39;</code>\n  Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;log&#39;</code>\n  Log axis, suitable for log data.</p>\n</li>\n</ul>\n","default":"'value'"},"name":{"type":["string"],"description":"<p>Name of axis.</p>\n"},"nameLocation":{"type":["string"],"description":"<p>Location of axis name.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> or <code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;end&#39;</code></li>\n</ul>\n","default":"'end'"},"nameTextStyle":{"type":["Object"],"description":"<p>Text style of axis name.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Color of axis name uses <a href=\"#singleAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"fontStyle":{"type":["string"],"description":"<p>axis name font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p>axis name font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>axis name font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>axis name font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n\n","default":0}}}}}}},"nameGap":{"type":["number"],"description":"<p>Gap between axis name and axis line.</p>\n","default":15},"nameRotate":{"type":["number"],"description":"<p>Rotation of axis name.</p>\n","default":null},"inverse":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to invert the axis.\nThis is a new option available from Echarts 3 and newer.</p>\n","default":false},"boundaryGap":{"type":["boolean","Array"],"description":"<p>The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different.</p>\n<p>The <code class=\"codespan\">boundaryGap</code> of category axis can be set to either <code class=\"codespan\">true</code> or <code class=\"codespan\">false</code>. Default value is set to be <code class=\"codespan\">true</code>, in which case <a href=\"#singleAxis.axisTick\">axisTick</a> is served only as a separation line, and labels and data appear only in the center part of two <a href=\"#singleAxis.axisTick\">axis ticks</a>, which is called <em>band</em>.</p>\n<p>For non-category axis, including time, numerical value, and log axes, <code class=\"codespan\">boundaryGap</code> is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting <a href=\"#singleAxis.min\">min</a> and <a href=\"#singleAxis.max\">max</a>.\n<strong>Example: </strong></p>\n<pre><code class=\"lang-js\">boundaryGap: [&#39;20%&#39;, &#39;20%&#39;]\n</code></pre>\n"},"min":{"type":["number","string","Function"],"description":"<p>The minimun value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">&#39;dataMin&#39;</code> so that the minimum value on this axis is set to be the minimum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class=\"codespan\">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class=\"codespan\">2</code> represents <code class=\"codespan\">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class=\"codespan\">-3</code>.</p>\n<p>If <code class=\"codespan\">min</code> is specified as a function, it should return a min value, like:</p>\n<pre><code class=\"lang-js\">min: function (value) {\n    return value.min - 20;\n}\n</code></pre>\n<p><code class=\"codespan\">value</code> is an object, containing the <code class=\"codespan\">min</code> value and <code class=\"codespan\">max</code> value of the data. This function should return the min value of axis, or return <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> to make echarts use the auto calculated min value (<code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> return is only supported since <code class=\"codespan\">v4.8.0</code>).</p>\n","default":null},"max":{"type":["number","string","Function"],"description":"<p>The maximum value of axis.</p>\n<p>It can be set to a special value <code class=\"codespan\">&#39;dataMax&#39;</code> so that the minimum value on this axis is set to be the maximum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class=\"codespan\">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class=\"codespan\">2</code> represents <code class=\"codespan\">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class=\"codespan\">-3</code>.</p>\n<p>If <code class=\"codespan\">max</code> is specified as a function, it should return a max value, like:</p>\n<pre><code class=\"lang-js\">max: function (value) {\n    return value.max - 20;\n}\n</code></pre>\n<p><code class=\"codespan\">value</code> is an object, containing the <code class=\"codespan\">min</code> value and <code class=\"codespan\">max</code> value of the data. This function should return the max value of axis, or return <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> to make echarts use the auto calculated max value (<code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> return is only supported since <code class=\"codespan\">v4.8.0</code>).</p>\n","default":null},"scale":{"type":["boolean"],"description":"<p>It is available only in numerical axis, i.e., <a href=\"#singleAxis.type\">type</a>: &#39;value&#39;.</p>\n<p>It specifies whether not to contain zero position of axis compulsively. When it is set to be <code class=\"codespan\">true</code>, the axis may not contain zero position, which is useful in the scatter chart for both value axes.</p>\n<p>This configuration item is unavailable when the <a href=\"#singleAxis.min\">min</a> and <a href=\"#singleAxis.max\">max</a> are set.</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.</p>\n<p>This is unavailable for category axis.</p>\n","default":5},"minInterval":{"type":["number"],"description":"<p>Minimum gap between split lines.</p>\n<p>For example, it can be set to be <code class=\"codespan\">1</code> to make sure axis label is show as integer.</p>\n<pre><code class=\"lang-js\">{\n    minInterval: 1\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#singleAxis.type\">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n","default":0},"maxInterval":{"type":["number"],"description":"<p>Maximum gap between split lines.</p>\n<p>For example, in time axis (<a href=\"#singleAxis.type\">type</a> is &#39;time&#39;), it can be set to be <code class=\"codespan\">3600 * 24 * 1000</code> to make sure that the gap between axis labels is less than or equal to one day.</p>\n<pre><code class=\"lang-js\">{\n    maxInterval: 3600 * 1000 * 24\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#singleAxis.type\">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n"},"interval":{"type":["number"],"description":"<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href=\"#singleAxis.splitNumber\">splitNumber</a> is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with <a href=\"#singleAxis.min\">min</a> and <a href=\"#singleAxis.max\">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situations.</p>\n<p>This is unavailable for category axis. Timestamp should be passed for <a href=\"#singleAxis.type\">type</a>: &#39;time&#39; axis. Logged value should be passed for <a href=\"#singleAxis.type\">type</a>: &#39;log&#39; axis.</p>\n"},"logBase":{"type":["number"],"description":"<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#singleAxis.type\">type</a>: &#39;log&#39;.</p>\n","default":10},"silent":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code>, to prevent interaction with the axis.</p>\n","default":false},"triggerEvent":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to enable triggering events.</p>\n<p>Parameters of the event include:</p>\n<pre><code class=\"lang-js\">{\n    // Component type: xAxis, yAxis, radiusAxis, angleAxis\n    // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n    componentType: string,\n    // Value on axis before being formatted.\n    // Click on value label to trigger event.\n    value: &#39;&#39;,\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: &#39;&#39;\n}\n</code></pre>\n","default":false},"axisLine":{"type":["Object"],"description":"<p>Settings related to axis line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis line from showing.</p>\n","default":true},"symbol":{"type":["string","Array"],"description":"<p>Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It&#39;s set to be <code class=\"codespan\">&#39;none&#39;</code> by default, meaning no arrow for either end. If it is set to be <code class=\"codespan\">&#39;arrow&#39;</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code class=\"codespan\">[&#39;none&#39;, &#39;arrow&#39;]</code>.</p>\n","default":"'none'"},"symbolSize":{"type":["Array"],"description":"<p>Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.</p>\n","default":"[10, 15]"},"symbolOffset":{"type":["Array","number"],"description":"<p>Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>line styleLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#333'"},"width":{"type":["number"],"description":"<p>line style line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>line style line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"axisTick":{"type":["Object"],"description":"<p>Settings related to axis tick.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis tick from showing.</p>\n","default":true},"alignWithLabel":{"type":["boolean"],"description":"<p>Align axis tick with label, which is available only when <code class=\"codespan\">boundaryGap</code> is set to be <code class=\"codespan\">true</code> in category axis. See the following picture:</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/axis-align-with-label.png\"></p>\n","default":false},"interval":{"type":["number","Function"],"description":"<p>Interval of axisTick, which is available in category axis.  is set to be the same as <a href=\"#singleAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> so the axis labels face the <code class=\"codespan\">inside</code> direction.</p>\n","default":false},"length":{"type":["number"],"description":"<p>The length of the axis tick.</p>\n","default":5},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Color of axis label is set to be <a href=\"#singleAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"width":{"type":["number"],"description":"<p>axisTick line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>axisTick line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"minorTick":{"type":["Object"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.6.0</code></p>\n</blockquote>\n<p>Settings related minor ticks.</p>\n<p>Note: <code class=\"codespan\">minorTick</code> is not available in the <code class=\"codespan\">category</code> type axis.</p>\n<p>Examples:</p>\n<p>1) Using minor ticks in function plotting.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-function&edit=1&reset=1\" width=\"600\" height=\"350\"><iframe />\n\n\n<p>2) Using minor ticks in log axis.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-log&edit=1&reset=1\" width=\"600\" height=\"350\"><iframe />\n\n\n","properties":{"show":{"type":["boolean"],"description":"<p>If show minor ticks.</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>Number of interval splited by minor ticks.</p>\n","default":5},"length":{"type":["number"],"description":"<p>Length of minor ticks lines。</p>\n","default":3},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Style configuration of minor ticks lines <a href=\"#singleAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。</p>\n"},"width":{"type":["number"],"description":"<p>minorTick line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>minorTick line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"axisLabel":{"type":["Object"],"description":"<p>Settings related to axis label.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the axis label from appearing.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>Interval of Axis label, which is available in category axis. </p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> so the axis labels face the <code class=\"codespan\">inside</code> direction.</p>\n","default":false},"rotate":{"type":["number"],"description":"<p>Rotation degree of axis label, which is especially useful when there is no enough space for category axis.</p>\n<p>Rotation degree is from -90 to 90.</p>\n","default":0},"margin":{"type":["number"],"description":"<p>The margin between the axis label and the axis line.</p>\n","default":8},"formatter":{"type":["string","Function"],"description":"<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Use string template; template variable is the default label of axis {value}\nformatter: &#39;{value} kg&#39;\n\n// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (idx === 0) {\n        texts.unshift(date.getYear());\n    }\n    return texts.join(&#39;/&#39;);\n}\n</code></pre>\n","default":null},"showMinLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the min tick. Optional values: <code class=\"codespan\">true</code>, <code class=\"codespan\">false</code>, <code class=\"codespan\">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.</p>\n","default":null},"showMaxLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the max tick. Optional values: <code class=\"codespan\">true</code>, <code class=\"codespan\">false</code>, <code class=\"codespan\">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.</p>\n","default":null},"color":{"type":["Color","Function"],"description":"<p>Color of axis label is set to be <a href=\"#singleAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class=\"lang-js\">(val: string) =&gt; Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class=\"lang-js\">textStyle: {\n    color: function (value, index) {\n        return value &gt;= 0 ? &#39;green&#39; : &#39;red&#39;;\n    }\n}\n</code></pre>\n"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n\n","default":0}}}}}}},"splitLine":{"type":["Object"],"description":"<p>Split line of axis in <a href=\"#grid\">grid</a> area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the splitLine from showing.\n<code class=\"codespan\">value</code> type axes are shown by default, while <code class=\"codespan\">category</code> type axes are hidden.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>Interval of Axis splitLine, which is available in category axis.  is set to be the same as <a href=\"#singleAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Array","string"],"description":"<p>The color of the splitLine, which could be set separately.</p>\n<p>SplitLine color could also be set in color array, which the split lines would take as their colors in turns.</p>\n<p>Example:</p>\n<pre><code>splitLine: {\n    lineStyle: {\n        // Dark and light colors will be used in turns\n        color: [&#39;#aaa&#39;, &#39;#ddd&#39;]\n    }\n}\n</code></pre>","default":"['#ccc']"},"width":{"type":["number"],"description":"<p>splitLine line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>splitLine line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}}}},"minorSplitLine":{"type":["Object"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.6.0</code></p>\n</blockquote>\n<p>Minor split lines of axis in the <a href=\"#grid\">grid</a> area。It will align to the <a href=\"#singleAxis.minorTick\">minorTick</a></p>\n","properties":{"show":{"type":["boolean"],"description":"<p>If show minor split lines.</p>\n","default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>minorSplitLineLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#eee'"},"width":{"type":["number"],"description":"<p>minorSplitLine line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>minorSplitLine line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"splitArea":{"type":["Object"],"description":"<p>Split area of axis in <a href=\"#grid\">grid</a> area, not shown by default.</p>\n","properties":{"interval":{"type":["number","Function"],"description":"<p>Interval of Axis splitArea, which is available in category axis.  is set to be the same as <a href=\"#singleAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":"'auto'"},"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">true</code> to show the splitArea.</p>\n","default":false},"areaStyle":{"type":["Object"],"description":"<p>Split area style.</p>\n","properties":{"color":{"type":["Array"],"description":"<p>Color of split area.\nSplitArea color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.</p>\n","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Category data, available in <a href=\"#singleAxis.type\">type</a>: &#39;category&#39; axis.</p>\n<p>If <a href=\"#singleAxis.type\">type</a> is not specified, but <code class=\"codespan\">axis.data</code> is specified, the <a href=\"#singleAxis.type\">type</a> is auto set as <code class=\"codespan\">&#39;category&#39;</code>.</p>\n<p>If <a href=\"#singleAxis.type\">type</a> is specified as <code class=\"codespan\">&#39;category&#39;</code>, but <code class=\"codespan\">axis.data</code> is not specified, <code class=\"codespan\">axis.data</code> will be auto collected from <a href=\"#series.data\">series.data</a>. It brings convenience, but we should notice that <code class=\"codespan\">axis.data</code> provides then value range of the <code class=\"codespan\">&#39;category&#39;</code> axis. If  it is auto collected from <a href=\"#series.data\">series.data</a>, Only the values appearing in <a href=\"#series.data\">series.data</a> can be collected. For example, if <a href=\"#series.data\">series.data</a> is empty, nothing will be collected.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Name list of all categories\ndata: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n// Each item could also be a specific configuration item.\n// In this case, `value` is used as the category name.\ndata: [{\n    value: &#39;Monday&#39;,\n    // Highlight Monday\n    textStyle: {\n        fontSize: 20,\n        color: &#39;red&#39;\n    }\n}, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n</code></pre>\n","items":{"type":"Object","properties":{"value":{"type":["string"],"description":"<p>Name of a category.</p>\n"},"textStyle":{"type":["Object"],"description":"<p>Text style of the category.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}},"axisPointer":{"type":["Object"],"description":"<p>axisPointer settings on the axis.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>axisPointer will not be displayed by default. But if <a href=\"#tooltip.trigger\">tooltip.trigger</a> is set as <code class=\"codespan\">&#39;axis&#39;</code> or <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as  <code class=\"codespan\">&#39;cross&#39;</code>, axisPointer will be displayed automatically. Each coordinate system will automatically chose the axes whose will display its axisPointer. <a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> can be used to change the choice.</p>\n","default":false},"type":{"type":["string"],"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;line&#39;</code> line indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;shadow&#39;</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;none&#39;</code> no indicator displayed.</p>\n</li>\n</ul>\n","default":"'line'"},"snap":{"type":["boolean"],"description":"<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n"},"z":{"type":["number"],"description":"<p>z value, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n"},"label":{"type":["Object"],"description":"<p>label of axisPointer</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label. Label will not show by default. But if <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as  <code class=\"codespan\">&#39;cross&#39;</code>, label will be displayed automatically.</p>\n","default":false},"precision":{"type":["number","string"],"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code class=\"codespan\">&#39;2&#39;</code>, which indicates that two decimal fractions are reserved.</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"<p>The formatter of label.</p>\n<p>If set as <code class=\"codespan\">string</code>, for example it can be: <code class=\"codespan\">formatter: &#39;some text {value} some text</code>, where <code class=\"codespan\">{value}</code> will be replaced by axis value automatically.</p>\n<p>If set as <code class=\"codespan\">function</code>:</p>\n<p><strong>Parameters:</strong></p>\n<p><code class=\"codespan\">{Object}</code> params: Including fields as follows:</p>\n<p><code class=\"codespan\">{Object}</code> params.value: current value of this axis. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;category&#39;</code>, it is one of the value in <code class=\"codespan\">axis.data</code>. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;time&#39;</code>, it is a timestamp.</p>\n<p><code class=\"codespan\">{Array.&lt;Object&gt;}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<p><code class=\"codespan\">{string}</code> params.axisDimension: The dimension name of the axis. For example, in catesian it will be <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, and in polar it will be <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code>.</p>\n<p><code class=\"codespan\">{number}</code> params.axisIndex: The index of the axis, for example, <code class=\"codespan\">0</code>,<code class=\"codespan\">1</code>, <code class=\"codespan\">2</code>, ...</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n    axisDim: &#39;x&#39;, // &#39;x&#39;, &#39;y&#39;, &#39;angle&#39;, &#39;radius&#39;, &#39;single&#39;\n    axisId: &#39;xxx&#39;,\n    axisName: &#39;xxx&#39;,\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: &#39;text of value&#39;\n}\n</code></pre>\n<p><strong>Return:</strong></p>\n<p>The string to be displayed.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n    // If axis.type is &#39;time&#39;\n    return &#39;some text&#39; + echarts.format.formatTime(params.value);\n}\n</code></pre>\n","default":null},"margin":{"type":["boolean"],"description":"<p>Distance between label and axis.</p>\n","default":3},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"padding":{"type":["string","Array"],"description":"<p>axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"<p>Border color of label.</p>\n","default":null},"borderWidth":{"type":["string"],"description":"<p>Border width of label.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"lineStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;line&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"shadowStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;shadow&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"triggerTooltip":{"type":["boolean"],"description":"<p>Whether to trigger tooltip.</p>\n","default":true},"value":{"type":["number"],"description":"<p>current value. When using <a href=\"xAxisPointer.handle\" target=\"_blank\">axisPointer.handle</a>, <code class=\"codespan\">value</code> can be set to define the initail position of axisPointer.</p>\n","default":null},"status":{"type":["boolean"],"description":"<p>Current status, can be <code class=\"codespan\">&#39;show&#39;</code> 和 <code class=\"codespan\">&#39;hide&#39;</code>.</p>\n"},"handle":{"type":["Object"],"description":"<p>A button used to drag axisPointer. This feature is applicable in touch device. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set to <code class=\"codespan\">true</code> to use handle.</p>\n","default":false},"icon":{"type":["*"],"description":"<p>The icon of the handle.</p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/axisPointer-handle-image&amp;edit=1&amp;reset=1\" target=\"_blank\">example of using image</a></p>\n"},"size":{"type":["number","Array"],"description":"<p>The size of the handle, which can be set as a single value or an array (<code class=\"codespan\">[width, height]</code>).</p>\n","default":45},"margin":{"type":["number"],"description":"<p>Distance from handle center to axis.</p>\n","default":50},"color":{"type":["string"],"description":"<p>The color of the handle.</p>\n","default":"'#333'"},"throttle":{"type":["number"],"description":"<p>Throttle rate of trigger view update when dragging handle, in ms. Increase the value to improve performance, but decrease the experience.</p>\n","default":40},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":2},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}}}},"tooltip":{"type":["Object"],"description":"<p>tooltip settings in the coordinate system component.</p>\n<hr>\n<p><strong>General Introduction:</strong></p>\n<p>tooltip can be configured on different places:</p>\n<ul>\n<li><p>Configured on global: <a href=\"#tooltip\">tooltip</a></p>\n</li>\n<li><p>Configured in a coordinate system: <a href=\"#grid.tooltip\">grid.tooltip</a>, <a href=\"#polar.tooltip\">polar.tooltip</a>, <a href=\"#single.tooltip\">single.tooltip</a></p>\n</li>\n<li><p>Configured in a series: <a href=\"#series.tooltip\">series.tooltip</a></p>\n</li>\n<li><p>Configured in each item of <code class=\"codespan\">series.data</code>: <a href=\"#series.data.tooltip\">series.data.tooltip</a></p>\n</li>\n</ul>\n<hr>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the tooltip component, including tooltip floating layer and <a href=\"#tooltip.axisPointer\">axisPointer</a>.</p>\n","default":true},"trigger":{"type":["string"],"description":"<p>Type of triggering.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;item&#39;</code></p>\n<p>  Triggered by data item, which is mainly used for charts that don&#39;t have a category axis like scatter charts or pie charts.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;axis&#39;</code></p>\n<p>  Triggered by axes, which is mainly used for charts that have category axes, like bar charts or line charts.</p>\n<p> ECharts 2.x only supports axis trigger for category axis. In ECharts 3, it is supported for all types of axes in <a href=\"#grid\">grid</a> or <a href=\"#polar\">polar</a>. Also, you may assign axis with <a href=\"#tooltip.axisPointer.axis\">axisPointer.axis</a>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;none&#39;</code></p>\n<p>  Trigger nothing.</p>\n</li>\n</ul>\n","default":"'item'"},"axisPointer":{"type":["Object"],"description":"<p>Configuration item for axisPointer.</p>\n<p><code class=\"codespan\">tooltip.axisPointer</code> is like syntactic sugar of axisPointer settings on axes (for example, <a href=\"#xAxis.axisPointer\">xAxis.axisPointer</a> or <a href=\"#angleAxis.axisPointer\">angleAxis.axisPointer</a>). More detailed features can be configured on <code class=\"codespan\">someAxis.axisPointer</code>. But in common cases, using <code class=\"codespan\">tooltip.axisPointer</code> is more convenient.</p>\n<blockquote>\n<p><strong>Notice:</strong> configurations of <code class=\"codespan\">tooltip.axisPointer</code> has lower priority than that of <code class=\"codespan\">someAxis.axisPointer</code>.</p>\n</blockquote>\n<hr>\n<p><code class=\"codespan\">axisPointer</code> is a tool for displaying reference line and axis value under mouse pointer.</p>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/candlestick-axisPointer&edit=1&reset=1\" width=\"600\" height=\"450\"><iframe />\n\n\n<p>In the demo above, <a href=\"#axisPointer.link\">axisPointer.link</a> is used to link axisPointer from different coordinate systems.</p>\n<p><code class=\"codespan\">axisPointer</code> can also be used on touch device, where user can drag the button to move the reference line and label.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-tooltip-touch&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n<p>In the cases that more than one axis exist, axisPointer helps to look inside the data.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=multiple-y-axis&edit=1&reset=1\" width=\"600\" height=\"300\"><iframe />\n\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=multiple-x-axis&edit=1&reset=1\" width=\"600\" height=\"300\"><iframe />\n\n\n\n<hr>\n<blockquote>\n<p><strong>Notice:</strong>\nGenerally, axisPointers is configured in each axes who need them (for example <a href=\"#xAxis.axisPointer\">xAxis.axisPointer</a>), or configured in <code class=\"codespan\">tooltip</code> (for example <a href=\"#tooltip.axisPointer\">tooltip.axisPointer</a>).</p>\n</blockquote>\n<blockquote>\n<p>But these configurations can only be configured in global axisPointer:\n<a href=\"#axisPointer.triggerOn\">axisPointer.triggerOn</a>, <a href=\"#axisPointer.link\">axisPointer.link</a>.</p>\n</blockquote>\n<hr>\n<hr>\n<p><strong>How to display axisPointer:</strong></p>\n<p>In <a href=\"#grid\">cartesian (grid)</a> and <a href=\"#single\">polar](~polar) and (single axis</a>, each axis has its own axisPointer.</p>\n<p>Those axisPointer will not be displayed by default, utill configured as follows:</p>\n<ul>\n<li><p>Set <code class=\"codespan\">someAxis.axisPointer.show</code> (like <a href=\"#xAxis.axisPointer.show\">xAxis.axisPointer.show</a>) as <code class=\"codespan\">true</code>. Then axisPointer of this axis will be displayed.</p>\n</li>\n<li><p>Set <a href=\"#tooltip.trigger\">tooltip.trigger</a> as <code class=\"codespan\">&#39;axis&#39;</code>, or set <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> as <code class=\"codespan\">&#39;cross&#39;</code>. Then coordinate system will automatically chose the axes who will display their axisPointers. (<a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> can be used to change the choice.) Notice, <code class=\"codespan\">axis.axisPointer</code> will override <code class=\"codespan\">tooltip.axisPointer</code> settings.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to display the label of axisPointer:</strong></p>\n<p>The label of axisPointer will not be displayed by default(namely, only reference line will be displayed by default), utill configured as follows:</p>\n<ul>\n<li><p>Set <code class=\"codespan\">someAxis.axisPointer.label.show</code> (for example <a href=\"#xAxis.axisPointer.show\">xAxis.axisPointer.label.show</a>) as <code class=\"codespan\">true</code>. Then the label of the axisPointer will be displayed.</p>\n</li>\n<li><p>Set <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> as  <code class=\"codespan\">&#39;cross&#39;</code>. Then the label of the crossed axisPointers will be displayed.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to configure axisPointer on touch device:</strong></p>\n<p>Set <code class=\"codespan\">someAxis.axisPointer.handle.show</code> (for example <a href=\"#xAxis.axisPointer.handle.show\">xAxis.axisPointer.handle.show</a> as <code class=\"codespan\">true</code>. Then the button for dragging will be displayed. (This feature is not supported on polar).</p>\n<p><strong>Notice:</strong>\nIf tooltip does not work well in this case, try to set<a href=\"#tooltip.triggerOn\">tooltip.triggerOn</a> as <code class=\"codespan\">&#39;none&#39;</code> (for the effect: show tooltip when finger holding on the button, and hide tooltip after finger left the button), or set <a href=\"#tooltip.alwaysShowContent\">tooltip.alwaysShowContent</a> as <code class=\"codespan\">true</code> (then tooltip will always be displayed).</p>\n<p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>.</p>\n<hr>\n<p><strong>Snap to point</strong></p>\n<p>In value axis and time axis, if <a href=\"#xAxis.axisPointer.snap\">snap</a> is set as true, axisPointer will snap to point automatically.</p>\n<hr>\n","properties":{"type":{"type":["string"],"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;line&#39;</code> line indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;shadow&#39;</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;none&#39;</code> no indicator displayed.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;cross&#39;</code> crosshair indicator, which is actually the shortcut of enable two axisPointers of two orthometric axes.</p>\n</li>\n</ul>\n","default":"'line'"},"axis":{"type":["string"],"description":"<p>The coordinate axis, which could be <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, <code class=\"codespan\">&#39;radius&#39;</code>, or <code class=\"codespan\">&#39;angle&#39;</code>. By default, each coordinate system will automatically chose the axes whose will display its axisPointer (category axis or time axis is used by default).</p>\n","default":"'auto'"},"snap":{"type":["boolean"],"description":"<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n"},"z":{"type":["number"],"description":"<p>z value, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n"},"label":{"type":["Object"],"description":"<p>label of axisPointer</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label. Label will not show by default. But if <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as  <code class=\"codespan\">&#39;cross&#39;</code>, label will be displayed automatically.</p>\n","default":false},"precision":{"type":["number","string"],"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code class=\"codespan\">&#39;2&#39;</code>, which indicates that two decimal fractions are reserved.</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"<p>The formatter of label.</p>\n<p>If set as <code class=\"codespan\">string</code>, for example it can be: <code class=\"codespan\">formatter: &#39;some text {value} some text</code>, where <code class=\"codespan\">{value}</code> will be replaced by axis value automatically.</p>\n<p>If set as <code class=\"codespan\">function</code>:</p>\n<p><strong>Parameters:</strong></p>\n<p><code class=\"codespan\">{Object}</code> params: Including fields as follows:</p>\n<p><code class=\"codespan\">{Object}</code> params.value: current value of this axis. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;category&#39;</code>, it is one of the value in <code class=\"codespan\">axis.data</code>. If <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;time&#39;</code>, it is a timestamp.</p>\n<p><code class=\"codespan\">{Array.&lt;Object&gt;}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<p><code class=\"codespan\">{string}</code> params.axisDimension: The dimension name of the axis. For example, in catesian it will be <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, and in polar it will be <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code>.</p>\n<p><code class=\"codespan\">{number}</code> params.axisIndex: The index of the axis, for example, <code class=\"codespan\">0</code>,<code class=\"codespan\">1</code>, <code class=\"codespan\">2</code>, ...</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n    axisDim: &#39;x&#39;, // &#39;x&#39;, &#39;y&#39;, &#39;angle&#39;, &#39;radius&#39;, &#39;single&#39;\n    axisId: &#39;xxx&#39;,\n    axisName: &#39;xxx&#39;,\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: &#39;text of value&#39;\n}\n</code></pre>\n<p><strong>Return:</strong></p>\n<p>The string to be displayed.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n    // If axis.type is &#39;time&#39;\n    return &#39;some text&#39; + echarts.format.formatTime(params.value);\n}\n</code></pre>\n","default":null},"margin":{"type":["boolean"],"description":"<p>Distance between label and axis.</p>\n","default":3},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"padding":{"type":["string","Array"],"description":"<p>axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"<p>Border color of label.</p>\n","default":null},"borderWidth":{"type":["string"],"description":"<p>Border width of label.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"lineStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;line&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"shadowStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;shadow&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"crossStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code class=\"codespan\">&#39;cross&#39;</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"dashed"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":200},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"exponentialOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"position":{"type":["string","Array"],"description":"<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},"timeline":{"type":["Object"],"description":"<p><code class=\"codespan\">timeline</code> component, which provides functions like switching and playing between multiple ECharts <code class=\"codespan\">options</code>.</p>\n<p>Here is an example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/mix-timeline-all&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n<p>Different from other components, <code class=\"codespan\">timeline</code> component requires multiple options. If the traditional way of ECharts option is called <em>atomic option</em>, then, the option used along with timeline should be call a <em>compound option</em> composed with multiple atomic options. For example:</p>\n<pre><code class=\"lang-javascript\">// In the following example, baseOption is an *atomic option*, so as each item in options array.\n// Each of the atomic option follows configuration introduced in this document.\nmyChart.setOption(\n    {\n        baseOption: {\n            timeline: {\n                ...,\n                data: [&#39;2002-01-01&#39;, &#39;2003-01-01&#39;, &#39;2004-01-01&#39;]\n            },\n            title: {\n                subtext: &#39; Data is from National Bureau of Statistics &#39;\n            },\n            grid: {...},\n            xAxis: [...],\n            yAxis: [...],\n            series: [\n                { // other configurations of series 1\n                    type: &#39;bar&#39;,\n                    ...\n                },\n                { // other configurations of series 2\n                    type: &#39;line&#39;,\n                    ...\n                },\n                { // other configurations of series 3\n                    type: &#39;pie&#39;,\n                    ...\n                }\n            ]\n        },\n        options: [\n            { // it is an option corresponding to &#39;2002-01-01&#39;\n                title: {\n                text: &#39;the statistics of the year 2002&#39;\n                },\n                series: [\n                    {data: []}, // the data of series 1\n                    {data: []}, // the data of series 2\n                    {data: []}  // the data of series 3\n                ]\n            },\n            { // it is an option corresponding to &#39;2003-01-01&#39;\n                title: {\n                    text: &#39;the statistics of the year 2003&#39;\n                },\n                series: [\n                    {data: []},\n                    {data: []},\n                    {data: []}\n                ]\n            },\n            { // it is an option corresponding to &#39;2004-01-01&#39;\n                title: {\n                    text: &#39;the statistics of the year 2004&#39;\n                },\n                series: [\n                    {data: []},\n                    {data: []},\n                    {data: []}\n                ]\n            }\n        ]\n    }\n);\n</code></pre>\n<p>In the above example, each item in <code class=\"codespan\">timeline.data</code> corresponds to each <code class=\"codespan\">option</code> of <code class=\"codespan\">options</code> array.</p>\n<p><br>\n<strong>Attention and Best Practice: </strong></p>\n<ul>\n<li><p>Shared configuration items are recommended to be set in <code class=\"codespan\">baseOption</code>. When switching in <code class=\"codespan\">timeline</code>, <code class=\"codespan\">option</code> in corresponding <code class=\"codespan\">options</code> array will be merged with <code class=\"codespan\">baseOption</code> to form the final <code class=\"codespan\">option</code>.</p>\n</li>\n<li><p>In <code class=\"codespan\">options</code> array, if an attribute is configured in one of the options, then, it should also be configured in other options. Otherwise, this attribute will be ignored.</p>\n</li>\n<li><p><code class=\"codespan\">options</code> in <em>compound option</em> doesn&#39;t support merge.</p>\n<p>  That is to say, when calling <code class=\"codespan\">chart.setOption(rawOption)</code> after the first time, if <code class=\"codespan\">rawOption</code> is a <em>compound option</em> (meaning that it contains an array of <code class=\"codespan\">options</code>), then the new <code class=\"codespan\">rawOption.options</code> will replace the old one, instead of merging with it. Of course, <code class=\"codespan\">rawOption.baseOption</code> will be merged with that of old option normally.</p>\n</li>\n</ul>\n<p><br>\n<strong>Compatibility with ECharts 2: </strong></p>\n<ul>\n<li><p>ECharts3 doesn&#39;t support <code class=\"codespan\">timeline.notMerge</code> parameter any more, which implies <em>notMerge mode</em> is no longer supported. If you need this function, you may manage the option in your own program before passing to <code class=\"codespan\">setOption(option, true)</code>.</p>\n</li>\n<li><p>Comparing ECharts 3 with ECharts 2, the definition location of timeline attributes are different. The one in ECharts 3 is moved to  <code class=\"codespan\">baseOption</code> and is regarded as a seperate component, which is also compatible with the timeline definition location of ECharts 2. But it is not recommended to do so.</p>\n</li>\n</ul>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the <code class=\"codespan\">timeline</code> component. It would not show with a setting of <code class=\"codespan\">false</code>, but its functions still remain.</p>\n","default":true},"type":{"type":["string"],"description":"<p>This attribute has only one valid value as <code class=\"codespan\">slider</code> by now. You don&#39;t have to change it.</p>\n","default":"'slider'"},"axisType":{"type":["string"],"description":"<p>Type of axis, whose values may be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;value&#39;</code>\n  Numeric axis, which is suitable for continuous data.</li>\n<li><code class=\"codespan\">&#39;category&#39;</code>\n  Category axis, which is suitable for category data.</li>\n<li><code class=\"codespan\">&#39;time&#39;</code>\n  Time axis, which is suitable for continuous time data. Compared with value axis, time axis is equipped with time formatting function and has a different method when calculating axis ticks. For example, for time axis, axis ticks may vary in choosing unit as month, week, date, or hour based on the range of data.</li>\n</ul>\n","default":"'time'"},"currentIndex":{"type":["number"],"description":"<p>Indicates which is the currently selected item. For instance, if <code class=\"codespan\">currentIndex</code> is <code class=\"codespan\">0</code>, it indicates that the currently selected item is <code class=\"codespan\">timeline.data[0]</code> (namely, using <code class=\"codespan\">options[0]</code>).</p>\n","default":0},"autoPlay":{"type":["boolean"],"description":"<p>Whether to play automatically.</p>\n","default":false},"rewind":{"type":["boolean"],"description":"<p>Whether supports playing reversely.</p>\n","default":false},"loop":{"type":["boolean"],"description":"<p>Whether to loop playing.</p>\n","default":true},"playInterval":{"type":["number"],"description":"<p>Indicates play speed (gap time between two state), whose unit is millisecond.</p>\n","default":2000},"realtime":{"type":["boolean"],"description":"<p>Whether the view updates in real time during dragging the control dot.</p>\n","default":true},"controlPosition":{"type":["string"],"description":"<p>Position of the play button, whose valid values are <code class=\"codespan\">&#39;left&#39;</code> and <code class=\"codespan\">&#39;right&#39;</code>.</p>\n","default":"'left'"},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between timeline component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"top":{"type":["string","number"],"description":"<p>Distance between timeline component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"right":{"type":["string","number"],"description":"<p>Distance between timeline component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"<p>Distance between timeline component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"padding":{"type":["number","Array"],"description":"<p>timeline space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"orient":{"type":["string"],"description":"<p>Orientation of the component, whose valid values are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;vertical&#39;</code>: vertical layout.</li>\n<li><code class=\"codespan\">&#39;horizontal&#39;</code>: horizontal layout.</li>\n</ul>\n","default":"'horizontal'"},"inverse":{"type":["boolean"],"description":"<ul>\n<li>Whether to put the <code class=\"codespan\">timeline</code> component reversely, which makes the elements in the front to be at the end.</li>\n</ul>\n","default":false},"symbol":{"type":["string"],"description":"<p>Symbol of timeline.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>","default":"'emptyCircle'"},"symbolSize":{"type":["number","Array"],"description":"<p>timeline symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n","default":10},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of timeline symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of timeline symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the axis. It can be set to be <code class=\"codespan\">false</code> to hide the axis line to make a different style.</p>\n","default":true},"color":{"type":["Color"],"description":"<p>timeline Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#304654'"},"width":{"type":["number"],"description":"<p>timeline  line width.</p>\n","default":2},"type":{"type":["string"],"description":"<p>timeline  line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"<p>Label axis, <code class=\"codespan\">emphasis</code> is the highlighted style of text. For instance, text style in <code class=\"codespan\">emphasis</code> would be used when mouse hovers or legend connects.</p>\n","properties":{"position":{"type":["string","number"],"description":"<p>Configurations:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;auto&#39;</code>:\n  Automatic layout.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code>:\n  Put it along the left margin.\n  It is valid when <a href=\"#timeline.orient\">timline.orient</a> is set as <code class=\"codespan\">&#39;horizontal&#39;</code> .</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code>:\n  Put it along the right margin.\n  It is valid when <a href=\"#timeline.orient\">timline.orient</a> is set as <code class=\"codespan\">&#39;horizontal&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code>:\n  Put it along the margin of the top.\n  It is valid when <a href=\"#timeline.orient\">timline.orient</a> is set as <code class=\"codespan\">&#39;vertical&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code>:\n  Put it along the margin of the bottom.\n  It is valid when <a href=\"#timeline.orient\">timline.orient</a> is set as <code class=\"codespan\">&#39;vertical&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">number</code>:\n  When it is assigned to be a a number value, it indicates the distance between <code class=\"codespan\">label</code> and axis. If it is set to be <code class=\"codespan\">0</code> , <code class=\"codespan\">label</code> would be at the same position with axis. Negative value is valid for the other side of the axis.</p>\n</li>\n</ul>\n","default":"'auto'"},"show":{"type":["boolean"],"description":"<p>Whether to show the label.</p>\n","default":true},"interval":{"type":["string","number"],"description":"<p>Interval of <code class=\"codespan\">label</code>. When it is assigned with a numerical value, such as  <code class=\"codespan\">2</code>, a label would show every 2 items.</p>\n","default":"'auto'"},"rotate":{"type":["prefix"],"description":"<p>Rotation angle of <code class=\"codespan\">label</code>, in which positive values refer to counter clockwise rotation.</p>\n","default":0},"formatter":{"type":["string","Function"],"description":"<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Use string template; template variable is the default label of axis {value}\nformatter: &#39;{value} kg&#39;\n\n// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (idx === 0) {\n        texts.unshift(date.getYear());\n    }\n    return texts.join(&#39;/&#39;);\n}\n</code></pre>\n","default":null},"color":{"type":["Color"],"description":"<p>timeline.lable.normal text color.</p>\n","default":"'#304654'"},"fontStyle":{"type":["string"],"description":"<p>timeline.lable.normal font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p>timeline.lable.normal font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>timeline.lable.normal font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>timeline.lable.normal font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the label.</p>\n","default":true},"interval":{"type":["string","number"],"description":"<p>Interval of <code class=\"codespan\">label</code>. When it is assigned with a numerical value, such as  <code class=\"codespan\">2</code>, a label would show every 2 items.</p>\n","default":"'auto'"},"rotate":{"type":["prefix"],"description":"<p>Rotation angle of <code class=\"codespan\">label</code>, in which positive values refer to counter clockwise rotation.</p>\n","default":0},"formatter":{"type":["string","Function"],"description":"<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Use string template; template variable is the default label of axis {value}\nformatter: &#39;{value} kg&#39;\n\n// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (idx === 0) {\n        texts.unshift(date.getYear());\n    }\n    return texts.join(&#39;/&#39;);\n}\n</code></pre>\n","default":null},"color":{"type":["Color"],"description":"<p>timeline.lable.emphasis text color.</p>\n","default":"'#c23531'"},"fontStyle":{"type":["string"],"description":"<p>timeline.lable.emphasis font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p>timeline.lable.emphasis font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>timeline.lable.emphasis font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>timeline.lable.emphasis font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of timeline , <code class=\"codespan\">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>timeline  color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#304654'"},"borderColor":{"type":["Color"],"description":"<p>timeline  border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p>timeline  border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>timeline  color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#c23531'"},"borderColor":{"type":["Color"],"description":"<p>timeline  border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p>timeline  border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"checkpointStyle":{"type":["Object"],"description":"<p>Style of the selected item (<code class=\"codespan\">checkpoint</code>).</p>\n","properties":{"symbol":{"type":["string"],"description":"<p>Symbol of timeline.checkpointStyle .</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>","default":"'circle'"},"symbolSize":{"type":["number","Array"],"description":"<p>timeline.checkpointStyle  symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n","default":13},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of timeline.checkpointStyle  symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of timeline.checkpointStyle  symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"color":{"type":["Color"],"description":"<p>Color of <code class=\"codespan\">checkpoint</code> in <code class=\"codespan\">timeline</code> component.</p>\n","default":"'#c23531'"},"borderWidth":{"type":["number"],"description":"<p>The border-width of <code class=\"codespan\">checkpoint</code> in <code class=\"codespan\">timeline</code> component.</p>\n","default":5},"borderColor":{"type":["Color"],"description":"<p>The border-color of <code class=\"codespan\">checkpoint</code> in <code class=\"codespan\">timeline</code> component.</p>\n","default":"'rgba(194,53,49, 0.5)'"},"animation":{"type":["boolean"],"description":"<p>In <code class=\"codespan\">timeline</code> component, whether there is animation in <code class=\"codespan\">checkpoint</code> moving during the process of <code class=\"codespan\">timeline</code> playing and switching.</p>\n","default":true},"animationDuration":{"type":["number"],"description":"<p>The animation duration of <code class=\"codespan\">checkpoint</code> in <code class=\"codespan\">timeline</code> component.</p>\n","default":300},"animationEasing":{"type":["string"],"description":"<p>The easing effect of animation of <code class=\"codespan\">checkpoint</code> in <code class=\"codespan\">timeline</code> component. Refers to <a href=\"https://echarts.apache.org/examples/zh/view.html?c=line-easing\" target=\"_blank\">easing sample</a> for different easing effects.</p>\n","default":"'quinticInOut'"}}},"controlStyle":{"type":["Object"],"description":"<p>The style of <em>control button</em>, which includes: <em>play button</em>, <em>previous button</em>, and <em>next button</em>.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show control button. <code class=\"codespan\">false</code> for hide all.</p>\n","default":true},"showPlayBtn":{"type":["boolean"],"description":"<p>Whether to show play button.</p>\n","default":true},"showPrevBtn":{"type":["boolean"],"description":"<p>Whether to show previous button.</p>\n","default":true},"showNextBtn":{"type":["boolean"],"description":"<p>Whether to show next button.</p>\n","default":true},"itemSize":{"type":["number"],"description":"<p>Size of <em>control button</em>, in pixels (px).</p>\n","default":22},"itemGap":{"type":["number"],"description":"<p>Interval between <em>control button</em>, in pixels (px).</p>\n","default":12},"position":{"type":["string"],"description":"<p>the location of <em>control button</em>.</p>\n<ul>\n<li><p>When <a href=\"#timeline.orient\">timeline.orient</a> is set to be <code class=\"codespan\">&#39;horizontal&#39;</code>, <code class=\"codespan\">&#39;left&#39;</code> and <code class=\"codespan\">&#39;right&#39;</code>are valid.</p>\n</li>\n<li><p>When <a href=\"#timeline.orient\">timeline.orient</a> is set to be <code class=\"codespan\">&#39;vertical&#39;</code>, <code class=\"codespan\">&#39;top&#39;</code> and <code class=\"codespan\">&#39;bottom&#39;</code>are valid.</p>\n</li>\n</ul>\n","default":"'left'"},"playIcon":{"type":["string"],"description":"<p>Icon of <em>play status</em> for <em>play button</em>.</p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"stopIcon":{"type":["string"],"description":"<p>Icon of <em>stop status</em> for <em>play button</em>.</p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"prevIcon":{"type":["string"],"description":"<p>Icon of <em>previous button</em>.</p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"nextIcon":{"type":["string"],"description":"<p>Icon of <em>next button</em>.</p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"color":{"type":["Color"],"description":"<p>Button color.</p>\n","default":"'#304654'"},"borderColor":{"type":["Color"],"description":"<p>Color of button border.</p>\n","default":"'#304654'"},"borderWidth":{"type":["number"],"description":"<p>Border width of button.</p>\n","default":1},"emphasis":{"type":["Object"],"description":"<p>Button style in <em>highlighted state</em> (when it&#39;s hovered by mouse).</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Button color.</p>\n","default":"'#c23531'"},"borderColor":{"type":["Color"],"description":"<p>Color of button border.</p>\n","default":"'#c23531'"},"borderWidth":{"type":["number"],"description":"<p>Width of button border.</p>\n","default":2}}}}},"data":{"type":["Array"],"description":"<p><code class=\"codespan\">timeline</code> data. Each item of <code class=\"codespan\">Array</code> can be a instant value. If you need to set style individually for a data item, the <code class=\"codespan\">data</code> item should be written as <code class=\"codespan\">Object</code>. In then <code class=\"codespan\">Object</code>, the attribute of <code class=\"codespan\">value</code> is numerical value. Other attributes, such as shown the examples below, could cover the attribute configurations in <code class=\"codespan\">timeline</code>.</p>\n<p>as follows:</p>\n<pre><code class=\"lang-javascript\">[\n    &#39;2002-01-01&#39;,\n    &#39;2003-01-01&#39;,\n    &#39;2004-01-01&#39;,\n    {\n        value: &#39;2005-01-01&#39;,\n        tooltip: {          // enables `tooltip` to be displayed as mouse hovering to this item.\n            formatter: &#39;{b} xxxx&#39;\n        },\n        symbol: &#39;diamond&#39;,  // the special setting of this item&#39;s symbol.\n        symbolSize: 16      // the special setting of this item&#39;s size.\n    },\n    &#39;2006-01-01&#39;,\n    &#39;2007-01-01&#39;,\n    &#39;2008-01-01&#39;,\n    &#39;2009-01-01&#39;,\n    &#39;2010-01-01&#39;,\n    {\n        value: &#39;2011-01-01&#39;,\n        tooltip: {          // enables `tooltip` to be displayed as mouse hovering to this item.\n            formatter: function (params) {\n                return params.name + &#39;xxxx&#39;;\n            }\n        },\n        symbol: &#39;diamond&#39;,\n        symbolSize: 18\n    },\n]\n</code></pre>\n"}}},"graphic":{"type":["*"],"description":"<p><code class=\"codespan\">graphic</code> component enables creating graphic elements in ECharts.</p>\n<p>Those graphic type are supported.</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n<p>This example shows how to make a watermark and text block:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-graphic&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n<p>This example use hidden graphic elements to implement dragging:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-draggable&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n\n\n<p><br></p>\n<hr>\n<p><strong>Graphic Component Configuration</strong></p>\n<p>A simple way to define a graphic element:</p>\n<pre><code class=\"lang-javascript\">myChart.setOption({\n    ...,\n    graphic: {\n        type: &#39;image&#39;,\n        ...\n    }\n});\n</code></pre>\n<p>Define multiple graphic elements:</p>\n<pre><code class=\"lang-javascript\">myChart.setOption({\n    ...,\n    graphic: [\n        { // A &#39;image&#39; element.\n            type: &#39;image&#39;,\n            ...\n        },\n        { // A &#39;text&#39; element, with id specified.\n            type: &#39;text&#39;,\n            id: &#39;text1&#39;,\n            ...\n        },\n        { // A &#39;group&#39; element, in which children can be defined.\n            type: &#39;group&#39;,\n            children: [\n                {\n                    type: &#39;rect&#39;,\n                    id: &#39;rect1&#39;,\n                    ...\n                },\n                {\n                    type: &#39;image&#39;,\n                    ...\n                },\n                ...\n            ]\n        }\n        ...\n    ]\n});\n\n</code></pre>\n<p>How to remove or replace existing elements by <code class=\"codespan\">setOption</code>:</p>\n<pre><code class=\"lang-javascript\">myChart.setOption({\n    ...,\n    graphic: [\n        { // Remove the element &#39;text1&#39; defined above.\n            id: &#39;text1&#39;,\n            $action: &#39;remove&#39;,\n            ...\n        },\n        { // Replace the element &#39;rect1&#39; to a new circle element.\n          // Note, although in the sample above &#39;rect1&#39; is a children of a group,\n          // it is not necessary to consider level relationship when setOption\n          // again if you use id to specify them.\n            id: &#39;rect1&#39;,\n            $action: &#39;replace&#39;,\n            type: &#39;circle&#39;,\n            ...\n        }\n    ]\n});\n</code></pre>\n<p>Notice, when using <code class=\"codespan\">setOption</code> to modify existing elements, if id is not specified, new options will be mapped to existing elements by their order, which might bring unexpected result sometimes. So, generally, using id is recommended.</p>\n<p><br></p>\n<hr>\n<p><strong>Graphic Element Configuration</strong></p>\n<p>Different types of graphic elements has their own configuration respectively, but they have these common configuration below:</p>\n<pre><code class=\"lang-javascript\">{\n    // id is used to specifying element when willing to update it.\n    // id can be ignored if you do not need it.\n    id: &#39;xxx&#39;,\n\n    // Specify element type. Can not be ignored when define a element at the first time.\n    type: &#39;image&#39;,\n\n    // All of the properties below can be ignored and a default value will be assigned.\n\n    // Specify the operation should be performed to the element when calling `setOption`.\n    // Default value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.\n    $action: &#39;replace&#39;,\n\n    // These four properties is used to locating the element. Each property can be absolute\n    // value (like 10, means 10 pixel) or precent (like &#39;12%&#39;) or &#39;center&#39;/&#39;middle&#39;.\n    left: 10,\n    // right: 10,\n    top: &#39;center&#39;,\n    // bottom: &#39;10%&#39;,\n\n    shape: {\n        // Here are configurations for shape, like `x`, `y`, `cx`, `cy`, `width`,\n        // `height`, `r`, `points`, ...\n        // Note, if `left`/`right`/`top`/`bottom` has been set, `x`/`y`/`cx`/`cy`\n        // do not work here.\n    },\n\n    style: {\n        // Here are configurations for style of the element, like `fill`, `stroke`,\n        // `lineWidth`, `shadowBlur`, ...\n    },\n\n    // z value of the elements.\n    z: 10,\n    // Whether response to mouse events / touch events.\n    silent: true,\n    // Whether the element is visible.\n    invisible: false,\n    // Used to specify whether the entire transformed element (containing children if is group)\n    // is confined in its container. Optional values: &#39;raw&#39;, &#39;all&#39;.\n    bounding: &#39;raw&#39;,\n    // Can be dragged or not.\n    draggable: false,\n    // Event handler, can also be onmousemove, ondrag, ... (listed below)\n    onclick: function () {...}\n}\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>Event Handlers of Graphic Element</strong></p>\n<p>These events are supported:\n<code class=\"codespan\">onclick</code>, <code class=\"codespan\">onmouseover</code>, <code class=\"codespan\">onmouseout</code>, <code class=\"codespan\">onmousemove</code>, <code class=\"codespan\">onmousewheel</code>, <code class=\"codespan\">onmousedown</code>, <code class=\"codespan\">onmouseup</code>, <code class=\"codespan\">ondrag</code>, <code class=\"codespan\">ondragstart</code>, <code class=\"codespan\">ondragend</code>, <code class=\"codespan\">ondragenter</code>, <code class=\"codespan\">ondragleave</code>, <code class=\"codespan\">ondragover</code>, <code class=\"codespan\">ondrop</code>.</p>\n<p><br></p>\n<hr>\n<p><strong>Hierarchy of Graphic Elements</strong></p>\n<p>Only <code class=\"codespan\">group</code> element has children, which enable a group of elements to be positioned and transformed together.</p>\n<p><br></p>\n<hr>\n<p><strong>Shape Configuration of Graphic Element</strong></p>\n<p>Elements with different types have different shape setting repectively. For example:</p>\n<pre><code class=\"lang-javascript\">{\n    type: &#39;rect&#39;,\n    shape: {\n        x: 10,\n        y: 10,\n        width: 100,\n        height: 200\n    }\n},\n{\n    type: &#39;circle&#39;,\n    shape: {\n        cx: 20,\n        cy: 30,\n        r: 100\n    }\n},\n{\n    type: &#39;image&#39;,\n    style: {\n        image: &#39;http://xxx.xxx.xxx/a.png&#39;,\n        x: 100,\n        y: 200,\n        width: 230,\n        height: 400\n    }\n},\n{\n    type: &#39;text&#39;,\n    style: {\n        text: &#39;This text&#39;,\n        x: 100,\n        y: 200\n    }\n\n}\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>Transforming and Absolutely Positioning of Graphic Element</strong></p>\n<p>Element can be transformed (translation, rotation, scale). See <a href=\"#graphic.elements.position\">position</a>, <a href=\"#graphic.elements.rotation\">rotation</a>, <a href=\"#graphic.elements.scale\">scale</a>, <a href=\"#graphic.elements.origin\">origin</a></p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    type: &#39;rect&#39;, // or any other types.\n\n    // Translation, using [0, 0] by default.\n    position: [100, 200],\n\n    // Scale, using [1, 1] by default.\n    scale: [2, 4],\n\n    // Rotation, using 0 by default. Negative value means rotating clockwise.\n    rotation: Math.PI / 4,\n\n    // Origin point of rotation and scale, using [0, 0] by default.\n    origin: [10, 20],\n\n    shape: {\n        // ...\n    }\n}\n</code></pre>\n<ul>\n<li><p>Each element is transformed in the coordinate system of its parent, namely, transform of a element and its parent can be &quot;stacked&quot;.</p>\n</li>\n<li><p>Transformation is performed by this order:</p>\n<ol>\n<li>Translate [-el.origin[0], -el.origin[1]].</li>\n<li>Scale according to el.scale.</li>\n<li>Rotate according to el.rotation.</li>\n<li>Translate back according to el.origin.</li>\n<li>Translate according to el.position.</li>\n</ol>\n</li>\n<li>Namely, scaling and rotating firstly, and then translate. By this mechanism, translation does not affect origin of scale and rotation.</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>Relatively Positioning</strong></p>\n<p>In real application, size of a container is always not fixed. So mechanism of relative position is required. In <code class=\"codespan\">graphic</code> component, <a href=\"#graphic.elements.left\">left</a> / <a href=\"#graphic.elements.right\">right</a> / <a href=\"#graphic.elements.top\">top</a> / <a href=\"#graphic.elements.bottom\">bottom</a> / <a href=\"#graphic.elements.width\">width</a> / <a href=\"#graphic.elements.height\">height</a> are used to position element relatively.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{ // Position the image at the bottom center of its container.\n    type: &#39;image&#39;,\n    left: &#39;center&#39;, // Position at the center horizontally.\n    bottom: &#39;10%&#39;,  // Position beyond the bottom boundary 10%.\n    style: {\n        image: &#39;http://xxx.xxx.xxx/a.png&#39;,\n        width: 45,\n        height: 45\n    }\n},\n{ // Position the entire rotated group at the right-bottom corner of its container.\n    type: &#39;group&#39;,\n    right: 0,  // Position at the right boundary.\n    bottom: 0, // Position at the bottom boundary.\n    rotation: Math.PI / 4,\n    children: [\n        {\n            type: &#39;rect&#39;,\n            left: &#39;center&#39;, // Position at horizontal center according to its parent.\n            top: &#39;middle&#39;,  // Position at vertical center according to its parent.\n            shape: {\n                width: 190,\n                height: 90\n            },\n            style: {\n                fill: &#39;#fff&#39;,\n                stroke: &#39;#999&#39;,\n                lineWidth: 2,\n                shadowBlur: 8,\n                shadowOffsetX: 3,\n                shadowOffsetY: 3,\n                shadowColor: &#39;rgba(0,0,0,0.3)&#39;\n            }\n        },\n        {\n            type: &#39;text&#39;,\n            left: &#39;center&#39;, // Position at horizontal center according to its parent.\n            top: &#39;middle&#39;,  // Position at vertical center according to its parent.\n            style: {\n                fill: &#39;#777&#39;,\n                text: [\n                    &#39;This is text&#39;,\n                    &#39;This is text&#39;,\n                    &#39;Print some text&#39;\n                ].join(&#39;\\n&#39;),\n                font: &#39;14px Microsoft YaHei&#39;\n            }\n        }\n    ]\n}\n</code></pre>\n<p>Note, <a href=\"graphic.elements.bounding\" target=\"_blank\">bounding</a> can be used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"elements":{"type":"Array","items":{"anyOf":[{"type":["Object"],"description":"<p><code class=\"codespan\">group</code> is the only type that can contain children, so that a group of elements can be positioned and transformed together.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n","default":"group"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"$action":{"type":["string"],"description":"<p>Specify the operation should be performed to the element when calling <code class=\"codespan\">setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class=\"codespan\">&#39;replace&#39;</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code class=\"codespan\">&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n","default":"'merge'"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"left":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"right":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"top":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bounding":{"type":["strin"],"description":"<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;all&#39;</code>: (default)\n  Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;raw&#39;</code>:\n  Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n","default":"'all'"},"z":{"type":["number"],"description":"<p>z value of the elements, determine the overlap order.</p>\n","default":0},"zlevel":{"type":["number"],"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n","default":0},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n","default":"'pointer'"},"draggable":{"type":["boolean"],"description":"<p>Can be dragged or not.</p>\n","default":false},"progressive":{"type":["boolean"],"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n","default":false},"width":{"type":["number"],"description":"<p>Specify width of this <code class=\"codespan\">group</code>.</p>\n<p>This width is only used for the positioning of its children.</p>\n<p>When width is <code class=\"codespan\">0</code>, children can also be positioned according to its parent using <code class=\"codespan\">left: &#39;center&#39;</code>.</p>\n","default":0},"height":{"type":["number"],"description":"<p>Specify height of this <code class=\"codespan\">group</code>.</p>\n<p>This height is only used for the positioning of its children.</p>\n<p>When height is <code class=\"codespan\">0</code>, children can also be positioned according to its parent using <code class=\"codespan\">top: &#39;middle&#39;</code>.</p>\n","default":0},"diffChildrenByName":{"type":["boolean"],"description":"<p>In <a href=\"#series-custom\">custom series</a>, when <code class=\"codespan\">diffChildrenByName</code> is set as <code class=\"codespan\">true</code>, for each <a href=\"#graphic.elements-group\">group</a> returned from <a href=\"#series-custom.renderItem\">renderItem</a>, &quot;diff&quot; will be performed to its <a href=\"#graphic.elements-group.children\">children</a> according to the <a href=\"#graphic.elements-polygon.name\">name</a> attribute of each graphic elements. Here &quot;diff&quot; means that map the coming graphic elements to the existing graphic elements when repainting according to <code class=\"codespan\">name</code>, which enables the transition animation if data is modified.</p>\n<p>But notice that the operation is performance consuming, do not use it for large data amount.</p>\n","default":false},"children":{"type":["Array"],"description":"<p>A list of children, each item is a declaration of an element.</p>\n"},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n","default":"image"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"$action":{"type":["string"],"description":"<p>Specify the operation should be performed to the element when calling <code class=\"codespan\">setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class=\"codespan\">&#39;replace&#39;</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code class=\"codespan\">&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n","default":"'merge'"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"left":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"right":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"top":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bounding":{"type":["strin"],"description":"<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;all&#39;</code>: (default)\n  Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;raw&#39;</code>:\n  Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n","default":"'all'"},"z":{"type":["number"],"description":"<p>z value of the elements, determine the overlap order.</p>\n","default":0},"zlevel":{"type":["number"],"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n","default":0},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n","default":"'pointer'"},"draggable":{"type":["boolean"],"description":"<p>Can be dragged or not.</p>\n","default":false},"progressive":{"type":["boolean"],"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n","default":false},"style":{"type":["Object"],"description":"","properties":{"image":{"type":["string"],"description":"<p>Specify contant of the image, can be a URL, or <a href=\"https://tools.ietf.org/html/rfc2397\" target=\"_blank\">dataURI</a>.</p>\n"},"x":{"type":["number"],"description":"<p>The x value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"y":{"type":["numbr"],"description":"<p>The y value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"width":{"type":["number"],"description":"<p>The width of the shape of the element.</p>\n","default":0},"height":{"type":["numbr"],"description":"<p>The height of the shape of the element.</p>\n<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","default":0},"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"<p>Text block.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n","default":"text"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"$action":{"type":["string"],"description":"<p>Specify the operation should be performed to the element when calling <code class=\"codespan\">setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class=\"codespan\">&#39;replace&#39;</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code class=\"codespan\">&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n","default":"'merge'"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"left":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"right":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"top":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bounding":{"type":["strin"],"description":"<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;all&#39;</code>: (default)\n  Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;raw&#39;</code>:\n  Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n","default":"'all'"},"z":{"type":["number"],"description":"<p>z value of the elements, determine the overlap order.</p>\n","default":0},"zlevel":{"type":["number"],"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n","default":0},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n","default":"'pointer'"},"draggable":{"type":["boolean"],"description":"<p>Can be dragged or not.</p>\n","default":false},"progressive":{"type":["boolean"],"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n","default":false},"style":{"type":["Object"],"description":"","properties":{"text":{"type":["string"],"description":"<p>Text content. <code class=\"codespan\">\\n</code> can be used as a line break.</p>\n","default":"''"},"x":{"type":["number"],"description":"<p>The x value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"y":{"type":["numbr"],"description":"<p>The y value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"font":{"type":["string"],"description":"<p>Font size, font type, font weight, font color, follow the form of <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font\" target=\"_blank\">css font</a>.</p>\n<p>For example:</p>\n<pre><code>// size | family\nfont: &#39;2em &quot;STHeiti&quot;, sans-serif&#39;\n\n// style | weight | size | family\nfont: &#39;italic bolder 16px cursive&#39;\n\n// weight | size | family\nfont: &#39;bolder 2em &quot;Microsoft YaHei&quot;, sans-serif&#39;\n</code></pre>"},"textAlign":{"type":["string"],"description":"<p>Text horizontal alignment. Optional values: <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;left&#39;</code> means the left side of the text block is specified by the <a href=\"#graphic.elements-text.style.x\">style.x</a>, while <code class=\"codespan\">&#39;right&#39;</code> means the right side of the text block is specified by <a href=\"#graphic.elements-text.style.y\">style.y</a>.</p>\n","default":"'left'"},"textVerticalAlign":{"type":["string"],"description":"<p>Text vertical alignment. Optional values: <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n"},"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"<p>Rectangle element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n","default":"rect"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"$action":{"type":["string"],"description":"<p>Specify the operation should be performed to the element when calling <code class=\"codespan\">setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class=\"codespan\">&#39;replace&#39;</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code class=\"codespan\">&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n","default":"'merge'"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"left":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"right":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"top":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bounding":{"type":["strin"],"description":"<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;all&#39;</code>: (default)\n  Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;raw&#39;</code>:\n  Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n","default":"'all'"},"z":{"type":["number"],"description":"<p>z value of the elements, determine the overlap order.</p>\n","default":0},"zlevel":{"type":["number"],"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n","default":0},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n","default":"'pointer'"},"draggable":{"type":["boolean"],"description":"<p>Can be dragged or not.</p>\n","default":false},"progressive":{"type":["boolean"],"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"x":{"type":["number"],"description":"<p>The x value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"y":{"type":["numbr"],"description":"<p>The y value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"width":{"type":["number"],"description":"<p>The width of the shape of the element.</p>\n","default":0},"height":{"type":["numbr"],"description":"<p>The height of the shape of the element.</p>\n","default":0},"r":{"type":["Array"],"description":"<p>Specify border radius of the rectangular here. Generally, <code class=\"codespan\">r</code> should be <code class=\"codespan\">[topLeftRadius, topRightRadius, BottomRightRadius, bottomLeftRadius]</code>, where each item is a number.</p>\n<p>Abbreviation is enabled, for example:</p>\n<ul>\n<li><code class=\"codespan\">r</code>: <code class=\"codespan\">1</code>         means <code class=\"codespan\">[1, 1, 1, 1]</code></li>\n<li><code class=\"codespan\">r</code>: <code class=\"codespan\">[1]</code>       means <code class=\"codespan\">[1, 1, 1, 1]</code></li>\n<li><code class=\"codespan\">r</code>: <code class=\"codespan\">[1, 2]</code>    means <code class=\"codespan\">[1, 2, 1, 2]</code></li>\n<li><code class=\"codespan\">r</code>: <code class=\"codespan\">[1, 2, 3]</code> means <code class=\"codespan\">[1, 2, 3, 2]</code></li>\n</ul>\n"}}},"style":{"type":["Object"],"description":"<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"<p>Circle element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n","default":"circle"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"$action":{"type":["string"],"description":"<p>Specify the operation should be performed to the element when calling <code class=\"codespan\">setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class=\"codespan\">&#39;replace&#39;</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code class=\"codespan\">&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n","default":"'merge'"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"left":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"right":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"top":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bounding":{"type":["strin"],"description":"<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;all&#39;</code>: (default)\n  Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;raw&#39;</code>:\n  Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n","default":"'all'"},"z":{"type":["number"],"description":"<p>z value of the elements, determine the overlap order.</p>\n","default":0},"zlevel":{"type":["number"],"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n","default":0},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n","default":"'pointer'"},"draggable":{"type":["boolean"],"description":"<p>Can be dragged or not.</p>\n","default":false},"progressive":{"type":["boolean"],"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"cx":{"type":["number"],"description":"<p>The x value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"cy":{"type":["numbr"],"description":"<p>The y value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"r":{"type":["number"],"description":"<p>Outside radius.</p>\n","default":0}}},"style":{"type":["Object"],"description":"<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"<p>Ring element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n","default":"ring"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"$action":{"type":["string"],"description":"<p>Specify the operation should be performed to the element when calling <code class=\"codespan\">setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class=\"codespan\">&#39;replace&#39;</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code class=\"codespan\">&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n","default":"'merge'"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"left":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"right":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"top":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bounding":{"type":["strin"],"description":"<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;all&#39;</code>: (default)\n  Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;raw&#39;</code>:\n  Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n","default":"'all'"},"z":{"type":["number"],"description":"<p>z value of the elements, determine the overlap order.</p>\n","default":0},"zlevel":{"type":["number"],"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n","default":0},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n","default":"'pointer'"},"draggable":{"type":["boolean"],"description":"<p>Can be dragged or not.</p>\n","default":false},"progressive":{"type":["boolean"],"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"cx":{"type":["number"],"description":"<p>The x value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"cy":{"type":["numbr"],"description":"<p>The y value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"r":{"type":["number"],"description":"<p>Outside radius.</p>\n","default":0},"r0":{"type":["number"],"description":"<p>Inside radius.</p>\n","default":0}}},"style":{"type":["Object"],"description":"<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"<p>Sector element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n","default":"sector"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"$action":{"type":["string"],"description":"<p>Specify the operation should be performed to the element when calling <code class=\"codespan\">setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class=\"codespan\">&#39;replace&#39;</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code class=\"codespan\">&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n","default":"'merge'"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"left":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"right":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"top":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bounding":{"type":["strin"],"description":"<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;all&#39;</code>: (default)\n  Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;raw&#39;</code>:\n  Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n","default":"'all'"},"z":{"type":["number"],"description":"<p>z value of the elements, determine the overlap order.</p>\n","default":0},"zlevel":{"type":["number"],"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n","default":0},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n","default":"'pointer'"},"draggable":{"type":["boolean"],"description":"<p>Can be dragged or not.</p>\n","default":false},"progressive":{"type":["boolean"],"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"cx":{"type":["number"],"description":"<p>The x value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"cy":{"type":["numbr"],"description":"<p>The y value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"r":{"type":["number"],"description":"<p>Outside radius.</p>\n","default":0},"r0":{"type":["number"],"description":"<p>Inside radius.</p>\n","default":0},"startAngle":{"type":["number"],"description":"<p>start angle, in radian.</p>\n","default":0},"endAngle":{"type":["number"],"description":"<p>end anble, in radian.</p>\n","default":"Math.PI * 2"},"clockwise":{"type":["boolean"],"description":"<p>Whether draw clockwise.</p>\n","default":true}}},"style":{"type":["Object"],"description":"<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"<p>Arc element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n","default":"arc"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"$action":{"type":["string"],"description":"<p>Specify the operation should be performed to the element when calling <code class=\"codespan\">setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class=\"codespan\">&#39;replace&#39;</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code class=\"codespan\">&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n","default":"'merge'"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"left":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"right":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"top":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bounding":{"type":["strin"],"description":"<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;all&#39;</code>: (default)\n  Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;raw&#39;</code>:\n  Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n","default":"'all'"},"z":{"type":["number"],"description":"<p>z value of the elements, determine the overlap order.</p>\n","default":0},"zlevel":{"type":["number"],"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n","default":0},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n","default":"'pointer'"},"draggable":{"type":["boolean"],"description":"<p>Can be dragged or not.</p>\n","default":false},"progressive":{"type":["boolean"],"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"cx":{"type":["number"],"description":"<p>The x value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"cy":{"type":["numbr"],"description":"<p>The y value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"r":{"type":["number"],"description":"<p>Outside radius.</p>\n","default":0},"r0":{"type":["number"],"description":"<p>Inside radius.</p>\n","default":0},"startAngle":{"type":["number"],"description":"<p>start angle, in radian.</p>\n","default":0},"endAngle":{"type":["number"],"description":"<p>end anble, in radian.</p>\n","default":"Math.PI * 2"},"clockwise":{"type":["boolean"],"description":"<p>Whether draw clockwise.</p>\n","default":true}}},"style":{"type":["Object"],"description":"<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":null},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":"\"#000\""},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":1},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"<p>Polygon element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n","default":"polygon"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"$action":{"type":["string"],"description":"<p>Specify the operation should be performed to the element when calling <code class=\"codespan\">setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class=\"codespan\">&#39;replace&#39;</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code class=\"codespan\">&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n","default":"'merge'"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"left":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"right":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"top":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bounding":{"type":["strin"],"description":"<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;all&#39;</code>: (default)\n  Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;raw&#39;</code>:\n  Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n","default":"'all'"},"z":{"type":["number"],"description":"<p>z value of the elements, determine the overlap order.</p>\n","default":0},"zlevel":{"type":["number"],"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n","default":0},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n","default":"'pointer'"},"draggable":{"type":["boolean"],"description":"<p>Can be dragged or not.</p>\n","default":false},"progressive":{"type":["boolean"],"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"points":{"type":["Array"],"description":"<p>A list of points, which defines the shape, like <code class=\"codespan\">[[22, 44], [44, 55], [11, 44], ...]</code>.</p>\n"},"smooth":{"type":["number","string"],"description":"<p>Whether smooth the line.</p>\n<ul>\n<li>If the value is number, bezier interpolation is used, and the value specified the level of smooth, which is in the range of <code class=\"codespan\">[0, 1]</code>.</li>\n<li>If the value is <code class=\"codespan\">&#39;spline&#39;</code>, Catmull-Rom spline interpolation is used.</li>\n</ul>\n","default":"undefined"},"smoothConstraint":{"type":["boolean"],"description":"<p>Whether prevent the smooth process cause the line out of the bounding box.</p>\n<p>Only works when <code class=\"codespan\">smooth</code> is <code class=\"codespan\">number</code> (bezier smooth).</p>\n","default":false}}},"style":{"type":["Object"],"description":"<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"<p>Polyline element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n","default":"polyline"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"$action":{"type":["string"],"description":"<p>Specify the operation should be performed to the element when calling <code class=\"codespan\">setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class=\"codespan\">&#39;replace&#39;</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code class=\"codespan\">&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n","default":"'merge'"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"left":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"right":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"top":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bounding":{"type":["strin"],"description":"<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;all&#39;</code>: (default)\n  Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;raw&#39;</code>:\n  Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n","default":"'all'"},"z":{"type":["number"],"description":"<p>z value of the elements, determine the overlap order.</p>\n","default":0},"zlevel":{"type":["number"],"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n","default":0},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n","default":"'pointer'"},"draggable":{"type":["boolean"],"description":"<p>Can be dragged or not.</p>\n","default":false},"progressive":{"type":["boolean"],"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"points":{"type":["Array"],"description":"<p>A list of points, which defines the shape, like <code class=\"codespan\">[[22, 44], [44, 55], [11, 44], ...]</code>.</p>\n"},"smooth":{"type":["number","string"],"description":"<p>Whether smooth the line.</p>\n<ul>\n<li>If the value is number, bezier interpolation is used, and the value specified the level of smooth, which is in the range of <code class=\"codespan\">[0, 1]</code>.</li>\n<li>If the value is <code class=\"codespan\">&#39;spline&#39;</code>, Catmull-Rom spline interpolation is used.</li>\n</ul>\n","default":"undefined"},"smoothConstraint":{"type":["boolean"],"description":"<p>Whether prevent the smooth process cause the line out of the bounding box.</p>\n<p>Only works when <code class=\"codespan\">smooth</code> is <code class=\"codespan\">number</code> (bezier smooth).</p>\n","default":false}}},"style":{"type":["Object"],"description":"<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":null},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":"\"#000\""},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":5},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"<p>Line element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n","default":"line"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"$action":{"type":["string"],"description":"<p>Specify the operation should be performed to the element when calling <code class=\"codespan\">setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class=\"codespan\">&#39;replace&#39;</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code class=\"codespan\">&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n","default":"'merge'"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"left":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"right":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"top":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bounding":{"type":["strin"],"description":"<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;all&#39;</code>: (default)\n  Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;raw&#39;</code>:\n  Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n","default":"'all'"},"z":{"type":["number"],"description":"<p>z value of the elements, determine the overlap order.</p>\n","default":0},"zlevel":{"type":["number"],"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n","default":0},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n","default":"'pointer'"},"draggable":{"type":["boolean"],"description":"<p>Can be dragged or not.</p>\n","default":false},"progressive":{"type":["boolean"],"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"x1":{"type":["number"],"description":"<p>x value of the start point.</p>\n","default":0},"y1":{"type":["number"],"description":"<p>y value of the start point.</p>\n","default":0},"x2":{"type":["number"],"description":"<p>x value of the end point.</p>\n","default":0},"y2":{"type":["number"],"description":"<p>y value of the end point.</p>\n","default":0},"percent":{"type":["number"],"description":"<p>Specify the percentage of drawing, useful in animation.</p>\n<p>Value range: [0, 1].</p>\n","default":1}}},"style":{"type":["Object"],"description":"<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":null},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":"\"#000\""},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":5},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"<p>Quadratic bezier curve or cubic bezier curve.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n","default":"bezierCurve"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"$action":{"type":["string"],"description":"<p>Specify the operation should be performed to the element when calling <code class=\"codespan\">setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class=\"codespan\">&#39;replace&#39;</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code class=\"codespan\">&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n","default":"'merge'"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"left":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"right":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">x</code>, <code class=\"codespan\">cx</code>) will not work.</p>\n","default":"undefined"},"top":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class=\"codespan\">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class=\"codespan\">30</code>, means <code class=\"codespan\">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class=\"codespan\">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code class=\"codespan\">y</code>, <code class=\"codespan\">cy</code>) will not work.</p>\n","default":"undefined"},"bounding":{"type":["strin"],"description":"<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;all&#39;</code>: (default)\n  Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;raw&#39;</code>:\n  Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n","default":"'all'"},"z":{"type":["number"],"description":"<p>z value of the elements, determine the overlap order.</p>\n","default":0},"zlevel":{"type":["number"],"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n","default":0},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n","default":"'pointer'"},"draggable":{"type":["boolean"],"description":"<p>Can be dragged or not.</p>\n","default":false},"progressive":{"type":["boolean"],"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"x1":{"type":["number"],"description":"<p>x value of the start point.</p>\n","default":0},"y1":{"type":["number"],"description":"<p>y value of the start point.</p>\n","default":0},"x2":{"type":["number"],"description":"<p>x value of the end point.</p>\n","default":0},"y2":{"type":["number"],"description":"<p>y value of the end point.</p>\n","default":0},"cpx1":{"type":["number"],"description":"<p>x of control point.</p>\n","default":0},"cpy1":{"type":["number"],"description":"<p>y of control point.</p>\n","default":0},"cpx2":{"type":["number"],"description":"<p>x of the second control point. If specified, cubic bezier is used.</p>\n<p>If both <code class=\"codespan\">cpx2</code> and <code class=\"codespan\">cpy2</code> are not set, quatratic bezier is used.</p>\n","default":null},"cpy2":{"type":["number"],"description":"<p>y of the second control point. If specified, cubic bezier is used.</p>\n<p>If both <code class=\"codespan\">cpx2</code> and <code class=\"codespan\">cpy2</code> are not set, quatratic bezier is used.</p>\n","default":null},"percent":{"type":["number"],"description":"<p>Specify the percentage of drawing, useful in animation.</p>\n<p>Value range: [0, 1].</p>\n","default":1}}},"style":{"type":["Object"],"description":"<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}}]},"description":"<p>A list of all graphic elements.</p>\n<p>Note, the standard configuration of graphic component is:</p>\n<pre><code class=\"lang-javascript\">{\n    graphic: {\n        elements: [\n            {type: &#39;rect&#39;, ...}, {type: &#39;circle&#39;, ...}, ...\n        ]\n    }\n}\n</code></pre>\n<p>But we always use short patterns for convenience:</p>\n<pre><code class=\"lang-javascript\">{\n    graphic: { // Declare only one graphic element.\n        type: &#39;rect&#39;,\n        ...\n    }\n}\n</code></pre>\n<p>Or:</p>\n<pre><code class=\"lang-javascript\">{\n    graphic: [ // Declare multiple graphic elements.\n        {type: &#39;rect&#39;, ...}, {type: &#39;circle&#39;, ...}, ...\n    ]\n}\n</code></pre>\n"}}},"calendar":{"type":["Object"],"description":"<p>Calendar coordinates.</p>\n<p>In ECharts, we are very creative to achieve the calendar chart, by using the calendar coordinates to achieve the calendar chart,\nas shown in the following example, we can use calendar coordinates in heatmap, scatter, effectScatter, and graph.</p>\n<p>Example of using heatmap in calendar coordinates:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-heatmap&edit=1&reset=1\" width=\"800\" height=\"400\"><iframe />\n\n\n<p>Example of using effectScatter in calendar coordinates:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-effectscatter&edit=1&reset=1\" width=\"800\" height=\"600\"><iframe />\n\n\n<p>Example of using graph in calendar coordinates:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-graph&edit=1&reset=1\" width=\"600\" height=\"600\"><iframe />\n\n\n<p>By combining calendar coordinate system and charts, you may be able to create more wonderful effects.</p>\n<p><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=calendar-lunar&amp;edit=1&amp;reset=1\" target=\"_blank\">Display Text in Calendar</a>,\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=calendar-pie&amp;edit=1&amp;reset=1\" target=\"_blank\">Display Pies in Calendar</a></p>\n<hr>\n<p><strong>Calendar layout</strong></p>\n<p>Calendar coordinate system can be placed horizontally or vertically. By convention, the heatmap calendar is horizontal. But if we need bigger cell size in other cases, the total width may be too wide. So <a href=\"#calendar.orient\">calendar.orient</a> can help in this case.</p>\n<hr>\n<p><strong>Adapt to container size</strong></p>\n<p>Calendar coordinate system can be configured to adapt to container size, which is useful when page size is not sure. First of all, like other components, those location and size configurations can be specified on canlendar: <a href=\"#calendar.left\">left</a> <a href=\"#calendar.right\">right</a> <a href=\"#calendar.top\">top</a> <a href=\"bottom\" target=\"_blank\">bottom</a> <a href=\"#calendar.width\">width</a> <a href=\"#calendar.height\">height</a>, which make calendar possible to modify its size according to container size. Besides, <a href=\"#calendar.cellSize\">cellSize</a> can be specified to fix the size of each cell of calendar.</p>\n<hr>\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between calendar component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":80},"top":{"type":["string","number"],"description":"<p>Distance between calendar component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":60},"right":{"type":["string","number"],"description":"<p>Distance between calendar component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"<p>Distance between calendar component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"width":{"type":["number","string"],"description":"<p>The height of calendar coordinates.</p>\n<p>Note: <code class=\"codespan\">cellSize</code> is 20 by default. If <code class=\"codespan\">width</code> is set,\n  <code class=\"codespan\">cellSize[0]</code> will be forced to <code class=\"codespan\">auto</code>;</p>\n","default":"auto"},"height":{"type":["number","string"],"description":"<p>The height of calendar coordinates.</p>\n<p>Note: <code class=\"codespan\">cellSize</code> is 20 by default. If <code class=\"codespan\">height</code> is set,\n  <code class=\"codespan\">cellSize[1]</code> will be forced to <code class=\"codespan\">auto</code>;</p>\n","default":"auto"},"range":{"type":["number","string","Array"],"description":"<p>Required, range of Calendar coordinates, support multiple formats.</p>\n<p>Examples:</p>\n<pre><code class=\"lang-js\">\n// one year\nrange: 2017\n\n// one month\nrange: &#39;2017-02&#39;\n\n//  a range\nrange: [&#39;2017-01-02&#39;, &#39;2017-02-23&#39;]\n\n// note: they will be identified as [&#39;2017-01-01&#39;, &#39;2017-02-01&#39;]\nrange: [&#39;2017-01&#39;, &#39;2017-02&#39;]\n\n</code></pre>\n"},"cellSize":{"type":["number","Array"],"description":"<p>The size of each rect of calendar coordinates, can be set to a single value or array, the first element is width and the second element is height.</p>\n<p>Support setting self-adaptation: <code class=\"codespan\">auto</code>, the default width and height to be 20.</p>\n<p>Examples:</p>\n<pre><code class=\"lang-js\">\n// Set the width and height to be 20\ncellSize: 20\n\n// Set the width to be 20, and height to be 40\ncellSize: [20, 40]\n\n// Set width and height to be self-adaptation\ncellSize: [40]\n\n// Set the width and height to be 20\ncellSize: &#39;auto&#39;\n\n// Set the width to be self-adaptation, and height to be 40\ncellSize: [&#39;auto&#39;, 40]\n\n</code></pre>\n","default":20},"orient":{"type":["string"],"description":"<p>The layout orientation of calendar.</p>\n<p>Options:</p>\n<ul>\n<li>&#39;horizontal&#39;</li>\n<li>&#39;vertical&#39;</li>\n</ul>\n","default":"'horizontal'"},"splitLine":{"type":["Object"],"description":"<p>Calendar coordinates splitLine style.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the splitLine from showing</p>\n","default":true},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>splitLineLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#000"},"width":{"type":["number"],"description":"<p>splitLine line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>splitLine line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n<p>Examples:</p>\n<pre><code class=\"lang-js\">calendar: [{\n    splitLine: {\n        show: true,\n        lineStyle: {\n            color: &#39;#000&#39;,\n            width: 1,\n            type: &#39;solid&#39;\n        }\n    }\n}]\n</code></pre>\n"}}}}},"itemStyle":{"type":["Object"],"description":"<p>Every rect style in calendar coordinates.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>calendar color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#fff"},"borderColor":{"type":["Color"],"description":"<p>calendar border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"'#ccc'"},"borderWidth":{"type":["number"],"description":"<p>calendar border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n<p>Examples:</p>\n<pre><code class=\"lang-js\">calendar: [{\n    itemStyle: {\n        color: &#39;#fff&#39;,\n        borderWidth: 1,\n        borderColor: &#39;#ccc&#39;\n    }\n}]\n</code></pre>\n"}}},"dayLabel":{"type":["Object"],"description":"<p>Day style in calendar coordinates.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent dayLabel from showing.</p>\n","default":true},"firstDay":{"type":["number"],"description":"<p>A week from the beginning of the week, the default starting on Sunday.</p>\n<p>Examples:</p>\n<pre><code class=\"lang-js\">\ncalendar: [{\n    dayLabel: {\n        firstDay: 1 // start on Monday\n    }\n}]\n\n</code></pre>\n","default":0},"margin":{"type":["number"],"description":"<p>The margin between the day label and the axis line.</p>\n","default":0},"position":{"type":["string"],"description":"<p>Position of week, at the beginning or end of the range.</p>\n<p>Options:</p>\n<ul>\n<li>&#39;start&#39;</li>\n<li>&#39;end&#39;</li>\n</ul>\n","default":"'start'"},"nameMap":{"type":["string","Array"],"description":"<p>Week text content, defaults to &#39;en&#39;;\nIt supports Chinese, English, and custom;\nindex 0 always means Sunday;</p>\n<p>Examples:</p>\n<pre><code class=\"lang-js\">\n// shortcut to English  [&#39;S&#39;, &#39;M&#39;, &#39;T&#39;, &#39;W&#39;, &#39;T&#39;, &#39;F&#39;, &#39;S&#39;],\nnameMap: &#39;en&#39;\n\n// shortcut to Chinese [&#39;日&#39;, &#39;一&#39;, &#39;二&#39;, &#39;三&#39;, &#39;四&#39;, &#39;五&#39;, &#39;六&#39;]\nnameMap: &#39;cn&#39;\n\n// Custom settings: mixed in English and Chinese or not displayed\nnameMap: [&#39;S&#39;, &#39;一&#39;, &#39;T&#39;, &#39;三&#39;, &#39;&#39;, &#39;五&#39;, &#39;S&#39;],\n\ncalendar: [{\n    dayLabel: {\n        nameMap: &#39;en&#39;\n    }\n}]\n</code></pre>\n","default":"'en'"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"#000"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"monthLabel":{"type":["Object"],"description":"<p>Month label in calendar coordinates.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent monthLabel from showing.</p>\n","default":true},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"margin":{"type":["number"],"description":"<p>The margin between the month label and the axis line.</p>\n","default":5},"position":{"type":["string"],"description":"<p>Position of week, at the beginning or end of the range.</p>\n<p>Options:</p>\n<ul>\n<li>&#39;start&#39;</li>\n<li>&#39;end&#39;</li>\n</ul>\n","default":"'start'"},"nameMap":{"type":["string","Array"],"description":"<p>Month text content, defaults to &#39;en&#39;;\nIt supports Chinese, English, and custom;\nIndex 0 always means Jan;</p>\n<p>Examples:</p>\n<pre><code class=\"lang-js\">// Shortcut to English [\n                &#39;Jan&#39;, &#39;Feb&#39;, &#39;Mar&#39;,\n                &#39;Apr&#39;, &#39;May&#39;, &#39;Jun&#39;,\n                &#39;Jul&#39;, &#39;Aug&#39;, &#39;Sep&#39;,\n                &#39;Oct&#39;, &#39;Nov&#39;, &#39;Dec&#39;\n            ],\nnameMap: &#39;en&#39;\n\n// Shortcut to Chinese [\n                &#39;一月&#39;, &#39;二月&#39;, &#39;三月&#39;,\n                &#39;四月&#39;, &#39;五月&#39;, &#39;六月&#39;,\n                &#39;七月&#39;, &#39;八月&#39;, &#39;九月&#39;,\n                &#39;十月&#39;, &#39;十一月&#39;, &#39;十二月&#39;\n            ]\nnameMap: &#39;cn&#39;\n\n// Custom settings: mixed in English and Chinese or not displayed\nnameMap: [\n            &#39;一月&#39;, &#39;Feb&#39;, &#39;三月&#39;,\n            &#39;四月&#39;, &#39;May&#39;, &#39;六月&#39;,\n            &#39;七月&#39;, &#39;八月&#39;, &#39;&#39;,\n            &#39;十月&#39;, &#39;Nov&#39;, &#39;十二月&#39;\n        ],\n\n\ncalendar: [{\n    monthLabel: {\n        nameMap: &#39;en&#39;\n    }\n}]\n</code></pre>\n","default":"'en'"},"formatter":{"type":["string","Function"],"description":"<p>Formatter of month text label, which supports string template and callback function.</p>\n<p>Examples:</p>\n<pre><code class=\"lang-js\">// Use string template; eg: 2017-02\n/*\n    template variables:\n    {nameMap} default nameMap eg:&#39;Feb&#39;\n    {yyyy}   four-digit years eg: 2017\n    {yy}   two-digit years eg: 17\n    {MM}   two-digit month eg: 02\n    {M}   single-digit month eg: 2\n*/\nformatter: &#39;{yyyy}-{MM}&#39;\n\n// Use callback function;\n/*\n    function parameters:\n    param.nameMap default nameMap eg:&#39;Feb&#39;\n    param.yyyy   four-digit years eg: 2017\n    param.yy   two-digit years eg: 17\n    param.MM   two-digit month eg: 02\n    param.M   single-digit eg: 2\n*/\nformatter: function (param) {\n    // ...\n    return param.MM;\n}\n</code></pre>\n","default":null},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"#000"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"yearLabel":{"type":["Object"],"description":"<p>Year label in calendar coordinates.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to stop yearLabel from showing</p>\n","default":true},"margin":{"type":["number"],"description":"<p>The margin between the month label and the axis line.</p>\n","default":30},"position":{"type":["string"],"description":"<p>Position of year.</p>\n<p>Default:\nwhen orient is set as <code class=\"codespan\">horizontal</code>, position is <code class=\"codespan\">left</code>\nwhen orient is set as <code class=\"codespan\">vertical</code>, position is <code class=\"codespan\">top</code></p>\n<p>Options:</p>\n<ul>\n<li>&#39;top&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p>Formatter of year text label, which supports string template and callback function.</p>\n<p>By default, the current range of the year, if the interval across the year, showing the first year and the last year</p>\n<p>Examples:</p>\n<pre><code class=\"lang-js\">// Use string template; eg: [&#39;2017-10-11&#39;, &#39;2018-01-21&#39;]\n/*\n    template variables:\n    {nameMap} default nameMap eg:&#39;2017-2018&#39;\n    {start}   start year eg: 2017\n    {end}   end year eg: 2018\n*/\n\nformatter: &#39;{start}-{end}&#39;\n\n// Use callback function;\n/*\n    function parameters:\n    param.nameMap default nameMap eg:&#39;2017-2018&#39;\n    param.start   start year eg: 2017\n    param.end   end year eg: 2018\n*/\nformatter: function (param) {\n    // ...\n    return param.end;\n}\n</code></pre>\n","default":null},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false}}},"dataset":{"type":["Object"],"description":"<p><code class=\"codespan\">dataset</code> component is published since ECharts 4. <code class=\"codespan\">dataset</code> brings convenience in data management separated with styles and enables data reuse by different series. More importantly, it enables data encoding from data to visual, which brings convenience in some scenarios.</p>\n<p>More details about <code class=\"codespan\">dataset</code> can be checked in the <a href=\"tutorial.html#Dataset\" target=\"_blank\">tutorial</a>.</p>\n<hr>\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"source":{"type":["Array","Object"],"description":"<p>Source data. Generally speaking, a source data describe a table, where these format below can be applied:</p>\n<p>2d array, where <a href=\"#dataset.dimensions\">dimension names</a> can be provided in the first row/column, or do not provide, only data.</p>\n<pre><code class=\"lang-js\">[\n    [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n    [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n    [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n    [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n]\n</code></pre>\n<p>Row based key-value format (object array), where the keys indicate <a href=\"#dataset.dimensions\">dimension names</a>.</p>\n<pre><code class=\"lang-js\">[\n    {product: &#39;Matcha Latte&#39;, count: 823, score: 95.8},\n    {product: &#39;Milk Tea&#39;, count: 235, score: 81.4},\n    {product: &#39;Cheese Cocoa&#39;, count: 1042, score: 91.2},\n    {product: &#39;Walnut Brownie&#39;, count: 988, score: 76.9}\n]\n</code></pre>\n<p>Column based key-value format, where each value represents a column of a table.</p>\n<pre><code class=\"lang-js\">{\n    &#39;product&#39;: [&#39;Matcha Latte&#39;, &#39;Milk Tea&#39;, &#39;Cheese Cocoa&#39;, &#39;Walnut Brownie&#39;],\n    &#39;count&#39;: [823, 235, 1042, 988],\n    &#39;score&#39;: [95.8, 81.4, 91.2, 76.9]\n}\n</code></pre>\n<p>More details about <code class=\"codespan\">dataset</code> can be checked in the <a href=\"tutorial.html#dataset\" target=\"_blank\">tutorial</a>.</p>\n"},"dimensions":{"type":["Array"],"description":"<p><code class=\"codespan\">dimensions</code> can be used to define dimension info for <code class=\"codespan\">series.data</code> or <code class=\"codespan\">dataset.source</code>.</p>\n<p>Notice: if <a href=\"#dataset\">dataset</a> is used, we can provide dimension names in the first column/row of <a href=\"#dataset.source\">dataset.source</a>, and not need to specify <code class=\"codespan\">dimensions</code> here. But if <code class=\"codespan\">dimensions</code> is specified here, echarts will not retrieve dimension names from the first row/column of <code class=\"codespan\">dataset.source</code> any more.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\n    ]\n}\n</code></pre>\n<p>Each data item of <code class=\"codespan\">dimensions</code> can be:</p>\n<ul>\n<li><code class=\"codespan\">string</code>, for example, <code class=\"codespan\">&#39;someName&#39;</code>, which equals to <code class=\"codespan\">{name: &#39;someName&#39;}</code>.</li>\n<li><code class=\"codespan\">Object</code>, where the attributes can be:<ul>\n<li>name: <code class=\"codespan\">string</code>.</li>\n<li>type: <code class=\"codespan\">string</code>, supports:<ul>\n<li><code class=\"codespan\">number</code></li>\n<li><code class=\"codespan\">float</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array\" target=\"_blank\">Float64Array</a></li>\n<li><code class=\"codespan\">int</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array\" target=\"_blank\">Int32Array</a></li>\n<li><code class=\"codespan\">ordinal</code>, discrete value, which represents string generally.</li>\n<li><code class=\"codespan\">time</code>, time value, see <a href=\"#series.data\">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code class=\"codespan\">string</code>, generally used in tooltip for dimension display. If not specified, use <code class=\"codespan\">name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code class=\"codespan\">dimensions</code> is specified, the default <code class=\"codespan\">tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code class=\"codespan\">tooltip</code> will displayed only value horizontally.</p>\n"},"sourceHeader":{"type":["boolean"],"description":"<p>Whether the first row/column of <code class=\"codespan\">dataset.source</code> represents <a href=\"dataset.dimensions\" target=\"_blank\">dimension names</a>. Optional values:</p>\n<ul>\n<li><code class=\"codespan\">null/undefine</code>: means auto detect whether the first row/column is dimension names or data.</li>\n<li><code class=\"codespan\">true</code>: the first row/column is dimension names.</li>\n<li><code class=\"codespan\">false</code>: data start from the first row/column.</li>\n</ul>\n<p>Note: &quot;the first row/column&quot; means that if <a href=\"#series.seriesLayoutBy\">series.seriesLayoutBy</a> is set as <code class=\"codespan\">&#39;column&#39;</code>, pick the first row, otherwise, if it is set as <code class=\"codespan\">&#39;row&#39;</code>, pick the first column.</p>\n"}}},"aria":{"type":["*"],"description":"<p>W3C defined the Accessible Rich Internet Applications Suite (<a href=\"https://www.w3.org/WAI/intro/aria\" target=\"_blank\">WAI-ARIA</a>) to make Web content and Web applications more accessible to the disabled. From ECharts 4.0, we support ARIA by generating description for charts automatically.</p>\n<p>By default, ARIA is disabled. To enable it, you should set <a href=\"#aria.show\">aria.show</a> to be <code class=\"codespan\">true</code>. After enabling, it will generate descriptions based on charts, series, data, and so on. Users may change the generated description.</p>\n<p><strong>For example:</strong></p>\n<p>For config:</p>\n<pre><code class=\"lang-js\">option = {\n    aria: {\n        show: true\n    },\n    title: {\n        text: &#39;Source of user access to a site&#39;,\n        x: &#39;center&#39;\n    },\n    series: [\n        {\n             Name: &#39;access source&#39;,\n            type: &#39;pie&#39;,\n            data: [\n                { value: 335, name: &#39;direct access&#39; },\n                { value: 310, name: &#39;mail marketing&#39; },\n                { value: 234, name: &#39;union ad&#39; },\n                { value: 135, name: &#39;video ad&#39; },\n                { value: 1548, name: &#39;search engine&#39; }\n            ]\n        }\n    ]\n};\n</code></pre>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/aria-pie&edit=1&reset=1\" width=\"700\" height=\"300\"><iframe />\n\n\n<p>There should be an <code class=\"codespan\">aria-label</code> attribute on the chart DOM, which can help the disabled understand the content of charts with the help of certain devices. The value of the label is:</p>\n<pre><code>This is a chart of &quot;Source of user access to a site.&quot; The chart type is a pie chart that indicates the source of the visit. The data is - direct access data is 335, mail marketing data is 310, union ad data is 234, video ad data is 135, search engine data is 1548.\n</code></pre><p>The default language is in Chinese, but you can configure it with templates. The following document shows how to do it.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to enable ARIA. When enabled, there should be an <code class=\"codespan\">aria-label</code> label.</p>\n","default":false},"description":{"type":["string"],"description":"<p>By default, the description is generated by our algorithm based on charts. If user wants to set their own description, <code class=\"codespan\">description</code> should be set to the whole description.</p>\n<p>This is useful when single data values cannot represent what the chart means. For example, if the chart is a map containing many scatter points. Default description can only show the data, but the users may find it hard to interpret. In this case, <code class=\"codespan\">description</code> should be set to describe the meaning of chart.</p>\n","default":null},"general":{"type":["Object"],"description":"<p>General description of chart.</p>\n","properties":{"withTitle":{"type":["string"],"description":"<p>If <a href=\"#title.text\">title.text</a> exists, then this is used. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{title}</code>: will be replaced by <a href=\"#title.text\">title.text</a>.</li>\n</ul>\n","default":"'This is a chart about \"{title}\".'"},"withoutTitle":{"type":["string"],"description":"<p>If <a href=\"#title.text\">title.text</a> does not exist, then this is used.</p>\n","default":"'This is a chart'"}}},"series":{"type":["Object"],"description":"<p>Series-related configures.</p>\n","properties":{"maxCount":{"type":["number"],"description":"<p>Maximum series number.</p>\n","default":10},"single":{"type":["Object"],"description":"<p>Description used when there is only one chart.</p>\n","properties":{"prefix":{"type":["string"],"description":"<p>General description for all series. This displays before all series descriptions. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{seriesCount}</code>: will be replaced by series count, which is 1.</li>\n</ul>\n","default":"''"},"withName":{"type":["string"],"description":"<p>If chart contains <code class=\"codespan\">name</code> attribute, then this is used. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{seriesName}</code>: will be replaced by the series <code class=\"codespan\">name</code>;</li>\n<li><code class=\"codespan\">{seriesType}</code>: will be replaced by the series type name.</li>\n</ul>\n","default":"'The chart type is {seriesType}, which means {seriesName}. '"},"withoutName":{"type":["string"],"description":"<p>If chart doesn&#39;t contain <code class=\"codespan\">name</code> attribute, then this is used. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{seriesType}</code>: will be replaced by series type name.</li>\n</ul>\n","default":"'The chart type is {seriesType}.'"}}},"multiple":{"type":["Object"],"description":"<p>Description used when there are more than one chart.</p>\n","properties":{"prefix":{"type":["string"],"description":"<p>General description for all series. This displays before all series descriptions. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{seriesCount}</code>: will be replaced by series count.</li>\n</ul>\n","default":"'It consists of {seriesCount} chart series. '"},"withName":{"type":["string"],"description":"<p>If series contains <code class=\"codespan\">name</code> attribute, then this is used. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{seriesName}</code>: will be replaced by series <code class=\"codespan\">name</code>;</li>\n<li><code class=\"codespan\">{seriesType}</code>: will be replaced by series type name.</li>\n</ul>\n","default":"'The chart type is {seriesType}, which means {seriesName}. '"},"withoutName":{"type":["string"],"description":"<p>If series doesn&#39;t contain <code class=\"codespan\">name</code> attribute, then this is used. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{seriesType}</code>: will be replaced by series type name.</li>\n</ul>\n","default":"'The chart type is {seriesType}.'"},"separator":{"type":["Object"],"description":"<p>Separators between series and series.</p>\n","properties":{"middle":{"type":["string"],"description":"<p>Separators other than the last one.</p>\n","default":"';'"},"end":{"type":["string"],"description":"<p>The last series seperator.</p>\n","default":"'.'"}}}}}}},"data":{"type":["Object"],"description":"<p>Data-related configures.</p>\n","properties":{"maxCount":{"type":["number"],"description":"<p>Maximum data number.</p>\n","default":10},"allData":{"type":["string"],"description":"<p>Description used when all data is displayed. Note that this option will <strong>not</strong> set to display all data. If all data should be displayed, <a href=\"#aria.data.maxCount\">aria.data.maxCount</a> should be set to be <code class=\"codespan\">Number.MAX_VALUE</code>.</p>\n","default":"'Its data is --'"},"partialData":{"type":["string"],"description":"<p>Description used when only part of data is displayed. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{displayCnt}</code>: number of data displayed.</li>\n</ul>\n","default":"''Where the first {displayCnt} entry is -''"},"withName":{"type":["string"],"description":"<p>If data contains <code class=\"codespan\">name</code> attribute, then this is used. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{name}</code>: will be replaced by data <code class=\"codespan\">name</code>;</li>\n<li><code class=\"codespan\">{value}</code>: will be replaced by data value.</li>\n</ul>\n","default":"'{name}'s data is {value}'"},"withoutName":{"type":["string"],"description":"<p>If data doesn&#39;t contain <code class=\"codespan\">name</code> attribute, then this is used. Template variable:</p>\n<ul>\n<li><code class=\"codespan\">{value}</code>: will be replaced by data value.</li>\n</ul>\n","default":"'{value}'"},"separator":{"type":["Object"],"description":"<p>Separators between data and data.</p>\n","properties":{"middle":{"type":["string"],"description":"<p>Separators other than the last one.</p>\n","default":"','"},"end":{"type":["string"],"description":"<p>The last data separator.</p>\n<p>Note that since series <code class=\"codespan\">separator.end</code> is used after the last data, <code class=\"codespan\">data.separator.end</code> is not needed in most cases.</p>\n","default":"''"}}}}}}},"series":{"type":"Array","items":{"anyOf":[{"type":["Object"],"description":"<p><strong>broken line chart</strong></p>\n<p>Broken line chart relates all the data points <a href=\"#series-line.symbol\">symbol</a> by broken lines, which is used to show the trend of data changing. It could be used in both <a href=\"#grid\">rectangular coordinate</a> and<a href=\"#polar\">polar coordinate</a>.</p>\n<p><strong>Tip:</strong> When <a href=\"#series-line.areaStyle\">areaStyle</a> is set, area chart will be drew.</p>\n<p><strong>Tip:</strong> With <a href=\"#visualMap-piecewise\">visualMap</a> component, Broken line / area chart can have different colors on different sections, as below:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-aqi&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n","properties":{"type":{"type":["string"],"description":"","default":"'line'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;cartesian2d&#39;</code></p>\n<p>  Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-bar.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-bar.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">&#39;polar&#39;</code></p>\n<p>  Use polar coordinates, with <a href=\"#series-bar.polarIndex\">polarIndex</a> to assign the corresponding polar coordinate component.</p>\n</li>\n</ul>\n","default":"'cartesian2d'"},"xAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#xAxis\">x axis</a> to combine with, which is  useful for multiple x axes in one chart.</p>\n","default":0},"yAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#yAxis\">y axis</a> to combine with, which is  useful for multiple y axes in one chart.</p>\n","default":0},"polarIndex":{"type":["number"],"description":"<p>Index of <a href=\"#polar\">polar coordinate</a> to combine with, which is useful for multiple polar axes in one chart.</p>\n","default":0},"symbol":{"type":["string","Function"],"description":"<p>Symbol of line point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-line.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'circle'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>line point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-line.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":4},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of line point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-line.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of line point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"showSymbol":{"type":["boolean"],"description":"<p>Whether to show symbol. It would be shown during tooltip hover.</p>\n","default":true},"showAllSymbol":{"type":["boolean"],"description":"<p>Only work when main axis is <code class=\"codespan\">&#39;category&#39;</code> axis (<code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;category&#39;</code>). Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;auto&#39;</code>: Default value. Show all symbols if there is enough space. Otherwise follow the interval strategy with with <a href=\"#xAxis.axisLabel.interval\">axisLabel.interval</a>.</li>\n<li><code class=\"codespan\">true</code>: Show all symbols.</li>\n<li><code class=\"codespan\">false</code>: Follow the interval strategy with <a href=\"#xAxis.axisLabel.interval\">axisLabel.interval</a>.</li>\n</ul>\n","default":"'auto'"},"hoverAnimation":{"type":["boolean"],"description":"<p>Set this to <code class=\"codespan\">false</code> to prevent the animation effect when the mouse is hovering over a symbol</p>\n","default":true},"legendHoverLink":{"type":["boolean"],"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n","default":true},"stack":{"type":["string"],"description":"<p>If stack the value. On the same category axis, the series with the same <code class=\"codespan\">stack</code> name would be put on top of each other.</p>\n<p>The effect of the below example could be seen through stack switching of <a href=\"#toolbox\">toolbox</a> on the top right corner:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/line-stack-tiled&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n\n","default":null},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n","default":"'pointer'"},"connectNulls":{"type":["boolean"],"description":"<p>Whether to connect the line across null points.</p>\n","default":false},"clip":{"type":["boolean"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.4.0</code></p>\n</blockquote>\n<p>If clip the overflow on the coordinate system. Clip results varies between series:</p>\n<ul>\n<li>Scatter:Ignore the symbols exceeds the coordinate system. Not clip the elements.</li>\n<li>Bar:Clip all the overflowed. With bar width kept.</li>\n<li>Line:Clip the overflowed line.</li>\n<li>Lines: Clip all the overflowed.</li>\n<li>Candlestick: Ignore the elements exceeds the coordinate system.</li>\n<li>Custom: Clip all the olverflowed.</li>\n</ul>\n<p>All these series have default value <code class=\"codespan\">true</code> except custom series. Set it to <code class=\"codespan\">false</code> if you don&#39;t want to clip.</p>\n","default":true},"step":{"type":["string","boolean"],"description":"<p>Whether to show as a step line. It can be <code class=\"codespan\">true</code>, <code class=\"codespan\">false</code>. Or <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>. Which will configure the turn point of step line.</p>\n<p>See the example using different <code class=\"codespan\">step</code> options:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-step&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n\n","default":false},"label":{"type":["Object"],"description":"<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'top'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>The style of the symbol point of broken line.</p>\n","properties":{"color":{"type":["Color","Function"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n<p>Supports callback functions, in the form of:</p>\n<pre><code class=\"lang-js\">(params: Object) =&gt; Color\n</code></pre>\n<p>Input parameters are <code class=\"codespan\">seriesIndex</code>, <code class=\"codespan\">dataIndex</code>, <code class=\"codespan\">data</code>, <code class=\"codespan\">value</code>, and etc. of data item.</p>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"lineStyle":{"type":["Object"],"description":"<p>Line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":2},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"areaStyle":{"type":["Object"],"description":"<p>The style of area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"origin":{"type":["string"],"description":"<p>Origin position of area.</p>\n<p>By default, the area between axis line and data will be the area to be filled. This config enables you to fill data to the max or min of the axis data.</p>\n<p>Valid values include: <code class=\"codespan\">&#39;auto&#39;</code> (default), <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>.</p>\n<ul>\n<li><code class=\"codespan\">&#39;auto&#39;</code> to fill between axis line to data;</li>\n<li><code class=\"codespan\">&#39;start&#39;</code> to fill between min axis value (when not <code class=\"codespan\">inverse</code>) to data;</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> to fill between max axis value (when not <code class=\"codespan\">inverse</code>) to data;</li>\n</ul>\n","default":"'auto'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"<p>Highlight style of the graphic.</p>\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"smooth":{"type":["boolean","number"],"description":"<p>Whether to show as smooth curve.</p>\n<p>If is typed in <code class=\"codespan\">boolean</code>, then it means whether to enable smoothing. If is typed in <code class=\"codespan\">number</code>, valued from 0 to 1, then it means smoothness. A smaller value makes it less smooth.</p>\n<p>Please refer to <a href=\"#series-line.smoothMonotone\">smoothMonotone</a> to change smoothing algorithm.</p>\n","default":false},"smoothMonotone":{"type":["string"],"description":"<p>Whether the broken line keep the monotonicity when it is smoothed. It can be set as <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code> to keep the monotonicity on x axis or y axis.</p>\n<p>It is usually used on dual value axis.</p>\n<p>Here are 2 examples of broken line chart with dual value axis, showing the differences when <code class=\"codespan\">smoothMonotone</code> is without any setting, and <code class=\"codespan\">smoothMonotone</code> is set as <code class=\"codespan\">&#39;x&#39;</code>.</p>\n<ul>\n<li>No setting about <code class=\"codespan\">smoothMonotone</code>:</li>\n</ul>\n<p><img width=\"300\" height=\"auto\" src=\"documents/asset/img/smooth-monotone-none.png\"></p>\n<ul>\n<li>It is set as <code class=\"codespan\">&#39;x&#39;</code>:</li>\n</ul>\n<p><img width=\"300\" height=\"auto\" src=\"documents/asset/img/smooth-monotone-x.png\"></p>\n"},"sampling":{"type":["string"],"description":"<p>The dowmsampling strategy used when the data size is much larger than pixel size. It will improve the performance when turned on. Defaults to be turned off, indicating that all the data points will be drawn.</p>\n<p>Options:</p>\n<ul>\n<li><code class=\"codespan\">&#39;average&#39;</code> Use average value of filter points</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> Use maximum value of filter points</li>\n<li><code class=\"codespan\">&#39;min&#39;</code> Use minimum value of filter points</li>\n<li><code class=\"codespan\">&#39;sum&#39;</code> Use sum of filter points</li>\n</ul>\n"},"dimensions":{"type":["Array"],"description":"<p><code class=\"codespan\">dimensions</code> can be used to define dimension info for <code class=\"codespan\">series.data</code> or <code class=\"codespan\">dataset.source</code>.</p>\n<p>Notice: if <a href=\"#dataset\">dataset</a> is used, we can provide dimension names in the first column/row of <a href=\"#dataset.source\">dataset.source</a>, and not need to specify <code class=\"codespan\">dimensions</code> here. But if <code class=\"codespan\">dimensions</code> is specified here, echarts will not retrieve dimension names from the first row/column of <code class=\"codespan\">dataset.source</code> any more.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\n    ]\n}\n</code></pre>\n<p>Each data item of <code class=\"codespan\">dimensions</code> can be:</p>\n<ul>\n<li><code class=\"codespan\">string</code>, for example, <code class=\"codespan\">&#39;someName&#39;</code>, which equals to <code class=\"codespan\">{name: &#39;someName&#39;}</code>.</li>\n<li><code class=\"codespan\">Object</code>, where the attributes can be:<ul>\n<li>name: <code class=\"codespan\">string</code>.</li>\n<li>type: <code class=\"codespan\">string</code>, supports:<ul>\n<li><code class=\"codespan\">number</code></li>\n<li><code class=\"codespan\">float</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array\" target=\"_blank\">Float64Array</a></li>\n<li><code class=\"codespan\">int</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array\" target=\"_blank\">Int32Array</a></li>\n<li><code class=\"codespan\">ordinal</code>, discrete value, which represents string generally.</li>\n<li><code class=\"codespan\">time</code>, time value, see <a href=\"#series.data\">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code class=\"codespan\">string</code>, generally used in tooltip for dimension display. If not specified, use <code class=\"codespan\">name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code class=\"codespan\">dimensions</code> is specified, the default <code class=\"codespan\">tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code class=\"codespan\">tooltip</code> will displayed only value horizontally.</p>\n"},"encode":{"type":["Object"],"description":"<p>Define what is encoded to for each dimension of <code class=\"codespan\">data</code>. For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n</code></pre>\n<p>When <a href=\"#series.dimensions\">dimensions</a> is used to defined name for a certain dimension, <code class=\"codespan\">encode</code> can refer the name directly. For example:</p>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<p>The basic structure of <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code> or some special reserved names like &quot;tooltip&quot;, &quot;itemName&quot; etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code class=\"codespan\">encode</code> listed as follows:</p>\n<pre><code class=\"lang-js\">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension &quot;product&quot; and &quot;score&quot; in the tooltip.\n    tooltip: [&#39;product&#39;, &#39;score&#39;]\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // &#39;pie&#39;, &#39;funnel&#39;, where data item name can be displayed in legend.\n    itemName: 3\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension &quot;score&quot; to the X axis.\n    x: [1, 5, &#39;score&#39;],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like &#39;pie&#39;, &#39;funnel&#39; etc.:\nencode: {\n    value: 3\n}\n</code></pre>\n<p>This is an <a href=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a> for <code class=\"codespan\">encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code class=\"codespan\">encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href=\"#dataZoom\">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class=\"lang-js\">var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            return {\n                type: &#39;circle&#39;,\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: &#39;blue&#39;\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n</code></pre>\n"},"seriesLayoutBy":{"type":["string"],"description":"<p>When <a href=\"#dataset\">dataset</a> is used, <code class=\"codespan\">seriesLayoutBy</code> specifies whether the column or the row of <code class=\"codespan\">dataset</code> is mapped to the series, namely, the series is &quot;layout&quot; on columns or rows. Optional values:</p>\n<ul>\n<li>&#39;column&#39;: by default, the columns of <code class=\"codespan\">dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>&#39;row&#39;:the rows of <code class=\"codespan\">dataset</code> are mapped to the series. In this case, each row represents a dimension.</li>\n</ul>\n<p>Check this <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=dataset-series-layout-by\" target=\"_blank\">example</a>.</p>\n","default":"'column'"},"datasetIndex":{"type":["number"],"description":"<p>If <a href=\"#series.data\">series.data</a> is not specified, and <a href=\"#dataset\">dataset</a> exists, the series will use <code class=\"codespan\">dataset</code>. <code class=\"codespan\">datasetIndex</code> specifies which dataset will be used.</p>\n","default":0},"data":{"type":["Array"],"description":"<p>Data array of series, which can be in the following forms:</p>\n<p>Notice, if no <code class=\"codespan\">data</code> specified in series, and there is <a href=\"#dataset\">dataset</a> in option, series will use the first <a href=\"#dataset\">dataset</a> as its datasource. If <code class=\"codespan\">data</code> has been specified, <a href=\"#dataset\">dataset</a> will not used.</p>\n<p><code class=\"codespan\">series.datasetIndex</code> can be used to specify other <a href=\"#dataset\">dataset</a>.</p>\n<p>Basically, data is represented by a two-dimension array, like the example below, where each column is named as a &quot;dimension&quot;.</p>\n<pre><code class=\"lang-js\">series: [{\n    data: [\n        // dimX   dimY   other dimensions ...\n        [  3.4,    4.5,   15,   43],\n        [  4.2,    2.3,   20,   91],\n        [  10.8,   9.5,   30,   18],\n        [  7.2,    8.8,   18,   57]\n    ]\n}]\n</code></pre>\n<ul>\n<li>In <a href=\"#grid\">cartesian (grid)</a>, &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href=\"#xAxis\">xAxis</a> and <a href=\"#yAxis\">yAxis</a> respectively.</li>\n<li>In <a href=\"#polar\">polar</a> &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href=\"#radiusAxis\">radiusAxis</a> 和 <a href=\"#anbleAxis\">angleAxis</a> respectively.</li>\n<li>Other dimensions are optional, which can be used in other places. For example:<ul>\n<li><a href=\"#visualMap\">visualMap</a> can map one or more dimensions to visual (color, symbol size ...).</li>\n<li><a href=\"#series.symbolSize\">series.symbolSize</a> can be set as a callback function, where symbol size can be calculated by values of a certain dimension.</li>\n<li>Values in other dimensions can be shown by <a href=\"#tooltip.formatter\">tooltip.formatter</a> or <a href=\"#series.label.formatter\">series.label.formatter</a>.</li>\n</ul>\n</li>\n</ul>\n<p>Especially, when there is one and only one category axis (axis.type is <code class=\"codespan\">&#39;category&#39;</code>), data can be simply be represented by a one-dimension array, like:</p>\n<pre><code class=\"lang-js\">xAxis: {\n    data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;]\n},\nseries: [{\n    // Each item corresponds to each item in xAxis.data.\n    data: [23,  44,  55,  19]\n    // In fact, it is the simplification of the format below:\n    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n</code></pre>\n<p><br>\n<strong>Relationship between &quot;value&quot; and <a href=\"#xAxis.type\">axis.type</a></strong></p>\n<ul>\n<li><p>When a dimension corresponds to a value axis (axis.type is <code class=\"codespan\">&#39;value&#39;</code> or <code class=\"codespan\">&#39;log&#39;</code>):</p>\n<p>  The value can be a <code class=\"codespan\">number</code> (like <code class=\"codespan\">12</code>) (can also be a number in a <code class=\"codespan\">string</code> format, like <code class=\"codespan\">&#39;12&#39;</code>).</p>\n</li>\n<li><p>When a dimension corresponds to a category axis (axis.type is <code class=\"codespan\">&#39;category&#39;</code>):</p>\n<p>  The value should be the ordinal of the axis.data (based on <code class=\"codespan\">0</code>), the string value of the axis.data. For example:</p>\n<pre><code class=\"lang-js\">  xAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;]\n  },\n  yAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;, &#39;p&#39;, &#39;q&#39;]\n  },\n  series: [{\n      data: [\n          // xAxis      yAxis\n          [  0,           0,    2  ], // This point is located at xAxis: &#39;Monday&#39;, yAxis: &#39;a&#39;.\n          [  &#39;Thursday&#39;,  2,    1  ], // This point is located at xAxis: &#39;Thursday&#39;, yAxis: &#39;m&#39;.\n          [  2,          &#39;p&#39;,   2  ], // This point is located at xAxis: &#39;Wednesday&#39;, yAxis: &#39;p&#39;.\n          [  3,           3,    5  ]\n      ]\n  }]\n</code></pre>\n<p>  There is an example of double category axes: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-punchCard\" target=\"_blank\">Github Punchcard</a>.</p>\n</li>\n<li><p>When a dimension corresponds to a time axis (type is <code class=\"codespan\">&#39;time&#39;</code>), the value can be:</p>\n<ul>\n<li>a timestamp, like <code class=\"codespan\">1484141700832</code>, which represents a UTC time.</li>\n<li>a date string, in one of the formats below:<ul>\n<li>a subset of <a href=\"http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15\" target=\"_blank\">ISO 8601</a>, only including (all of these are treated as local time unless timezone is specified, which is consistent with <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>):<ul>\n<li>only part of year/month/date/time are specified: <code class=\"codespan\">&#39;2012-03&#39;</code>, <code class=\"codespan\">&#39;2012-03-01&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 05&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 05:06&#39;</code>.</li>\n<li>separated by <code class=\"codespan\">&quot;T&quot;</code> or a space: <code class=\"codespan\">&#39;2012-03-01T12:22:33.123&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 12:22:33.123&#39;</code>.</li>\n<li>timezone specified: <code class=\"codespan\">&#39;2012-03-01T12:22:33Z&#39;</code>, <code class=\"codespan\">&#39;2012-03-01T12:22:33+8000&#39;</code>, <code class=\"codespan\">&#39;2012-03-01T12:22:33-05:00&#39;</code>.</li>\n</ul>\n</li>\n<li>other date string format (all of these are treated as local time):\n<code class=\"codespan\">&#39;2012&#39;</code>, <code class=\"codespan\">&#39;2012-3-1&#39;</code>, <code class=\"codespan\">&#39;2012/3/1&#39;</code>, <code class=\"codespan\">&#39;2012/03/01&#39;</code>,\n<code class=\"codespan\">&#39;2009/6/12 2:00&#39;</code>, <code class=\"codespan\">&#39;2009/6/12 2:05:08&#39;</code>, <code class=\"codespan\">&#39;2009/6/12 2:05:08.123&#39;</code>.</li>\n</ul>\n</li>\n<li>a JavaScript Date instance created by user:<ul>\n<li>Caution, when using a data string to create a Date instance, <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">browser differences and inconsistencies</a> should be considered.</li>\n<li>For example: In chrome, <code class=\"codespan\">new Date(&#39;2012-01-01&#39;)</code> is treated as a Jan 1st 2012 in UTC, while <code class=\"codespan\">new Date(&#39;2012-1-1&#39;)</code> and <code class=\"codespan\">new Date(&#39;2012/01/01&#39;)</code> are treated as Jan 1st 2012 in local timezone. In safari <code class=\"codespan\">new Date(&#39;2012-1-1&#39;)</code> is not supported.</li>\n<li>So if you intent to perform <code class=\"codespan\">new Date(dateString)</code>, it is strongly recommended to use a time parse library (e.g., <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>), or use <code class=\"codespan\">echarts.number.parseDate</code>, or check <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">this</a>.</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<strong>Customize a data item:</strong></p>\n<p>When needing to customize a data item, it can be set as an object, where property <code class=\"codespan\">value</code> reprensent real value. For example:</p>\n<pre><code class=\"lang-js\">[\n    12,\n    24,\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    33\n]\n// Or\n[\n    [12, 332],\n    [24, 32],\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    [33, 31]\n]\n</code></pre>\n<p><br>\n<strong>Empty value:</strong></p>\n<p><code class=\"codespan\">&#39;-&#39;</code> or <code class=\"codespan\">null</code> or <code class=\"codespan\">undefined</code> or <code class=\"codespan\">NaN</code> can be used to describe that a data item does not exist (ps:<em>not exist</em> does not means its value is <code class=\"codespan\">0</code>).</p>\n<p>For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.</p>\n<p><br><br></p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>The name of data item.</p>\n"},"value":{"type":["number"],"description":"<p>The value of a single data item.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of single data.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>","default":"'circle'"},"symbolSize":{"type":["number","Array"],"description":"<p>single data symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n","default":4},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of single data symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of single data symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"label":{"type":["Object"],"description":"<p>The style of the text of single data point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"top"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>The style of the symbol of single data point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Bar color. </p>\n","default":"auto"},"borderColor":{"type":["Color"],"description":"<p>The border color of bar.</p>\n","default":"'#000'"},"borderWidth":{"type":["number"],"description":"<p>The border width of bar. defaults to have no border.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Bar color. </p>\n","default":"auto"},"borderColor":{"type":["Color"],"description":"<p>The border color of bar.</p>\n","default":"'#000'"},"borderWidth":{"type":["number"],"description":"<p>The border width of bar. defaults to have no border.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-line.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-line.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-line.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-line.markPoint.data.x\">x</a>, <a href=\"#series-line.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-line.markPoint.data.coord\">coord</a> attribute, in which <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-line.markPoint.data.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-line.markPoint.data.valueIndex\">valueIndex</a> or <a href=\"#series-line.markPoint.data.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n    {\n        name: &#39;maximum&#39;,\n        type: &#39;max&#39;\n    }, \n    {\n        name: &#39;coordinate&#39;,\n        coord: [10, 20]\n    }, {\n        name: &#39;fixed x position&#39;,\n        yAxis: 10,\n        x: &#39;90%&#39;\n    }, \n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Available when using <a href=\"#series-line.markPoint.data.type\">type</a> it is used to assign maximum value and minimum value in dimensions, it could be <code class=\"codespan\">0</code> (xAxis, radiusAxis), <code class=\"codespan\">1</code> (yAxis, angleAxis), and use the first value axis dimension by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-line.markPoint.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["Object"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-line.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class=\"codespan\">symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-line.markLine.data.0.x\">x</a>, <a href=\"#series-line.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-line.markLine.data.0.coord\">coord</a> attribute, in which <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-line.markLine.data.0.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-line.markLine.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-line.markLine.data.0.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n<li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code class=\"codespan\">xAxis</code> or <code class=\"codespan\">yAxis</code>. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a> for example.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p>You may also set the type of mark line through <code class=\"codespan\">type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code class=\"codespan\">valueIndex</code>.</p>\n<pre><code>data: [\n    {\n        name: &#39;average line&#39;,\n        // &#39;average&#39;, &#39;min&#39;, and &#39;max&#39; are supported\n        type: &#39;average&#39;\n    },\n    {\n        name: &#39;Horizontal line with Y value at 100&#39;,\n        yAxis: 100\n    },\n    [\n        {\n            // Use the same name with starting and ending point\n            name: &#39;Minimum to Maximum&#39;,\n            type: &#39;min&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n    [\n        {\n            name: &#39;Markline between two points&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [{\n        // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n        yAxis: &#39;max&#39;,\n        x: &#39;90%&#39;\n    }, {\n        type: &#39;max&#39;\n    }],\n    [\n        {\n            name: &#39;Mark line between two points&#39;,\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n<li><code class=\"codespan\">&#39;median&#39;</code> median value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-line.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-line.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'starting point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n<li><code class=\"codespan\">&#39;median&#39;</code> median value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-line.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-line.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'ending point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code class=\"codespan\">data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li><p>Specify the coordinate in screen coordinate system using <a href=\"#series-line.markArea.data.0.x\">x</a>, <a href=\"#series-line.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code class=\"codespan\">5</code>), or percent (e.g., the value is <code class=\"codespan\">&#39;35%&#39;</code>).</p>\n</li>\n<li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using\n<a href=\"#series-line.markArea.data.0.coord\">coord</a>, which can be also set as <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> (e.g, <code class=\"codespan\">coord: [23, &#39;min&#39;]</code>, or <code class=\"codespan\">coord: [&#39;average&#39;, &#39;max&#39;]</code>).</p>\n</li>\n</ol>\n<ol start=\"3\">\n<li>Locate the point on the min value or max value of <code class=\"codespan\">series.data</code> using <a href=\"#series-line.markArea.data.0.type\">type</a>, where <a href=\"#series-line.markArea.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-line.markPoint.data.0.valueDim\">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</li>\n<li>If in cartesian, you can only specify <code class=\"codespan\">xAxis</code> or <code class=\"codespan\">yAxis</code> to define a mark area based on only X or Y axis, see sample <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a></li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n\n    [\n        {\n            name: &#39;From average to max&#39;,\n            type: &#39;average&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n\n    [\n        {\n            name: &#39;Mark area between two points in data coordiantes&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [\n        {\n            name: &#39;From 60 to 80&#39;,\n            yAxis: 60\n        },\n        {\n            yAxis: 80\n        }\n    ], [\n        {\n            name: &#39;Mark area covers all data&#39;\n            coord: [&#39;min&#39;, &#39;min&#39;]\n        },\n        {\n            coord: [&#39;max&#39;, &#39;max&#39;]\n        }\n    ],\n    [\n        {\n            name: &#39;Mark area in two screen points&#39;,\n            x: 100,\n            y: 100\n        }, {\n            x: &#39;90%&#39;,\n            y: &#39;10%&#39;\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> max value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> min value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-line.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-line.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'start'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> max value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> min value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-line.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-line.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'end'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in broken line graph.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in broken line graph, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"linear"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong>bar chart</strong></p>\n<p>Bar chart shows different data through the height of a bar, which is used in <a href=\"#grid\">rectangular coordinate</a> with at least 1 category axis.</p>\n","properties":{"type":{"type":["string"],"description":"","default":"'bar'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"legendHoverLink":{"type":["boolean"],"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n","default":true},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;cartesian2d&#39;</code></p>\n<p>  Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-bar.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-bar.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n","default":"'cartesian2d'"},"xAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#xAxis\">x axis</a> to combine with, which is  useful for multiple x axes in one chart.</p>\n","default":0},"yAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#yAxis\">y axis</a> to combine with, which is  useful for multiple y axes in one chart.</p>\n","default":0},"roundCap":{"type":["boolean"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.5.0</code></p>\n</blockquote>\n<p>If to add round caps at the end of the bar sectors. Valid only for bar series on polar coordinates.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=polar-roundCap&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":false},"label":{"type":["Object"],"description":"<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of , <code class=\"codespan\">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Bar color.  By default, colors from global palette <a href=\"#color\">option.color</a> is used. </p>\n","default":"auto"},"borderColor":{"type":["Color"],"description":"<p>The border color of bar.</p>\n","default":"'#000'"},"borderWidth":{"type":["number"],"description":"<p>The border width of bar. defaults to have no border.</p>\n","default":0},"barBorderRadius":{"type":["number","Array"],"description":"<p>The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.</p>\n<p>For example:</p>\n<pre><code>barBorderRadius: 5, // consistently set the size of 4 rounded corners\nbarBorderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n</code></pre>","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"showBackground":{"type":["boolean"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.7.0</code></p>\n</blockquote>\n<p>Whether to show background behind each bar. Use <a href=\"#series-bar.backgroundStyle\">backgroundStyle</a> to set background style.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-background&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n","default":false},"backgroundStyle":{"type":["Object"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.7.0</code></p>\n</blockquote>\n<p>Background style of each bar if <a href=\"#series-bar.showBackground\">showBackground</a> is set to be <code class=\"codespan\">true</code>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-background&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n\n","properties":{"color":{"type":["Color"],"description":"<p>Bar color. </p>\n","default":"'rgba(180, 180, 180, 0.2)'"},"borderColor":{"type":["Color"],"description":"<p>The border color of bar.</p>\n","default":"'#000'"},"borderWidth":{"type":["number"],"description":"<p>The border width of bar. defaults to have no border.</p>\n","default":0},"barBorderRadius":{"type":["number","Array"],"description":"<p>The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.</p>\n<p>For example:</p>\n<pre><code>barBorderRadius: 5, // consistently set the size of 4 rounded corners\nbarBorderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n</code></pre>","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Bar color. </p>\n","default":"auto"},"borderColor":{"type":["Color"],"description":"<p>The border color of bar.</p>\n","default":"'#000'"},"borderWidth":{"type":["number"],"description":"<p>The border width of bar. defaults to have no border.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"stack":{"type":["string"],"description":"<p>Name of stack. On the same category axis, the series with the same <code class=\"codespan\">stack</code> name would be put on top of each other.</p>\n","default":null},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n","default":"'pointer'"},"barWidth":{"type":["number","string"],"description":"<p>The width of the bar. Adaptive when not specified.</p>\n<p>Can be an absolute value like <code class=\"codespan\">40</code> or a percent value like <code class=\"codespan\">&#39;60%&#39;</code>. The percent is based on the calculated category width.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code class=\"codespan\">&#39;bar&#39;</code> series. This attribute should be set on the last <code class=\"codespan\">&#39;bar&#39;</code> series in the coodinate system, then it will be adopted by all <code class=\"codespan\">&#39;bar&#39;</code> series in the coordinate system.</p>\n","default":null},"barMaxWidth":{"type":["number","string"],"description":"<p>The maximum width of the bar.</p>\n<p>Has higer priority than <a href=\"#series-bar.barWidth\">barWidth</a>.</p>\n<p>Can be an absolute value like <code class=\"codespan\">40</code> or a percent value like <code class=\"codespan\">&#39;60%&#39;</code>. The percent is based on the calculated category width.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code class=\"codespan\">&#39;bar&#39;</code> series. This attribute should be set on the last <code class=\"codespan\">&#39;bar&#39;</code> series in the coodinate system, then it will be adopted by all <code class=\"codespan\">&#39;bar&#39;</code> series in the coordinate system.</p>\n","default":null},"barMinWidth":{"type":["number","string"],"description":"<p>The minimum width of the bar. In cartesian the default value is <code class=\"codespan\">1</code>, otherwise the default value if <code class=\"codespan\">null</code>.</p>\n<p>Has higer priority than <a href=\"#series-bar.barWidth\">barWidth</a>.</p>\n<p>Can be an absolute value like <code class=\"codespan\">40</code> or a percent value like <code class=\"codespan\">&#39;60%&#39;</code>. The percent is based on the calculated category width.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code class=\"codespan\">&#39;bar&#39;</code> series. This attribute should be set on the last <code class=\"codespan\">&#39;bar&#39;</code> series in the coodinate system, then it will be adopted by all <code class=\"codespan\">&#39;bar&#39;</code> series in the coordinate system.</p>\n"},"barMinHeight":{"type":["number"],"description":"<p>The minimum width of bar. It could be used to avoid the following situation: the interaction would be affected when the value of some data item is too small.</p>\n","default":0},"barGap":{"type":["string"],"description":"<p>The gap between bars between different series, is a percent value like <code class=\"codespan\">&#39;30%&#39;</code>, which means <code class=\"codespan\">30%</code> of the bar width.</p>\n<p>Set barGap as <code class=\"codespan\">&#39;-100%&#39;</code> can overlap bars that belong to different series, which is useful when making a series of bar be background.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code class=\"codespan\">&#39;bar&#39;</code> series. This attribute should be set on the last <code class=\"codespan\">&#39;bar&#39;</code> series in the coodinate system, then it will be adopted by all <code class=\"codespan\">&#39;bar&#39;</code> series in the coordinate system.</p>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/barGrid-barGap&reset=1&edit=1\" width=\"600\" height=\"400\"><iframe />\n\n\n","default":"30%"},"barCategoryGap":{"type":["string"],"description":"<p>The bar gap of a single series, defaults to be <code class=\"codespan\">20%</code> of the category gap, can be set as a fixed value.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code class=\"codespan\">&#39;bar&#39;</code> series. This attribute should be set on the last <code class=\"codespan\">&#39;bar&#39;</code> series in the coodinate system, then it will be adopted by all <code class=\"codespan\">&#39;bar&#39;</code> series in the coordinate system.</p>\n","default":"'20%'"},"large":{"type":["boolean"],"description":"<p>Whether to enable the optimization of large-scale data. It could be set when large data causes performance problem.</p>\n<p>After being enabled, <code class=\"codespan\">largeThreshold</code> can be used to indicate the minimum number for turning on the optimization.</p>\n<p>But when the optimization enabled, the style of single data item can&#39;t be customized any more.</p>\n","default":false},"largeThreshold":{"type":["number"],"description":"<p>The threshold enabling the drawing optimization.</p>\n","default":400},"progressive":{"type":["number"],"description":"<p><code class=\"codespan\">progressive</code> specifies the amount of graphic elements that can be rendered within a frame (about 16ms) if &quot;progressive rendering&quot; enabled.</p>\n<p>When data amount is from thousand to more than 10 million, it will take too long time to render all of the graphic elements. Since ECharts 4, &quot;progressive rendering&quot; is supported in its workflow, which processes and renders data chunk by chunk alone with each frame, avoiding to block the UI thread of the browser.</p>\n<p>Set <code class=\"codespan\">progressive: 0</code> to disable progressive permanently. By default, progressive is auto-enabled when data amount is bigger than <code class=\"codespan\">progressiveThreshold</code>.</p>\n","default":5000},"progressiveThreshold":{"type":["number"],"description":"<p>If current data amount is over the threshold, &quot;progressive rendering&quot; is enabled.</p>\n","default":3000},"progressiveChunkMode":{"type":["string"],"description":"<p>Chunk approach, optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;sequential&#39;</code>: slice data by data index.</li>\n<li><code class=\"codespan\">&#39;mod&#39;</code>: slice data by mod, which make the data items of each chunk coming from all over the data, bringing better visual effect while progressive rendering.</li>\n</ul>\n","default":"mod"},"dimensions":{"type":["Array"],"description":"<p><code class=\"codespan\">dimensions</code> can be used to define dimension info for <code class=\"codespan\">series.data</code> or <code class=\"codespan\">dataset.source</code>.</p>\n<p>Notice: if <a href=\"#dataset\">dataset</a> is used, we can provide dimension names in the first column/row of <a href=\"#dataset.source\">dataset.source</a>, and not need to specify <code class=\"codespan\">dimensions</code> here. But if <code class=\"codespan\">dimensions</code> is specified here, echarts will not retrieve dimension names from the first row/column of <code class=\"codespan\">dataset.source</code> any more.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\n    ]\n}\n</code></pre>\n<p>Each data item of <code class=\"codespan\">dimensions</code> can be:</p>\n<ul>\n<li><code class=\"codespan\">string</code>, for example, <code class=\"codespan\">&#39;someName&#39;</code>, which equals to <code class=\"codespan\">{name: &#39;someName&#39;}</code>.</li>\n<li><code class=\"codespan\">Object</code>, where the attributes can be:<ul>\n<li>name: <code class=\"codespan\">string</code>.</li>\n<li>type: <code class=\"codespan\">string</code>, supports:<ul>\n<li><code class=\"codespan\">number</code></li>\n<li><code class=\"codespan\">float</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array\" target=\"_blank\">Float64Array</a></li>\n<li><code class=\"codespan\">int</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array\" target=\"_blank\">Int32Array</a></li>\n<li><code class=\"codespan\">ordinal</code>, discrete value, which represents string generally.</li>\n<li><code class=\"codespan\">time</code>, time value, see <a href=\"#series.data\">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code class=\"codespan\">string</code>, generally used in tooltip for dimension display. If not specified, use <code class=\"codespan\">name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code class=\"codespan\">dimensions</code> is specified, the default <code class=\"codespan\">tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code class=\"codespan\">tooltip</code> will displayed only value horizontally.</p>\n"},"encode":{"type":["Object"],"description":"<p>Define what is encoded to for each dimension of <code class=\"codespan\">data</code>. For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n</code></pre>\n<p>When <a href=\"#series.dimensions\">dimensions</a> is used to defined name for a certain dimension, <code class=\"codespan\">encode</code> can refer the name directly. For example:</p>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<p>The basic structure of <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code> or some special reserved names like &quot;tooltip&quot;, &quot;itemName&quot; etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code class=\"codespan\">encode</code> listed as follows:</p>\n<pre><code class=\"lang-js\">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension &quot;product&quot; and &quot;score&quot; in the tooltip.\n    tooltip: [&#39;product&#39;, &#39;score&#39;]\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // &#39;pie&#39;, &#39;funnel&#39;, where data item name can be displayed in legend.\n    itemName: 3\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension &quot;score&quot; to the X axis.\n    x: [1, 5, &#39;score&#39;],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like &#39;pie&#39;, &#39;funnel&#39; etc.:\nencode: {\n    value: 3\n}\n</code></pre>\n<p>This is an <a href=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a> for <code class=\"codespan\">encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code class=\"codespan\">encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href=\"#dataZoom\">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class=\"lang-js\">var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            return {\n                type: &#39;circle&#39;,\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: &#39;blue&#39;\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n</code></pre>\n"},"seriesLayoutBy":{"type":["string"],"description":"<p>When <a href=\"#dataset\">dataset</a> is used, <code class=\"codespan\">seriesLayoutBy</code> specifies whether the column or the row of <code class=\"codespan\">dataset</code> is mapped to the series, namely, the series is &quot;layout&quot; on columns or rows. Optional values:</p>\n<ul>\n<li>&#39;column&#39;: by default, the columns of <code class=\"codespan\">dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>&#39;row&#39;:the rows of <code class=\"codespan\">dataset</code> are mapped to the series. In this case, each row represents a dimension.</li>\n</ul>\n<p>Check this <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=dataset-series-layout-by\" target=\"_blank\">example</a>.</p>\n","default":"'column'"},"datasetIndex":{"type":["number"],"description":"<p>If <a href=\"#series.data\">series.data</a> is not specified, and <a href=\"#dataset\">dataset</a> exists, the series will use <code class=\"codespan\">dataset</code>. <code class=\"codespan\">datasetIndex</code> specifies which dataset will be used.</p>\n","default":0},"data":{"type":["Array"],"description":"<p>Data array of series, which can be in the following forms:</p>\n<p>Notice, if no <code class=\"codespan\">data</code> specified in series, and there is <a href=\"#dataset\">dataset</a> in option, series will use the first <a href=\"#dataset\">dataset</a> as its datasource. If <code class=\"codespan\">data</code> has been specified, <a href=\"#dataset\">dataset</a> will not used.</p>\n<p><code class=\"codespan\">series.datasetIndex</code> can be used to specify other <a href=\"#dataset\">dataset</a>.</p>\n<p>Basically, data is represented by a two-dimension array, like the example below, where each column is named as a &quot;dimension&quot;.</p>\n<pre><code class=\"lang-js\">series: [{\n    data: [\n        // dimX   dimY   other dimensions ...\n        [  3.4,    4.5,   15,   43],\n        [  4.2,    2.3,   20,   91],\n        [  10.8,   9.5,   30,   18],\n        [  7.2,    8.8,   18,   57]\n    ]\n}]\n</code></pre>\n<ul>\n<li>In <a href=\"#grid\">cartesian (grid)</a>, &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href=\"#xAxis\">xAxis</a> and <a href=\"#yAxis\">yAxis</a> respectively.</li>\n<li>In <a href=\"#polar\">polar</a> &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href=\"#radiusAxis\">radiusAxis</a> 和 <a href=\"#anbleAxis\">angleAxis</a> respectively.</li>\n<li>Other dimensions are optional, which can be used in other places. For example:<ul>\n<li><a href=\"#visualMap\">visualMap</a> can map one or more dimensions to visual (color, symbol size ...).</li>\n<li><a href=\"#series.symbolSize\">series.symbolSize</a> can be set as a callback function, where symbol size can be calculated by values of a certain dimension.</li>\n<li>Values in other dimensions can be shown by <a href=\"#tooltip.formatter\">tooltip.formatter</a> or <a href=\"#series.label.formatter\">series.label.formatter</a>.</li>\n</ul>\n</li>\n</ul>\n<p>Especially, when there is one and only one category axis (axis.type is <code class=\"codespan\">&#39;category&#39;</code>), data can be simply be represented by a one-dimension array, like:</p>\n<pre><code class=\"lang-js\">xAxis: {\n    data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;]\n},\nseries: [{\n    // Each item corresponds to each item in xAxis.data.\n    data: [23,  44,  55,  19]\n    // In fact, it is the simplification of the format below:\n    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n</code></pre>\n<p><br>\n<strong>Relationship between &quot;value&quot; and <a href=\"#xAxis.type\">axis.type</a></strong></p>\n<ul>\n<li><p>When a dimension corresponds to a value axis (axis.type is <code class=\"codespan\">&#39;value&#39;</code> or <code class=\"codespan\">&#39;log&#39;</code>):</p>\n<p>  The value can be a <code class=\"codespan\">number</code> (like <code class=\"codespan\">12</code>) (can also be a number in a <code class=\"codespan\">string</code> format, like <code class=\"codespan\">&#39;12&#39;</code>).</p>\n</li>\n<li><p>When a dimension corresponds to a category axis (axis.type is <code class=\"codespan\">&#39;category&#39;</code>):</p>\n<p>  The value should be the ordinal of the axis.data (based on <code class=\"codespan\">0</code>), the string value of the axis.data. For example:</p>\n<pre><code class=\"lang-js\">  xAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;]\n  },\n  yAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;, &#39;p&#39;, &#39;q&#39;]\n  },\n  series: [{\n      data: [\n          // xAxis      yAxis\n          [  0,           0,    2  ], // This point is located at xAxis: &#39;Monday&#39;, yAxis: &#39;a&#39;.\n          [  &#39;Thursday&#39;,  2,    1  ], // This point is located at xAxis: &#39;Thursday&#39;, yAxis: &#39;m&#39;.\n          [  2,          &#39;p&#39;,   2  ], // This point is located at xAxis: &#39;Wednesday&#39;, yAxis: &#39;p&#39;.\n          [  3,           3,    5  ]\n      ]\n  }]\n</code></pre>\n<p>  There is an example of double category axes: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-punchCard\" target=\"_blank\">Github Punchcard</a>.</p>\n</li>\n<li><p>When a dimension corresponds to a time axis (type is <code class=\"codespan\">&#39;time&#39;</code>), the value can be:</p>\n<ul>\n<li>a timestamp, like <code class=\"codespan\">1484141700832</code>, which represents a UTC time.</li>\n<li>a date string, in one of the formats below:<ul>\n<li>a subset of <a href=\"http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15\" target=\"_blank\">ISO 8601</a>, only including (all of these are treated as local time unless timezone is specified, which is consistent with <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>):<ul>\n<li>only part of year/month/date/time are specified: <code class=\"codespan\">&#39;2012-03&#39;</code>, <code class=\"codespan\">&#39;2012-03-01&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 05&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 05:06&#39;</code>.</li>\n<li>separated by <code class=\"codespan\">&quot;T&quot;</code> or a space: <code class=\"codespan\">&#39;2012-03-01T12:22:33.123&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 12:22:33.123&#39;</code>.</li>\n<li>timezone specified: <code class=\"codespan\">&#39;2012-03-01T12:22:33Z&#39;</code>, <code class=\"codespan\">&#39;2012-03-01T12:22:33+8000&#39;</code>, <code class=\"codespan\">&#39;2012-03-01T12:22:33-05:00&#39;</code>.</li>\n</ul>\n</li>\n<li>other date string format (all of these are treated as local time):\n<code class=\"codespan\">&#39;2012&#39;</code>, <code class=\"codespan\">&#39;2012-3-1&#39;</code>, <code class=\"codespan\">&#39;2012/3/1&#39;</code>, <code class=\"codespan\">&#39;2012/03/01&#39;</code>,\n<code class=\"codespan\">&#39;2009/6/12 2:00&#39;</code>, <code class=\"codespan\">&#39;2009/6/12 2:05:08&#39;</code>, <code class=\"codespan\">&#39;2009/6/12 2:05:08.123&#39;</code>.</li>\n</ul>\n</li>\n<li>a JavaScript Date instance created by user:<ul>\n<li>Caution, when using a data string to create a Date instance, <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">browser differences and inconsistencies</a> should be considered.</li>\n<li>For example: In chrome, <code class=\"codespan\">new Date(&#39;2012-01-01&#39;)</code> is treated as a Jan 1st 2012 in UTC, while <code class=\"codespan\">new Date(&#39;2012-1-1&#39;)</code> and <code class=\"codespan\">new Date(&#39;2012/01/01&#39;)</code> are treated as Jan 1st 2012 in local timezone. In safari <code class=\"codespan\">new Date(&#39;2012-1-1&#39;)</code> is not supported.</li>\n<li>So if you intent to perform <code class=\"codespan\">new Date(dateString)</code>, it is strongly recommended to use a time parse library (e.g., <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>), or use <code class=\"codespan\">echarts.number.parseDate</code>, or check <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">this</a>.</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<strong>Customize a data item:</strong></p>\n<p>When needing to customize a data item, it can be set as an object, where property <code class=\"codespan\">value</code> reprensent real value. For example:</p>\n<pre><code class=\"lang-js\">[\n    12,\n    24,\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    33\n]\n// Or\n[\n    [12, 332],\n    [24, 32],\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    [33, 31]\n]\n</code></pre>\n<p><br>\n<strong>Empty value:</strong></p>\n<p><code class=\"codespan\">&#39;-&#39;</code> or <code class=\"codespan\">null</code> or <code class=\"codespan\">undefined</code> or <code class=\"codespan\">NaN</code> can be used to describe that a data item does not exist (ps:<em>not exist</em> does not means its value is <code class=\"codespan\">0</code>).</p>\n<p>For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.</p>\n<p><br><br></p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>The name of data item.</p>\n"},"value":{"type":["number"],"description":"<p>The value of a single data item.</p>\n"},"label":{"type":["Object"],"description":"<p>The style setting of the text label in a single bar.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"inside"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Bar color. </p>\n","default":"auto"},"borderColor":{"type":["Color"],"description":"<p>The border color of bar.</p>\n","default":"'#000'"},"borderWidth":{"type":["number"],"description":"<p>The border width of bar. defaults to have no border.</p>\n","default":0},"barBorderRadius":{"type":["number","Array"],"description":"<p>The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.</p>\n<p>For example:</p>\n<pre><code>barBorderRadius: 5, // consistently set the size of 4 rounded corners\nbarBorderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n</code></pre>","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Bar color. </p>\n","default":"auto"},"borderColor":{"type":["Color"],"description":"<p>The border color of bar.</p>\n","default":"'#000'"},"borderWidth":{"type":["number"],"description":"<p>The border width of bar. defaults to have no border.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-bar.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-bar.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-bar.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-bar.markPoint.data.x\">x</a>, <a href=\"#series-bar.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-bar.markPoint.data.coord\">coord</a> attribute, in which <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-bar.markPoint.data.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-bar.markPoint.data.valueIndex\">valueIndex</a> or <a href=\"#series-bar.markPoint.data.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n    {\n        name: &#39;maximum&#39;,\n        type: &#39;max&#39;\n    }, \n    {\n        name: &#39;coordinate&#39;,\n        coord: [10, 20]\n    }, {\n        name: &#39;fixed x position&#39;,\n        yAxis: 10,\n        x: &#39;90%&#39;\n    }, \n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Available when using <a href=\"#series-bar.markPoint.data.type\">type</a> it is used to assign maximum value and minimum value in dimensions, it could be <code class=\"codespan\">0</code> (xAxis, radiusAxis), <code class=\"codespan\">1</code> (yAxis, angleAxis), and use the first value axis dimension by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-bar.markPoint.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["Object"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-bar.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class=\"codespan\">symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-bar.markLine.data.0.x\">x</a>, <a href=\"#series-bar.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-bar.markLine.data.0.coord\">coord</a> attribute, in which <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-bar.markLine.data.0.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-bar.markLine.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-bar.markLine.data.0.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n<li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code class=\"codespan\">xAxis</code> or <code class=\"codespan\">yAxis</code>. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a> for example.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p>You may also set the type of mark line through <code class=\"codespan\">type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code class=\"codespan\">valueIndex</code>.</p>\n<pre><code>data: [\n    {\n        name: &#39;average line&#39;,\n        // &#39;average&#39;, &#39;min&#39;, and &#39;max&#39; are supported\n        type: &#39;average&#39;\n    },\n    {\n        name: &#39;Horizontal line with Y value at 100&#39;,\n        yAxis: 100\n    },\n    [\n        {\n            // Use the same name with starting and ending point\n            name: &#39;Minimum to Maximum&#39;,\n            type: &#39;min&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n    [\n        {\n            name: &#39;Markline between two points&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [{\n        // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n        yAxis: &#39;max&#39;,\n        x: &#39;90%&#39;\n    }, {\n        type: &#39;max&#39;\n    }],\n    [\n        {\n            name: &#39;Mark line between two points&#39;,\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n<li><code class=\"codespan\">&#39;median&#39;</code> median value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-bar.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-bar.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'starting point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n<li><code class=\"codespan\">&#39;median&#39;</code> median value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-bar.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-bar.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'ending point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code class=\"codespan\">data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li><p>Specify the coordinate in screen coordinate system using <a href=\"#series-bar.markArea.data.0.x\">x</a>, <a href=\"#series-bar.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code class=\"codespan\">5</code>), or percent (e.g., the value is <code class=\"codespan\">&#39;35%&#39;</code>).</p>\n</li>\n<li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using\n<a href=\"#series-bar.markArea.data.0.coord\">coord</a>, which can be also set as <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> (e.g, <code class=\"codespan\">coord: [23, &#39;min&#39;]</code>, or <code class=\"codespan\">coord: [&#39;average&#39;, &#39;max&#39;]</code>).</p>\n</li>\n</ol>\n<ol start=\"3\">\n<li>Locate the point on the min value or max value of <code class=\"codespan\">series.data</code> using <a href=\"#series-bar.markArea.data.0.type\">type</a>, where <a href=\"#series-bar.markArea.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-bar.markPoint.data.0.valueDim\">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</li>\n<li>If in cartesian, you can only specify <code class=\"codespan\">xAxis</code> or <code class=\"codespan\">yAxis</code> to define a mark area based on only X or Y axis, see sample <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a></li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n\n    [\n        {\n            name: &#39;From average to max&#39;,\n            type: &#39;average&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n\n    [\n        {\n            name: &#39;Mark area between two points in data coordiantes&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [\n        {\n            name: &#39;From 60 to 80&#39;,\n            yAxis: 60\n        },\n        {\n            yAxis: 80\n        }\n    ], [\n        {\n            name: &#39;Mark area covers all data&#39;\n            coord: [&#39;min&#39;, &#39;min&#39;]\n        },\n        {\n            coord: [&#39;max&#39;, &#39;max&#39;]\n        }\n    ],\n    [\n        {\n            name: &#39;Mark area in two screen points&#39;,\n            x: 100,\n            y: 100\n        }, {\n            x: &#39;90%&#39;,\n            y: &#39;10%&#39;\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> max value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> min value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-bar.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-bar.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'start'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> max value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> min value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-bar.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-bar.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'end'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"clip":{"type":["boolean"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.4.0</code></p>\n</blockquote>\n<p>If clip the overflow on the coordinate system. Clip results varies between series:</p>\n<ul>\n<li>Scatter:Ignore the symbols exceeds the coordinate system. Not clip the elements.</li>\n<li>Bar:Clip all the overflowed. With bar width kept.</li>\n<li>Line:Clip the overflowed line.</li>\n<li>Lines: Clip all the overflowed.</li>\n<li>Candlestick: Ignore the elements exceeds the coordinate system.</li>\n<li>Custom: Clip all the olverflowed.</li>\n</ul>\n<p>All these series have default value <code class=\"codespan\">true</code> except custom series. Set it to <code class=\"codespan\">false</code> if you don&#39;t want to clip.</p>\n","default":true},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in bar chart.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in bar chart, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong>pie chart</strong></p>\n<p>The pie chart is mainly used for showing proportion of different categories. Each arc length represents the proportion of data quantity.</p>\n<p><strong>Tip:</strong> The pie chart is more suitable for illustrating the numerical proportion. If you just to present the numerical differences of various categories, the <a href=\"bar\" target=\"_blank\">bar graph</a> chart is more suggested. Because compared to tiny length difference,  people is less sensitive to the minor radian difference. Otherwise, it can also be shown as Nightingale chart by using the <a href=\"#series-pie.roseType\">roseType</a> to distinguish different data through radius.</p>\n<p>Since ECharts v4.6.0, we provide <code class=\"codespan\">&#39;labelLine&#39;</code> and <code class=\"codespan\">&#39;edge&#39;</code> two extra layouts. Check <a href=\"#series-pie.label.alignTo\">label.alignTo</a> for more information.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=pie-alignTo&reset=1&edit=1\" width=\"900\" height=\"250\"><iframe />\n\n\n<p>For multiple pie series in a single chart, you may use <a href=\"#series-pie.left\">left</a>, <a href=\"#series-pie.right\">right</a>, <a href=\"#series-pie.top\">top</a>, <a href=\"#series-pie.bottom\">bottom</a>, <a href=\"#series-pie.width\">width</a>, and <a href=\"#series-pie.height\">height</a> to locate the pies. Percetage values like <a href=\"#series-pie.radius\">radius</a> or <a href=\"#series-pie.label.margin\">label.margin</a> are relative to the viewport defined by this setting.</p>\n<p><strong> The below example shows a customized Nightingale chart: </strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=pie-custom&edit=1&reset=1\" width=\"500\" height=\"400\"><iframe />\n\n\n","properties":{"type":{"type":["string"],"description":"","default":"'pie'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"legendHoverLink":{"type":["boolean"],"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n","default":true},"hoverAnimation":{"type":["boolean"],"description":"<p>Whether to enable the zoom animation effects when hovering sectors.</p>\n","default":true},"hoverOffset":{"type":["number"],"description":"<p>The offset distance of hovered sector.</p>\n","default":10},"selectedMode":{"type":["boolean","string"],"description":"<p>Selected mode of pie.  It is enabled by default, and you may set it to be <code class=\"codespan\">false</code> to disabled it.</p>\n<p>Besides, it can be set to <code class=\"codespan\">&#39;single&#39;</code> or <code class=\"codespan\">&#39;multiple&#39;</code>, for single selection and multiple selections.</p>\n","default":false},"selectedOffset":{"type":["number"],"description":"<p>The offset distance of selected sector.</p>\n","default":10},"clockwise":{"type":["boolean"],"description":"<p>Whether the layout of sectors of pie chart is clockwise.</p>\n","default":true},"startAngle":{"type":["number"],"description":"<p>The start angle, which range is [0, 360].</p>\n","default":90},"minAngle":{"type":["number"],"description":"<p>The minimum angle of sector (0 ~ 360). It prevents some sector from being too small when value is small, which will affect user interaction.</p>\n","default":0},"minShowLabelAngle":{"type":["number"],"description":"<p>If a sector is less than this angle (0 ~ 360), label and labelLine will not be displayed.</p>\n","default":0},"roseType":{"type":["boolean","string"],"description":"<p>Whether to show as Nightingale chart, which distinguishs data through radius. There are 2 optional modes:</p>\n<ul>\n<li><code class=\"codespan\">&#39;radius&#39;</code> Use central angle to show the percentage of data, radius to show data size.</li>\n<li><code class=\"codespan\">&#39;area&#39;</code> All the sectors will share the same central angle, the data size is shown only through radiuses.</li>\n</ul>\n","default":false},"avoidLabelOverlap":{"type":["boolean"],"description":"<p>Whether to enable the strategy to avoid labels overlap. Defaults to be enabled, which will move the label positions in the case of labels overlapping</p>\n","default":true},"stillShowZeroSum":{"type":["boolean"],"description":"<p>Whether to show sector when all data are zero.</p>\n","default":true},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n","default":"'pointer'"},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between pie chart component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":0},"top":{"type":["string","number"],"description":"<p>Distance between pie chart component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":0},"right":{"type":["string","number"],"description":"<p>Distance between pie chart component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":0},"bottom":{"type":["string","number"],"description":"<p>Distance between pie chart component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":0},"width":{"type":["string","number"],"description":"<p>Width of pie chart component. Adaptive by default.</p>\n","default":"'auto'"},"height":{"type":["string","number"],"description":"<p>Height of pie chart component. Adaptive by default.</p>\n","default":"'auto'"},"label":{"type":["Object"],"description":"<p>Text label of pie chart, to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"","default":false},"position":{"type":["string"],"description":"<p>The position of label.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><p><code class=\"codespan\">&#39;outside&#39;</code></p>\n<p>  Outside of sectors of pie chart, which relates to corresponding sector through <a href=\"#series-pie.labelLine\">visual guide line</a>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p>  Inside the sectors of pie chart.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;inner&#39;</code> is the same with <code class=\"codespan\">&#39;inside&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;center&#39;</code></p>\n<p>  In the center of pie chart. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-doughnut\" target=\"_blank\">pie-doughnut example</a></p>\n</li>\n</ul>\n","default":"'outside'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // percentage\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"rotate":{"type":["boolean","number"],"description":"<p>Label rotation.</p>\n<ul>\n<li>If <code class=\"codespan\">true</code>, layout label radically.</li>\n<li>If <code class=\"codespan\">number</code>, means degree that labels are rotated. From -90 degree to 90 degree. The negative value represents clockwise.</li>\n</ul>\n","default":null},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"alignTo":{"type":["string"],"description":"<p>Label aligning policy. Valid only when <code class=\"codespan\">position</code> is <code class=\"codespan\">&#39;outer&#39;</code>.</p>\n<p>Since ECharts v4.6.0, we provide <code class=\"codespan\">&#39;labelLine&#39;</code> and <code class=\"codespan\">&#39;edge&#39;</code> two extra valid <code class=\"codespan\">alignTo</code> values.</p>\n<ul>\n<li><code class=\"codespan\">&#39;none&#39;</code> (default): label lines have fixed length as <a href=\"#series-pie.labelLine.length\">labelLine.length</a> and <a href=\"#series-pie.labelLine.length2\">labelLine.length2</a>.</li>\n<li><code class=\"codespan\">&#39;labelLine&#39;</code>: aligning to the end of label lines and the length of the shortest horizontal label lines is configured by <a href=\"#series-pie.labelLine.length2\">labelLine.length2</a>.</li>\n<li><code class=\"codespan\">&#39;edge&#39;</code>: aligning to text and the distance between the edges of text and the viewport is configured by <a href=\"#series-pie.label.margin\">label.margin</a>.</li>\n</ul>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=pie-alignTo&reset=1&edit=1\" width=\"900\" height=\"250\"><iframe />\n\n\n","default":"'none'"},"margin":{"type":["string","number"],"description":"<p>The horizontal distance between text edges and viewport when <a href=\"#series-pie.label.position\">label.position</a> is <code class=\"codespan\">&#39;outer&#39;</code> and <a href=\"#series-pie.label.alignTo\">label.alignTo</a> is <code class=\"codespan\">&#39;edge&#39;</code>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pie-label-margin&edit=1&reset=1\" width=\"900\" height=\"250\"><iframe />\n\n\n<p>In most cases, you need a small <code class=\"codespan\">margin</code> value like <code class=\"codespan\">10</code> for mobile devices to make sure more text can be shown instead of being <code class=\"codespan\">...</code>. But on larger resolutions, a percentage value should be applied so that the label lines won&#39;t be too long. If your chart is used in varied resolutions, it is advised to set <a href=\"tutorial.html#Responsive%20Mobile-End\" target=\"_blank\">responsive design</a> for different resolutions.</p>\n","default":"'25%'"},"bleedMargin":{"type":["number"],"description":"<p>The horizontal distance between text and viewport when <a href=\"#series-pie.label.position\">label.position</a> is <code class=\"codespan\">&#39;outer&#39;</code> and <a href=\"#series-pie.label.alignTo\">label.alignTo</a> is <code class=\"codespan\">&#39;none&#39;</code> or <code class=\"codespan\">&#39;labelLine&#39;</code>. Longer text will be truncated into <code class=\"codespan\">&#39;...&#39;</code>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pie-label-bleedMargin&edit=1&reset=1\" width=\"800\" height=\"250\"><iframe />\n\n\n","default":10},"distanceToLabelLine":{"type":["number"],"description":"<p>Distance between label line and text.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pie-label-distanceToLabelLine&edit=1&reset=1\" width=\"800\" height=\"250\"><iframe />\n\n\n","default":5}}},"labelLine":{"type":["Object"],"description":"<p>The style of visual guide line. Will show when <a href=\"#series-pie.label.position\">label position</a> is set as <code class=\"codespan\">&#39;outside&#39;</code>.</p>\n<p>The style of visual guide line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the visual guide ine.</p>\n"},"length":{"type":["number"],"description":"<p>The length of the first segment of visual guide line.</p>\n"},"length2":{"type":["number"],"description":"<p>The length of the second segment of visual guide line.</p>\n"},"smooth":{"type":["boolean","number"],"description":"<p>Whether to smooth the visual guide line. It defaults to be <code class=\"codespan\">false</code> and can be set as <code class=\"codespan\">true</code> or the values from 0 to 1 which indicating the smoothness.</p>\n","default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of , <code class=\"codespan\">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"color":{"type":["Color","Function"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n<p>Supports callback functions, in the form of:</p>\n<pre><code class=\"lang-js\">(params: Object) =&gt; Color\n</code></pre>\n<p>Input parameters are <code class=\"codespan\">seriesIndex</code>, <code class=\"codespan\">dataIndex</code>, <code class=\"codespan\">data</code>, <code class=\"codespan\">value</code>, and etc. of data item.</p>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"","default":false},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // percentage\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"rotate":{"type":["boolean","number"],"description":"<p>Label rotation.</p>\n<ul>\n<li>If <code class=\"codespan\">true</code>, layout label radically.</li>\n<li>If <code class=\"codespan\">number</code>, means degree that labels are rotated. From -90 degree to 90 degree. The negative value represents clockwise.</li>\n</ul>\n","default":null},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"labelLine":{"type":["Object"],"description":"<p>The style of visual guide line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the visual guide ine.</p>\n"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"center":{"type":["Array"],"description":"<p>Center position of Pie chart, the first of which is the horizontal position, and the second is the vertical position.</p>\n<p>Percentage is supported. When set in percentage, the item is relative to the container width, and the second item to the height.</p>\n<p><strong>Example: </strong></p>\n<pre><code>// Set to absolute pixel values\ncenter: [400, 300]\n// Set to relative percent\ncenter: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>","default":"['50%', '50%']"},"radius":{"type":["number","string","Array"],"description":"<p>Radius of Pie chart. Value can be:</p>\n<ul>\n<li><code class=\"codespan\">number</code>: Specify outside radius directly.</li>\n<li><p><code class=\"codespan\">string</code>: For example, <code class=\"codespan\">&#39;20%&#39;</code>, means that the outside radius is 20% of the viewport size (the little one between width and height of the chart container).</p>\n</li>\n<li><p><code class=\"codespan\">Array.&lt;number|string&gt;</code>: The first item specifies the inside radius, and the second item specifies the outside radius. Each item follows the definitions above.</p>\n</li>\n</ul>\n<p>You can set a large inner radius for a Donut chart.</p>\n","default":"[0, '75%']"},"seriesLayoutBy":{"type":["string"],"description":"<p>When <a href=\"#dataset\">dataset</a> is used, <code class=\"codespan\">seriesLayoutBy</code> specifies whether the column or the row of <code class=\"codespan\">dataset</code> is mapped to the series, namely, the series is &quot;layout&quot; on columns or rows. Optional values:</p>\n<ul>\n<li>&#39;column&#39;: by default, the columns of <code class=\"codespan\">dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>&#39;row&#39;:the rows of <code class=\"codespan\">dataset</code> are mapped to the series. In this case, each row represents a dimension.</li>\n</ul>\n<p>Check this <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=dataset-series-layout-by\" target=\"_blank\">example</a>.</p>\n","default":"'column'"},"datasetIndex":{"type":["number"],"description":"<p>If <a href=\"#series.data\">series.data</a> is not specified, and <a href=\"#dataset\">dataset</a> exists, the series will use <code class=\"codespan\">dataset</code>. <code class=\"codespan\">datasetIndex</code> specifies which dataset will be used.</p>\n","default":0},"dimensions":{"type":["Array"],"description":"<p><code class=\"codespan\">dimensions</code> can be used to define dimension info for <code class=\"codespan\">series.data</code> or <code class=\"codespan\">dataset.source</code>.</p>\n<p>Notice: if <a href=\"#dataset\">dataset</a> is used, we can provide dimension names in the first column/row of <a href=\"#dataset.source\">dataset.source</a>, and not need to specify <code class=\"codespan\">dimensions</code> here. But if <code class=\"codespan\">dimensions</code> is specified here, echarts will not retrieve dimension names from the first row/column of <code class=\"codespan\">dataset.source</code> any more.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\n    ]\n}\n</code></pre>\n<p>Each data item of <code class=\"codespan\">dimensions</code> can be:</p>\n<ul>\n<li><code class=\"codespan\">string</code>, for example, <code class=\"codespan\">&#39;someName&#39;</code>, which equals to <code class=\"codespan\">{name: &#39;someName&#39;}</code>.</li>\n<li><code class=\"codespan\">Object</code>, where the attributes can be:<ul>\n<li>name: <code class=\"codespan\">string</code>.</li>\n<li>type: <code class=\"codespan\">string</code>, supports:<ul>\n<li><code class=\"codespan\">number</code></li>\n<li><code class=\"codespan\">float</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array\" target=\"_blank\">Float64Array</a></li>\n<li><code class=\"codespan\">int</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array\" target=\"_blank\">Int32Array</a></li>\n<li><code class=\"codespan\">ordinal</code>, discrete value, which represents string generally.</li>\n<li><code class=\"codespan\">time</code>, time value, see <a href=\"#series.data\">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code class=\"codespan\">string</code>, generally used in tooltip for dimension display. If not specified, use <code class=\"codespan\">name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code class=\"codespan\">dimensions</code> is specified, the default <code class=\"codespan\">tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code class=\"codespan\">tooltip</code> will displayed only value horizontally.</p>\n"},"encode":{"type":["Object"],"description":"<p>Define what is encoded to for each dimension of <code class=\"codespan\">data</code>. For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n</code></pre>\n<p>When <a href=\"#series.dimensions\">dimensions</a> is used to defined name for a certain dimension, <code class=\"codespan\">encode</code> can refer the name directly. For example:</p>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<p>The basic structure of <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code> or some special reserved names like &quot;tooltip&quot;, &quot;itemName&quot; etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code class=\"codespan\">encode</code> listed as follows:</p>\n<pre><code class=\"lang-js\">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension &quot;product&quot; and &quot;score&quot; in the tooltip.\n    tooltip: [&#39;product&#39;, &#39;score&#39;]\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // &#39;pie&#39;, &#39;funnel&#39;, where data item name can be displayed in legend.\n    itemName: 3\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension &quot;score&quot; to the X axis.\n    x: [1, 5, &#39;score&#39;],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like &#39;pie&#39;, &#39;funnel&#39; etc.:\nencode: {\n    value: 3\n}\n</code></pre>\n<p>This is an <a href=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a> for <code class=\"codespan\">encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code class=\"codespan\">encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href=\"#dataZoom\">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class=\"lang-js\">var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            return {\n                type: &#39;circle&#39;,\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: &#39;blue&#39;\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n</code></pre>\n"},"data":{"type":["Array"],"description":"<p>Data array of  series, which can be a single data value, like:</p>\n<pre><code class=\"lang-js\">[12, 34, 56, 10, 23]\n</code></pre>\n<p>Or, if need extra dimensions for components like <a href=\"#visualMap\">visualMap</a> to map to graphic attributes like color, it can also be in the form of array. For example:</p>\n<pre><code class=\"lang-js\">[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]\n</code></pre>\n<p>In this case, we can assgin the second value in each array item to <a href=\"#visualMap\">visualMap</a> component.</p>\n<p>More likely, we need to assign name to each data item, in which case each item should be an object:</p>\n<pre><code class=\"lang-js\">[{\n    // name of date item\n    name: &#39;data1&#39;,\n    // value of date item is 8\n    value: 10\n}, {\n    name: &#39;data2&#39;,\n    value: 20\n}]\n</code></pre>\n<p>Each data item can be further customized:</p>\n<pre><code class=\"lang-js\">[{\n    name: &#39;data1&#39;,\n    value: 10\n}, {\n    // name of data item\n    name: &#39;data2&#39;,\n    value : 56,\n    // user-defined label format that only useful for this data item\n    label: {},\n    // user-defined special itemStyle that only useful for this data item\n    itemStyle:{}\n}]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>The name of data item.</p>\n"},"value":{"type":["number"],"description":"<p>Data value.</p>\n"},"selected":{"type":["boolean"],"description":"<p>Whether the data item is selected.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>The label configuration of a single sector.</p>\n","properties":{"show":{"type":["boolean"],"description":"","default":false},"position":{"type":["string"],"description":"<p>The position of label.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><p><code class=\"codespan\">&#39;outside&#39;</code></p>\n<p>  Outside of sectors of pie chart, which relates to corresponding sector through <a href=\"#series-pie.labelLine\">visual guide line</a>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p>  Inside the sectors of pie chart.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;inner&#39;</code> is the same with <code class=\"codespan\">&#39;inside&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;center&#39;</code></p>\n<p>  In the center of pie chart. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-doughnut\" target=\"_blank\">pie-doughnut example</a></p>\n</li>\n</ul>\n","default":"'outside'"},"rotate":{"type":["boolean","number"],"description":"<p>Label rotation.</p>\n<ul>\n<li>If <code class=\"codespan\">true</code>, layout label radically.</li>\n<li>If <code class=\"codespan\">number</code>, means degree that labels are rotated. From -90 degree to 90 degree. The negative value represents clockwise.</li>\n</ul>\n","default":null},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"labelLine":{"type":["Object"],"description":"<p>The style of visual guide line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the visual guide ine.</p>\n"},"length":{"type":["number"],"description":"<p>The length of the first segment of visual guide line.</p>\n"},"length2":{"type":["number"],"description":"<p>The length of the second segment of visual guide line.</p>\n"},"smooth":{"type":["boolean","number"],"description":"<p>Whether to smooth the visual guide line. It defaults to be <code class=\"codespan\">false</code> and can be set as <code class=\"codespan\">true</code> or the values from 0 to 1 which indicating the smoothness.</p>\n","default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of , <code class=\"codespan\">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"","default":false},"rotate":{"type":["boolean","number"],"description":"<p>Label rotation.</p>\n<ul>\n<li>If <code class=\"codespan\">true</code>, layout label radically.</li>\n<li>If <code class=\"codespan\">number</code>, means degree that labels are rotated. From -90 degree to 90 degree. The negative value represents clockwise.</li>\n</ul>\n","default":null},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"labelLine":{"type":["Object"],"description":"<p>The style of visual guide line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the visual guide ine.</p>\n"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-pie.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-pie.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-pie.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li>Assign coordinate according to container with <a href=\"#series-pie.markPoint.data.x\">x</a>, <a href=\"#series-pie.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["Object"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-pie.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class=\"codespan\">symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li>Assign coordinate according to container with <a href=\"#series-pie.markLine.data.0.x\">x</a>, <a href=\"#series-pie.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<pre><code>data: [\n    [\n        {\n            name: &#39;Mark line between two points&#39;,\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'starting point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'ending point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code class=\"codespan\">data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li>Specify the coordinate in screen coordinate system using <a href=\"#series-pie.markArea.data.0.x\">x</a>, <a href=\"#series-pie.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code class=\"codespan\">5</code>), or percent (e.g., the value is <code class=\"codespan\">&#39;35%&#39;</code>).</li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n    [\n        {\n            name: &#39;Mark area in two screen points&#39;,\n            x: 100,\n            y: 100\n        }, {\n            x: &#39;90%&#39;,\n            y: &#39;10%&#39;\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'start'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'end'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"animationType":{"type":["string"],"description":"<p>Initial animation type.</p>\n<ul>\n<li><code class=\"codespan\">&#39;expansion&#39;</code> Default expansion animation.</li>\n<li><code class=\"codespan\">&#39;scale&#39;</code> Scale animation. You can use it with <code class=\"codespan\">animationEasing=&#39;elasticOut&#39;</code> to have popup effect.</li>\n</ul>\n","default":"'expansion'"},"animationTypeUpdate":{"type":["string"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.4.0</code></p>\n</blockquote>\n<p>Animation type when data updates.</p>\n<ul>\n<li><code class=\"codespan\">&#39;transition&#39;</code> Changing start and end angle of each sector from the old value to new value.</li>\n<li><code class=\"codespan\">&#39;expansion&#39;</code> The whole pie expands again.</li>\n</ul>\n","default":"'transition'"},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p>Scatter (bubble) chart . The scatter chart in <a href=\"#grid\">rectangular coordinate</a> could be used to present the relation between  <code class=\"codespan\">x</code> and <code class=\"codespan\">y</code>. If data have multiple dimensions, the values of the other dimensions can be visualized through <a href=\"#series-scatter.symbol\">symbol</a> with various sizes and colors, which becomes a bubble chart. These can be done by using with <a href=\"#visualMap\">visualMap</a> component.</p>\n<p>It could be used with <a href=\"#grid\">rectangular coordinate</a> and <a href=\"#polar\">polar coordinate</a> and <a href=\"#geo\">geographical coordinate</a>.</p>\n","properties":{"type":{"type":["string"],"description":"","default":"'scatter'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;cartesian2d&#39;</code></p>\n<p>  Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-bar.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-bar.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">&#39;polar&#39;</code></p>\n<p>  Use polar coordinates, with <a href=\"#series-bar.polarIndex\">polarIndex</a> to assign the corresponding polar coordinate component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">&#39;geo&#39;</code></p>\n<p>  Use geographic coordinate, with <a href=\"#series-bar.geoIndex\">geoIndex</a> to assign the corresponding geographic coordinate components.</p>\n</li>\n</ul>\n","default":"'cartesian2d'"},"xAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#xAxis\">x axis</a> to combine with, which is  useful for multiple x axes in one chart.</p>\n","default":0},"yAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#yAxis\">y axis</a> to combine with, which is  useful for multiple y axes in one chart.</p>\n","default":0},"polarIndex":{"type":["number"],"description":"<p>Index of <a href=\"#polar\">polar coordinate</a> to combine with, which is useful for multiple polar axes in one chart.</p>\n","default":0},"geoIndex":{"type":["number"],"description":"<p>Index of <a href=\"#geo\">geographic coordinate</a> to combine with, which is useful for multiple geographic axes in one chart.</p>\n","default":0},"calendarIndex":{"type":["number"],"description":"<p>Index of <a href=\"#calendar\">calendar coordinates</a> to combine with, which is useful for multiple calendar coordinates in one chart.</p>\n","default":0},"hoverAnimation":{"type":["boolean"],"description":"<p>Whether to enable the animation effect when mouse is on the symbol.</p>\n"},"legendHoverLink":{"type":["boolean"],"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n","default":true},"symbol":{"type":["string","Function"],"description":"<p>Symbol of scatter.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-scatter.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'circle'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>scatter symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-scatter.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":10},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of scatter symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-scatter.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of scatter symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"large":{"type":["boolean"],"description":"<p>Whether to enable the optimization of large-scale data. It could be set when large data causes performance problem.</p>\n<p>After being enabled, <code class=\"codespan\">largeThreshold</code> can be used to indicate the minimum number for turning on the optimization.</p>\n<p>But when the optimization enabled, the style of single data item can&#39;t be customized any more.</p>\n","default":false},"largeThreshold":{"type":["number"],"description":"<p>The threshold enabling the drawing optimization.</p>\n","default":2000},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n","default":"'pointer'"},"label":{"type":["Object"],"description":"<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of , <code class=\"codespan\">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"color":{"type":["Color","Function"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n<p>Supports callback functions, in the form of:</p>\n<pre><code class=\"lang-js\">(params: Object) =&gt; Color\n</code></pre>\n<p>Input parameters are <code class=\"codespan\">seriesIndex</code>, <code class=\"codespan\">dataIndex</code>, <code class=\"codespan\">data</code>, <code class=\"codespan\">value</code>, and etc. of data item.</p>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":0.8}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"progressive":{"type":["number"],"description":"<p><code class=\"codespan\">progressive</code> specifies the amount of graphic elements that can be rendered within a frame (about 16ms) if &quot;progressive rendering&quot; enabled.</p>\n<p>When data amount is from thousand to more than 10 million, it will take too long time to render all of the graphic elements. Since ECharts 4, &quot;progressive rendering&quot; is supported in its workflow, which processes and renders data chunk by chunk alone with each frame, avoiding to block the UI thread of the browser.</p>\n<p>Set <code class=\"codespan\">progressive: 0</code> to disable progressive permanently. By default, progressive is auto-enabled when data amount is bigger than <code class=\"codespan\">progressiveThreshold</code>.</p>\n","default":400},"progressiveThreshold":{"type":["number"],"description":"<p>If current data amount is over the threshold, &quot;progressive rendering&quot; is enabled.</p>\n","default":3000},"dimensions":{"type":["Array"],"description":"<p><code class=\"codespan\">dimensions</code> can be used to define dimension info for <code class=\"codespan\">series.data</code> or <code class=\"codespan\">dataset.source</code>.</p>\n<p>Notice: if <a href=\"#dataset\">dataset</a> is used, we can provide dimension names in the first column/row of <a href=\"#dataset.source\">dataset.source</a>, and not need to specify <code class=\"codespan\">dimensions</code> here. But if <code class=\"codespan\">dimensions</code> is specified here, echarts will not retrieve dimension names from the first row/column of <code class=\"codespan\">dataset.source</code> any more.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\n    ]\n}\n</code></pre>\n<p>Each data item of <code class=\"codespan\">dimensions</code> can be:</p>\n<ul>\n<li><code class=\"codespan\">string</code>, for example, <code class=\"codespan\">&#39;someName&#39;</code>, which equals to <code class=\"codespan\">{name: &#39;someName&#39;}</code>.</li>\n<li><code class=\"codespan\">Object</code>, where the attributes can be:<ul>\n<li>name: <code class=\"codespan\">string</code>.</li>\n<li>type: <code class=\"codespan\">string</code>, supports:<ul>\n<li><code class=\"codespan\">number</code></li>\n<li><code class=\"codespan\">float</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array\" target=\"_blank\">Float64Array</a></li>\n<li><code class=\"codespan\">int</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array\" target=\"_blank\">Int32Array</a></li>\n<li><code class=\"codespan\">ordinal</code>, discrete value, which represents string generally.</li>\n<li><code class=\"codespan\">time</code>, time value, see <a href=\"#series.data\">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code class=\"codespan\">string</code>, generally used in tooltip for dimension display. If not specified, use <code class=\"codespan\">name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code class=\"codespan\">dimensions</code> is specified, the default <code class=\"codespan\">tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code class=\"codespan\">tooltip</code> will displayed only value horizontally.</p>\n"},"encode":{"type":["Object"],"description":"<p>Define what is encoded to for each dimension of <code class=\"codespan\">data</code>. For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n</code></pre>\n<p>When <a href=\"#series.dimensions\">dimensions</a> is used to defined name for a certain dimension, <code class=\"codespan\">encode</code> can refer the name directly. For example:</p>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<p>The basic structure of <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code> or some special reserved names like &quot;tooltip&quot;, &quot;itemName&quot; etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code class=\"codespan\">encode</code> listed as follows:</p>\n<pre><code class=\"lang-js\">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension &quot;product&quot; and &quot;score&quot; in the tooltip.\n    tooltip: [&#39;product&#39;, &#39;score&#39;]\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // &#39;pie&#39;, &#39;funnel&#39;, where data item name can be displayed in legend.\n    itemName: 3\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension &quot;score&quot; to the X axis.\n    x: [1, 5, &#39;score&#39;],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like &#39;pie&#39;, &#39;funnel&#39; etc.:\nencode: {\n    value: 3\n}\n</code></pre>\n<p>This is an <a href=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a> for <code class=\"codespan\">encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code class=\"codespan\">encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href=\"#dataZoom\">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class=\"lang-js\">var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            return {\n                type: &#39;circle&#39;,\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: &#39;blue&#39;\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n</code></pre>\n"},"seriesLayoutBy":{"type":["string"],"description":"<p>When <a href=\"#dataset\">dataset</a> is used, <code class=\"codespan\">seriesLayoutBy</code> specifies whether the column or the row of <code class=\"codespan\">dataset</code> is mapped to the series, namely, the series is &quot;layout&quot; on columns or rows. Optional values:</p>\n<ul>\n<li>&#39;column&#39;: by default, the columns of <code class=\"codespan\">dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>&#39;row&#39;:the rows of <code class=\"codespan\">dataset</code> are mapped to the series. In this case, each row represents a dimension.</li>\n</ul>\n<p>Check this <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=dataset-series-layout-by\" target=\"_blank\">example</a>.</p>\n","default":"'column'"},"datasetIndex":{"type":["number"],"description":"<p>If <a href=\"#series.data\">series.data</a> is not specified, and <a href=\"#dataset\">dataset</a> exists, the series will use <code class=\"codespan\">dataset</code>. <code class=\"codespan\">datasetIndex</code> specifies which dataset will be used.</p>\n","default":0},"data":{"type":["Array"],"description":"<p>Data array of series, which can be in the following forms:</p>\n<p>Notice, if no <code class=\"codespan\">data</code> specified in series, and there is <a href=\"#dataset\">dataset</a> in option, series will use the first <a href=\"#dataset\">dataset</a> as its datasource. If <code class=\"codespan\">data</code> has been specified, <a href=\"#dataset\">dataset</a> will not used.</p>\n<p><code class=\"codespan\">series.datasetIndex</code> can be used to specify other <a href=\"#dataset\">dataset</a>.</p>\n<p>Basically, data is represented by a two-dimension array, like the example below, where each column is named as a &quot;dimension&quot;.</p>\n<pre><code class=\"lang-js\">series: [{\n    data: [\n        // dimX   dimY   other dimensions ...\n        [  3.4,    4.5,   15,   43],\n        [  4.2,    2.3,   20,   91],\n        [  10.8,   9.5,   30,   18],\n        [  7.2,    8.8,   18,   57]\n    ]\n}]\n</code></pre>\n<ul>\n<li>In <a href=\"#grid\">cartesian (grid)</a>, &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href=\"#xAxis\">xAxis</a> and <a href=\"#yAxis\">yAxis</a> respectively.</li>\n<li>In <a href=\"#polar\">polar</a> &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href=\"#radiusAxis\">radiusAxis</a> 和 <a href=\"#anbleAxis\">angleAxis</a> respectively.</li>\n<li>Other dimensions are optional, which can be used in other places. For example:<ul>\n<li><a href=\"#visualMap\">visualMap</a> can map one or more dimensions to visual (color, symbol size ...).</li>\n<li><a href=\"#series.symbolSize\">series.symbolSize</a> can be set as a callback function, where symbol size can be calculated by values of a certain dimension.</li>\n<li>Values in other dimensions can be shown by <a href=\"#tooltip.formatter\">tooltip.formatter</a> or <a href=\"#series.label.formatter\">series.label.formatter</a>.</li>\n</ul>\n</li>\n</ul>\n<p>Especially, when there is one and only one category axis (axis.type is <code class=\"codespan\">&#39;category&#39;</code>), data can be simply be represented by a one-dimension array, like:</p>\n<pre><code class=\"lang-js\">xAxis: {\n    data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;]\n},\nseries: [{\n    // Each item corresponds to each item in xAxis.data.\n    data: [23,  44,  55,  19]\n    // In fact, it is the simplification of the format below:\n    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n</code></pre>\n<p><br>\n<strong>Relationship between &quot;value&quot; and <a href=\"#xAxis.type\">axis.type</a></strong></p>\n<ul>\n<li><p>When a dimension corresponds to a value axis (axis.type is <code class=\"codespan\">&#39;value&#39;</code> or <code class=\"codespan\">&#39;log&#39;</code>):</p>\n<p>  The value can be a <code class=\"codespan\">number</code> (like <code class=\"codespan\">12</code>) (can also be a number in a <code class=\"codespan\">string</code> format, like <code class=\"codespan\">&#39;12&#39;</code>).</p>\n</li>\n<li><p>When a dimension corresponds to a category axis (axis.type is <code class=\"codespan\">&#39;category&#39;</code>):</p>\n<p>  The value should be the ordinal of the axis.data (based on <code class=\"codespan\">0</code>), the string value of the axis.data. For example:</p>\n<pre><code class=\"lang-js\">  xAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;]\n  },\n  yAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;, &#39;p&#39;, &#39;q&#39;]\n  },\n  series: [{\n      data: [\n          // xAxis      yAxis\n          [  0,           0,    2  ], // This point is located at xAxis: &#39;Monday&#39;, yAxis: &#39;a&#39;.\n          [  &#39;Thursday&#39;,  2,    1  ], // This point is located at xAxis: &#39;Thursday&#39;, yAxis: &#39;m&#39;.\n          [  2,          &#39;p&#39;,   2  ], // This point is located at xAxis: &#39;Wednesday&#39;, yAxis: &#39;p&#39;.\n          [  3,           3,    5  ]\n      ]\n  }]\n</code></pre>\n<p>  There is an example of double category axes: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-punchCard\" target=\"_blank\">Github Punchcard</a>.</p>\n</li>\n<li><p>When a dimension corresponds to a time axis (type is <code class=\"codespan\">&#39;time&#39;</code>), the value can be:</p>\n<ul>\n<li>a timestamp, like <code class=\"codespan\">1484141700832</code>, which represents a UTC time.</li>\n<li>a date string, in one of the formats below:<ul>\n<li>a subset of <a href=\"http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15\" target=\"_blank\">ISO 8601</a>, only including (all of these are treated as local time unless timezone is specified, which is consistent with <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>):<ul>\n<li>only part of year/month/date/time are specified: <code class=\"codespan\">&#39;2012-03&#39;</code>, <code class=\"codespan\">&#39;2012-03-01&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 05&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 05:06&#39;</code>.</li>\n<li>separated by <code class=\"codespan\">&quot;T&quot;</code> or a space: <code class=\"codespan\">&#39;2012-03-01T12:22:33.123&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 12:22:33.123&#39;</code>.</li>\n<li>timezone specified: <code class=\"codespan\">&#39;2012-03-01T12:22:33Z&#39;</code>, <code class=\"codespan\">&#39;2012-03-01T12:22:33+8000&#39;</code>, <code class=\"codespan\">&#39;2012-03-01T12:22:33-05:00&#39;</code>.</li>\n</ul>\n</li>\n<li>other date string format (all of these are treated as local time):\n<code class=\"codespan\">&#39;2012&#39;</code>, <code class=\"codespan\">&#39;2012-3-1&#39;</code>, <code class=\"codespan\">&#39;2012/3/1&#39;</code>, <code class=\"codespan\">&#39;2012/03/01&#39;</code>,\n<code class=\"codespan\">&#39;2009/6/12 2:00&#39;</code>, <code class=\"codespan\">&#39;2009/6/12 2:05:08&#39;</code>, <code class=\"codespan\">&#39;2009/6/12 2:05:08.123&#39;</code>.</li>\n</ul>\n</li>\n<li>a JavaScript Date instance created by user:<ul>\n<li>Caution, when using a data string to create a Date instance, <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">browser differences and inconsistencies</a> should be considered.</li>\n<li>For example: In chrome, <code class=\"codespan\">new Date(&#39;2012-01-01&#39;)</code> is treated as a Jan 1st 2012 in UTC, while <code class=\"codespan\">new Date(&#39;2012-1-1&#39;)</code> and <code class=\"codespan\">new Date(&#39;2012/01/01&#39;)</code> are treated as Jan 1st 2012 in local timezone. In safari <code class=\"codespan\">new Date(&#39;2012-1-1&#39;)</code> is not supported.</li>\n<li>So if you intent to perform <code class=\"codespan\">new Date(dateString)</code>, it is strongly recommended to use a time parse library (e.g., <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>), or use <code class=\"codespan\">echarts.number.parseDate</code>, or check <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">this</a>.</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<strong>Customize a data item:</strong></p>\n<p>When needing to customize a data item, it can be set as an object, where property <code class=\"codespan\">value</code> reprensent real value. For example:</p>\n<pre><code class=\"lang-js\">[\n    12,\n    24,\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    33\n]\n// Or\n[\n    [12, 332],\n    [24, 32],\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    [33, 31]\n]\n</code></pre>\n<p><br>\n<strong>Empty value:</strong></p>\n<p><code class=\"codespan\">&#39;-&#39;</code> or <code class=\"codespan\">null</code> or <code class=\"codespan\">undefined</code> or <code class=\"codespan\">NaN</code> can be used to describe that a data item does not exist (ps:<em>not exist</em> does not means its value is <code class=\"codespan\">0</code>).</p>\n<p>For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.</p>\n<p><br><br></p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>the name of data item.</p>\n"},"value":{"type":["Array"],"description":"<p>the value of data item.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of single data.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>single data symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of single data symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of single data symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"inside"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>the style setting about single data point(bubble).</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-scatter.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-scatter.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-scatter.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-scatter.markPoint.data.x\">x</a>, <a href=\"#series-scatter.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-scatter.markPoint.data.coord\">coord</a> attribute, in which <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-scatter.markPoint.data.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-scatter.markPoint.data.valueIndex\">valueIndex</a> or <a href=\"#series-scatter.markPoint.data.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n    {\n        name: &#39;maximum&#39;,\n        type: &#39;max&#39;\n    }, \n    {\n        name: &#39;coordinate&#39;,\n        coord: [10, 20]\n    }, {\n        name: &#39;fixed x position&#39;,\n        yAxis: 10,\n        x: &#39;90%&#39;\n    }, \n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Available when using <a href=\"#series-scatter.markPoint.data.type\">type</a> it is used to assign maximum value and minimum value in dimensions, it could be <code class=\"codespan\">0</code> (xAxis, radiusAxis), <code class=\"codespan\">1</code> (yAxis, angleAxis), and use the first value axis dimension by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-scatter.markPoint.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["Object"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-scatter.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class=\"codespan\">symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-scatter.markLine.data.0.x\">x</a>, <a href=\"#series-scatter.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-scatter.markLine.data.0.coord\">coord</a> attribute, in which <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-scatter.markLine.data.0.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-scatter.markLine.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-scatter.markLine.data.0.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n<li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code class=\"codespan\">xAxis</code> or <code class=\"codespan\">yAxis</code>. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a> for example.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p>You may also set the type of mark line through <code class=\"codespan\">type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code class=\"codespan\">valueIndex</code>.</p>\n<pre><code>data: [\n    {\n        name: &#39;average line&#39;,\n        // &#39;average&#39;, &#39;min&#39;, and &#39;max&#39; are supported\n        type: &#39;average&#39;\n    },\n    {\n        name: &#39;Horizontal line with Y value at 100&#39;,\n        yAxis: 100\n    },\n    [\n        {\n            // Use the same name with starting and ending point\n            name: &#39;Minimum to Maximum&#39;,\n            type: &#39;min&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n    [\n        {\n            name: &#39;Markline between two points&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [{\n        // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n        yAxis: &#39;max&#39;,\n        x: &#39;90%&#39;\n    }, {\n        type: &#39;max&#39;\n    }],\n    [\n        {\n            name: &#39;Mark line between two points&#39;,\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n<li><code class=\"codespan\">&#39;median&#39;</code> median value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-scatter.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-scatter.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'starting point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n<li><code class=\"codespan\">&#39;median&#39;</code> median value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-scatter.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-scatter.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'ending point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code class=\"codespan\">data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li><p>Specify the coordinate in screen coordinate system using <a href=\"#series-scatter.markArea.data.0.x\">x</a>, <a href=\"#series-scatter.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code class=\"codespan\">5</code>), or percent (e.g., the value is <code class=\"codespan\">&#39;35%&#39;</code>).</p>\n</li>\n<li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using\n<a href=\"#series-scatter.markArea.data.0.coord\">coord</a>, which can be also set as <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> (e.g, <code class=\"codespan\">coord: [23, &#39;min&#39;]</code>, or <code class=\"codespan\">coord: [&#39;average&#39;, &#39;max&#39;]</code>).</p>\n</li>\n</ol>\n<ol start=\"3\">\n<li>Locate the point on the min value or max value of <code class=\"codespan\">series.data</code> using <a href=\"#series-scatter.markArea.data.0.type\">type</a>, where <a href=\"#series-scatter.markArea.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-scatter.markPoint.data.0.valueDim\">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</li>\n<li>If in cartesian, you can only specify <code class=\"codespan\">xAxis</code> or <code class=\"codespan\">yAxis</code> to define a mark area based on only X or Y axis, see sample <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a></li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n\n    [\n        {\n            name: &#39;From average to max&#39;,\n            type: &#39;average&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n\n    [\n        {\n            name: &#39;Mark area between two points in data coordiantes&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [\n        {\n            name: &#39;From 60 to 80&#39;,\n            yAxis: 60\n        },\n        {\n            yAxis: 80\n        }\n    ], [\n        {\n            name: &#39;Mark area covers all data&#39;\n            coord: [&#39;min&#39;, &#39;min&#39;]\n        },\n        {\n            coord: [&#39;max&#39;, &#39;max&#39;]\n        }\n    ],\n    [\n        {\n            name: &#39;Mark area in two screen points&#39;,\n            x: 100,\n            y: 100\n        }, {\n            x: &#39;90%&#39;,\n            y: &#39;10%&#39;\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> max value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> min value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-scatter.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-scatter.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'start'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> max value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> min value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-scatter.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-scatter.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'end'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"clip":{"type":["boolean"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.4.0</code></p>\n</blockquote>\n<p>If clip the overflow on the coordinate system. Clip results varies between series:</p>\n<ul>\n<li>Scatter:Ignore the symbols exceeds the coordinate system. Not clip the elements.</li>\n<li>Bar:Clip all the overflowed. With bar width kept.</li>\n<li>Line:Clip the overflowed line.</li>\n<li>Lines: Clip all the overflowed.</li>\n<li>Candlestick: Ignore the elements exceeds the coordinate system.</li>\n<li>Custom: Clip all the olverflowed.</li>\n</ul>\n<p>All these series have default value <code class=\"codespan\">true</code> except custom series. Set it to <code class=\"codespan\">false</code> if you don&#39;t want to clip.</p>\n","default":true},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in scatter chart.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in scatter chart, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p>The scatter (bubble) graph with ripple animation. The special animation effect can visually highlights some data.</p>\n<p><strong>Tip:</strong>  The effects of map was achieved through markPoint in ECharts 2.x. However, in  ECharts 3, effectScatter on geographic coordinate is recommended for achieving that effects of map.</p>\n","properties":{"type":{"type":["string"],"description":"","default":"'effectScatter'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"legendHoverLink":{"type":["boolean"],"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n","default":true},"effectType":{"type":["string"],"description":"<p>Type of effect. Only ripple effect of <code class=\"codespan\">&#39;ripple&#39;</code> is supported currently.</p>\n","default":"'ripple'"},"showEffectOn":{"type":["string"],"description":"<p>When to show the effect.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;render&#39;</code> Show the effect when rendering is done.</li>\n<li><code class=\"codespan\">&#39;emphasis&#39;</code> Show the effect when it is highlight (hover).</li>\n</ul>\n","default":"'render'"},"rippleEffect":{"type":["Object"],"description":"<p>Related configurations about ripple effect.</p>\n","properties":{"color":{"type":["string"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.4.0</code></p>\n</blockquote>\n<p>Color of the ripple rings. The default value is the color of scatter.</p>\n"},"period":{"type":["number"],"description":"<p>The period duration of animation, in seconds.</p>\n","default":4},"scale":{"type":["number"],"description":"<p>The maximum zooming scale of ripples in animation.</p>\n","default":2.5},"brushType":{"type":["string"],"description":"<p>The brush type for ripples. options: <code class=\"codespan\">&#39;stroke&#39;</code> and <code class=\"codespan\">&#39;fill&#39;</code>.</p>\n","default":"'fill'"}}},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;cartesian2d&#39;</code></p>\n<p>  Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-bar.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-bar.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">&#39;polar&#39;</code></p>\n<p>  Use polar coordinates, with <a href=\"#series-bar.polarIndex\">polarIndex</a> to assign the corresponding polar coordinate component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">&#39;geo&#39;</code></p>\n<p>  Use geographic coordinate, with <a href=\"#series-bar.geoIndex\">geoIndex</a> to assign the corresponding geographic coordinate components.</p>\n</li>\n</ul>\n","default":"'cartesian2d'"},"xAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#xAxis\">x axis</a> to combine with, which is  useful for multiple x axes in one chart.</p>\n","default":0},"yAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#yAxis\">y axis</a> to combine with, which is  useful for multiple y axes in one chart.</p>\n","default":0},"polarIndex":{"type":["number"],"description":"<p>Index of <a href=\"#polar\">polar coordinate</a> to combine with, which is useful for multiple polar axes in one chart.</p>\n","default":0},"geoIndex":{"type":["number"],"description":"<p>Index of <a href=\"#geo\">geographic coordinate</a> to combine with, which is useful for multiple geographic axes in one chart.</p>\n","default":0},"calendarIndex":{"type":["number"],"description":"<p>Index of <a href=\"#calendar\">calendar coordinates</a> to combine with, which is useful for multiple calendar coordinates in one chart.</p>\n","default":0},"symbol":{"type":["string","Function"],"description":"<p>Symbol of effectScatter.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-effectScatter.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'circle'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>effectScatter symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-effectScatter.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":10},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of effectScatter symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-effectScatter.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of effectScatter symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n","default":"'pointer'"},"label":{"type":["Object"],"description":"<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of , <code class=\"codespan\">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"color":{"type":["Color","Function"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n<p>Supports callback functions, in the form of:</p>\n<pre><code class=\"lang-js\">(params: Object) =&gt; Color\n</code></pre>\n<p>Input parameters are <code class=\"codespan\">seriesIndex</code>, <code class=\"codespan\">dataIndex</code>, <code class=\"codespan\">data</code>, <code class=\"codespan\">value</code>, and etc. of data item.</p>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color","Function"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n<p>Supports callback functions, in the form of:</p>\n<pre><code class=\"lang-js\">(params: Object) =&gt; Color\n</code></pre>\n<p>Input parameters are <code class=\"codespan\">seriesIndex</code>, <code class=\"codespan\">dataIndex</code>, <code class=\"codespan\">data</code>, <code class=\"codespan\">value</code>, and etc. of data item.</p>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"seriesLayoutBy":{"type":["string"],"description":"<p>When <a href=\"#dataset\">dataset</a> is used, <code class=\"codespan\">seriesLayoutBy</code> specifies whether the column or the row of <code class=\"codespan\">dataset</code> is mapped to the series, namely, the series is &quot;layout&quot; on columns or rows. Optional values:</p>\n<ul>\n<li>&#39;column&#39;: by default, the columns of <code class=\"codespan\">dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>&#39;row&#39;:the rows of <code class=\"codespan\">dataset</code> are mapped to the series. In this case, each row represents a dimension.</li>\n</ul>\n<p>Check this <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=dataset-series-layout-by\" target=\"_blank\">example</a>.</p>\n","default":"'column'"},"datasetIndex":{"type":["number"],"description":"<p>If <a href=\"#series.data\">series.data</a> is not specified, and <a href=\"#dataset\">dataset</a> exists, the series will use <code class=\"codespan\">dataset</code>. <code class=\"codespan\">datasetIndex</code> specifies which dataset will be used.</p>\n","default":0},"dimensions":{"type":["Array"],"description":"<p><code class=\"codespan\">dimensions</code> can be used to define dimension info for <code class=\"codespan\">series.data</code> or <code class=\"codespan\">dataset.source</code>.</p>\n<p>Notice: if <a href=\"#dataset\">dataset</a> is used, we can provide dimension names in the first column/row of <a href=\"#dataset.source\">dataset.source</a>, and not need to specify <code class=\"codespan\">dimensions</code> here. But if <code class=\"codespan\">dimensions</code> is specified here, echarts will not retrieve dimension names from the first row/column of <code class=\"codespan\">dataset.source</code> any more.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\n    ]\n}\n</code></pre>\n<p>Each data item of <code class=\"codespan\">dimensions</code> can be:</p>\n<ul>\n<li><code class=\"codespan\">string</code>, for example, <code class=\"codespan\">&#39;someName&#39;</code>, which equals to <code class=\"codespan\">{name: &#39;someName&#39;}</code>.</li>\n<li><code class=\"codespan\">Object</code>, where the attributes can be:<ul>\n<li>name: <code class=\"codespan\">string</code>.</li>\n<li>type: <code class=\"codespan\">string</code>, supports:<ul>\n<li><code class=\"codespan\">number</code></li>\n<li><code class=\"codespan\">float</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array\" target=\"_blank\">Float64Array</a></li>\n<li><code class=\"codespan\">int</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array\" target=\"_blank\">Int32Array</a></li>\n<li><code class=\"codespan\">ordinal</code>, discrete value, which represents string generally.</li>\n<li><code class=\"codespan\">time</code>, time value, see <a href=\"#series.data\">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code class=\"codespan\">string</code>, generally used in tooltip for dimension display. If not specified, use <code class=\"codespan\">name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code class=\"codespan\">dimensions</code> is specified, the default <code class=\"codespan\">tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code class=\"codespan\">tooltip</code> will displayed only value horizontally.</p>\n"},"encode":{"type":["Object"],"description":"<p>Define what is encoded to for each dimension of <code class=\"codespan\">data</code>. For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n</code></pre>\n<p>When <a href=\"#series.dimensions\">dimensions</a> is used to defined name for a certain dimension, <code class=\"codespan\">encode</code> can refer the name directly. For example:</p>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<p>The basic structure of <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code> or some special reserved names like &quot;tooltip&quot;, &quot;itemName&quot; etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code class=\"codespan\">encode</code> listed as follows:</p>\n<pre><code class=\"lang-js\">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension &quot;product&quot; and &quot;score&quot; in the tooltip.\n    tooltip: [&#39;product&#39;, &#39;score&#39;]\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // &#39;pie&#39;, &#39;funnel&#39;, where data item name can be displayed in legend.\n    itemName: 3\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension &quot;score&quot; to the X axis.\n    x: [1, 5, &#39;score&#39;],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like &#39;pie&#39;, &#39;funnel&#39; etc.:\nencode: {\n    value: 3\n}\n</code></pre>\n<p>This is an <a href=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a> for <code class=\"codespan\">encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code class=\"codespan\">encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href=\"#dataZoom\">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class=\"lang-js\">var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            return {\n                type: &#39;circle&#39;,\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: &#39;blue&#39;\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n</code></pre>\n"},"data":{"type":["Array"],"description":"<p>Data array of series, which can be in the following forms:</p>\n<p>Notice, if no <code class=\"codespan\">data</code> specified in series, and there is <a href=\"#dataset\">dataset</a> in option, series will use the first <a href=\"#dataset\">dataset</a> as its datasource. If <code class=\"codespan\">data</code> has been specified, <a href=\"#dataset\">dataset</a> will not used.</p>\n<p><code class=\"codespan\">series.datasetIndex</code> can be used to specify other <a href=\"#dataset\">dataset</a>.</p>\n<p>Basically, data is represented by a two-dimension array, like the example below, where each column is named as a &quot;dimension&quot;.</p>\n<pre><code class=\"lang-js\">series: [{\n    data: [\n        // dimX   dimY   other dimensions ...\n        [  3.4,    4.5,   15,   43],\n        [  4.2,    2.3,   20,   91],\n        [  10.8,   9.5,   30,   18],\n        [  7.2,    8.8,   18,   57]\n    ]\n}]\n</code></pre>\n<ul>\n<li>In <a href=\"#grid\">cartesian (grid)</a>, &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href=\"#xAxis\">xAxis</a> and <a href=\"#yAxis\">yAxis</a> respectively.</li>\n<li>In <a href=\"#polar\">polar</a> &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href=\"#radiusAxis\">radiusAxis</a> 和 <a href=\"#anbleAxis\">angleAxis</a> respectively.</li>\n<li>Other dimensions are optional, which can be used in other places. For example:<ul>\n<li><a href=\"#visualMap\">visualMap</a> can map one or more dimensions to visual (color, symbol size ...).</li>\n<li><a href=\"#series.symbolSize\">series.symbolSize</a> can be set as a callback function, where symbol size can be calculated by values of a certain dimension.</li>\n<li>Values in other dimensions can be shown by <a href=\"#tooltip.formatter\">tooltip.formatter</a> or <a href=\"#series.label.formatter\">series.label.formatter</a>.</li>\n</ul>\n</li>\n</ul>\n<p>Especially, when there is one and only one category axis (axis.type is <code class=\"codespan\">&#39;category&#39;</code>), data can be simply be represented by a one-dimension array, like:</p>\n<pre><code class=\"lang-js\">xAxis: {\n    data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;]\n},\nseries: [{\n    // Each item corresponds to each item in xAxis.data.\n    data: [23,  44,  55,  19]\n    // In fact, it is the simplification of the format below:\n    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n</code></pre>\n<p><br>\n<strong>Relationship between &quot;value&quot; and <a href=\"#xAxis.type\">axis.type</a></strong></p>\n<ul>\n<li><p>When a dimension corresponds to a value axis (axis.type is <code class=\"codespan\">&#39;value&#39;</code> or <code class=\"codespan\">&#39;log&#39;</code>):</p>\n<p>  The value can be a <code class=\"codespan\">number</code> (like <code class=\"codespan\">12</code>) (can also be a number in a <code class=\"codespan\">string</code> format, like <code class=\"codespan\">&#39;12&#39;</code>).</p>\n</li>\n<li><p>When a dimension corresponds to a category axis (axis.type is <code class=\"codespan\">&#39;category&#39;</code>):</p>\n<p>  The value should be the ordinal of the axis.data (based on <code class=\"codespan\">0</code>), the string value of the axis.data. For example:</p>\n<pre><code class=\"lang-js\">  xAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;]\n  },\n  yAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;, &#39;p&#39;, &#39;q&#39;]\n  },\n  series: [{\n      data: [\n          // xAxis      yAxis\n          [  0,           0,    2  ], // This point is located at xAxis: &#39;Monday&#39;, yAxis: &#39;a&#39;.\n          [  &#39;Thursday&#39;,  2,    1  ], // This point is located at xAxis: &#39;Thursday&#39;, yAxis: &#39;m&#39;.\n          [  2,          &#39;p&#39;,   2  ], // This point is located at xAxis: &#39;Wednesday&#39;, yAxis: &#39;p&#39;.\n          [  3,           3,    5  ]\n      ]\n  }]\n</code></pre>\n<p>  There is an example of double category axes: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-punchCard\" target=\"_blank\">Github Punchcard</a>.</p>\n</li>\n<li><p>When a dimension corresponds to a time axis (type is <code class=\"codespan\">&#39;time&#39;</code>), the value can be:</p>\n<ul>\n<li>a timestamp, like <code class=\"codespan\">1484141700832</code>, which represents a UTC time.</li>\n<li>a date string, in one of the formats below:<ul>\n<li>a subset of <a href=\"http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15\" target=\"_blank\">ISO 8601</a>, only including (all of these are treated as local time unless timezone is specified, which is consistent with <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>):<ul>\n<li>only part of year/month/date/time are specified: <code class=\"codespan\">&#39;2012-03&#39;</code>, <code class=\"codespan\">&#39;2012-03-01&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 05&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 05:06&#39;</code>.</li>\n<li>separated by <code class=\"codespan\">&quot;T&quot;</code> or a space: <code class=\"codespan\">&#39;2012-03-01T12:22:33.123&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 12:22:33.123&#39;</code>.</li>\n<li>timezone specified: <code class=\"codespan\">&#39;2012-03-01T12:22:33Z&#39;</code>, <code class=\"codespan\">&#39;2012-03-01T12:22:33+8000&#39;</code>, <code class=\"codespan\">&#39;2012-03-01T12:22:33-05:00&#39;</code>.</li>\n</ul>\n</li>\n<li>other date string format (all of these are treated as local time):\n<code class=\"codespan\">&#39;2012&#39;</code>, <code class=\"codespan\">&#39;2012-3-1&#39;</code>, <code class=\"codespan\">&#39;2012/3/1&#39;</code>, <code class=\"codespan\">&#39;2012/03/01&#39;</code>,\n<code class=\"codespan\">&#39;2009/6/12 2:00&#39;</code>, <code class=\"codespan\">&#39;2009/6/12 2:05:08&#39;</code>, <code class=\"codespan\">&#39;2009/6/12 2:05:08.123&#39;</code>.</li>\n</ul>\n</li>\n<li>a JavaScript Date instance created by user:<ul>\n<li>Caution, when using a data string to create a Date instance, <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">browser differences and inconsistencies</a> should be considered.</li>\n<li>For example: In chrome, <code class=\"codespan\">new Date(&#39;2012-01-01&#39;)</code> is treated as a Jan 1st 2012 in UTC, while <code class=\"codespan\">new Date(&#39;2012-1-1&#39;)</code> and <code class=\"codespan\">new Date(&#39;2012/01/01&#39;)</code> are treated as Jan 1st 2012 in local timezone. In safari <code class=\"codespan\">new Date(&#39;2012-1-1&#39;)</code> is not supported.</li>\n<li>So if you intent to perform <code class=\"codespan\">new Date(dateString)</code>, it is strongly recommended to use a time parse library (e.g., <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>), or use <code class=\"codespan\">echarts.number.parseDate</code>, or check <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">this</a>.</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<strong>Customize a data item:</strong></p>\n<p>When needing to customize a data item, it can be set as an object, where property <code class=\"codespan\">value</code> reprensent real value. For example:</p>\n<pre><code class=\"lang-js\">[\n    12,\n    24,\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    33\n]\n// Or\n[\n    [12, 332],\n    [24, 32],\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    [33, 31]\n]\n</code></pre>\n<p><br>\n<strong>Empty value:</strong></p>\n<p><code class=\"codespan\">&#39;-&#39;</code> or <code class=\"codespan\">null</code> or <code class=\"codespan\">undefined</code> or <code class=\"codespan\">NaN</code> can be used to describe that a data item does not exist (ps:<em>not exist</em> does not means its value is <code class=\"codespan\">0</code>).</p>\n<p>For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.</p>\n<p><br><br></p>\n","items":{"type":"Object","properties":{"symbol":{"type":["string"],"description":"<p>Symbol of single data.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>","default":"'circle'"},"symbolSize":{"type":["number","Array"],"description":"<p>single data symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n","default":4},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of single data symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of single data symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"inside"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-effectScatter.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-effectScatter.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-effectScatter.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-effectScatter.markPoint.data.x\">x</a>, <a href=\"#series-effectScatter.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-effectScatter.markPoint.data.coord\">coord</a> attribute, in which <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-effectScatter.markPoint.data.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-effectScatter.markPoint.data.valueIndex\">valueIndex</a> or <a href=\"#series-effectScatter.markPoint.data.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n    {\n        name: &#39;maximum&#39;,\n        type: &#39;max&#39;\n    }, \n    {\n        name: &#39;coordinate&#39;,\n        coord: [10, 20]\n    }, {\n        name: &#39;fixed x position&#39;,\n        yAxis: 10,\n        x: &#39;90%&#39;\n    }, \n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Available when using <a href=\"#series-effectScatter.markPoint.data.type\">type</a> it is used to assign maximum value and minimum value in dimensions, it could be <code class=\"codespan\">0</code> (xAxis, radiusAxis), <code class=\"codespan\">1</code> (yAxis, angleAxis), and use the first value axis dimension by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-effectScatter.markPoint.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["Object"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-effectScatter.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class=\"codespan\">symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-effectScatter.markLine.data.0.x\">x</a>, <a href=\"#series-effectScatter.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-effectScatter.markLine.data.0.coord\">coord</a> attribute, in which <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-effectScatter.markLine.data.0.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-effectScatter.markLine.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-effectScatter.markLine.data.0.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n<li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code class=\"codespan\">xAxis</code> or <code class=\"codespan\">yAxis</code>. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a> for example.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p>You may also set the type of mark line through <code class=\"codespan\">type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code class=\"codespan\">valueIndex</code>.</p>\n<pre><code>data: [\n    {\n        name: &#39;average line&#39;,\n        // &#39;average&#39;, &#39;min&#39;, and &#39;max&#39; are supported\n        type: &#39;average&#39;\n    },\n    {\n        name: &#39;Horizontal line with Y value at 100&#39;,\n        yAxis: 100\n    },\n    [\n        {\n            // Use the same name with starting and ending point\n            name: &#39;Minimum to Maximum&#39;,\n            type: &#39;min&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n    [\n        {\n            name: &#39;Markline between two points&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [{\n        // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n        yAxis: &#39;max&#39;,\n        x: &#39;90%&#39;\n    }, {\n        type: &#39;max&#39;\n    }],\n    [\n        {\n            name: &#39;Mark line between two points&#39;,\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n<li><code class=\"codespan\">&#39;median&#39;</code> median value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-effectScatter.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-effectScatter.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'starting point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n<li><code class=\"codespan\">&#39;median&#39;</code> median value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-effectScatter.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-effectScatter.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'ending point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code class=\"codespan\">data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li><p>Specify the coordinate in screen coordinate system using <a href=\"#series-effectScatter.markArea.data.0.x\">x</a>, <a href=\"#series-effectScatter.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code class=\"codespan\">5</code>), or percent (e.g., the value is <code class=\"codespan\">&#39;35%&#39;</code>).</p>\n</li>\n<li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using\n<a href=\"#series-effectScatter.markArea.data.0.coord\">coord</a>, which can be also set as <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> (e.g, <code class=\"codespan\">coord: [23, &#39;min&#39;]</code>, or <code class=\"codespan\">coord: [&#39;average&#39;, &#39;max&#39;]</code>).</p>\n</li>\n</ol>\n<ol start=\"3\">\n<li>Locate the point on the min value or max value of <code class=\"codespan\">series.data</code> using <a href=\"#series-effectScatter.markArea.data.0.type\">type</a>, where <a href=\"#series-effectScatter.markArea.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-effectScatter.markPoint.data.0.valueDim\">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</li>\n<li>If in cartesian, you can only specify <code class=\"codespan\">xAxis</code> or <code class=\"codespan\">yAxis</code> to define a mark area based on only X or Y axis, see sample <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a></li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n\n    [\n        {\n            name: &#39;From average to max&#39;,\n            type: &#39;average&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n\n    [\n        {\n            name: &#39;Mark area between two points in data coordiantes&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [\n        {\n            name: &#39;From 60 to 80&#39;,\n            yAxis: 60\n        },\n        {\n            yAxis: 80\n        }\n    ], [\n        {\n            name: &#39;Mark area covers all data&#39;\n            coord: [&#39;min&#39;, &#39;min&#39;]\n        },\n        {\n            coord: [&#39;max&#39;, &#39;max&#39;]\n        }\n    ],\n    [\n        {\n            name: &#39;Mark area in two screen points&#39;,\n            x: 100,\n            y: 100\n        }, {\n            x: &#39;90%&#39;,\n            y: &#39;10%&#39;\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> max value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> min value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-effectScatter.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-effectScatter.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'start'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> max value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> min value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-effectScatter.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-effectScatter.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'end'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong>radar chart</strong></p>\n<p>Radar chart is mainly used to show multi-variable data, such as the analysis of a football player&#39;s varied attributes. It relies <a href=\"#radar\">radar</a> component.</p>\n<p>Here is the example of AQI data which is presented in radar chart.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=radar-aqi&edit=1&reset=1\" width=\"600\" height=\"500\"><iframe />\n\n\n","properties":{"type":{"type":["string"],"description":"","default":"'radar'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"radarIndex":{"type":["number"],"description":"<p>Index of <a href=\"#radar\">radar</a> component that radar chart uses.</p>\n"},"symbol":{"type":["string","Function"],"description":"<p>Symbol of radar.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-radar.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'circle'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>radar symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-radar.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":4},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of radar symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-radar.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of radar symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"label":{"type":["Object"],"description":"<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'top'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Item style of the inflection point of the lines.</p>\n","properties":{"color":{"type":["Color","Function"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n<p>Supports callback functions, in the form of:</p>\n<pre><code class=\"lang-js\">(params: Object) =&gt; Color\n</code></pre>\n<p>Input parameters are <code class=\"codespan\">seriesIndex</code>, <code class=\"codespan\">dataIndex</code>, <code class=\"codespan\">data</code>, <code class=\"codespan\">value</code>, and etc. of data item.</p>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"lineStyle":{"type":["Object"],"description":"<p>Line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"areaStyle":{"type":["Object"],"description":"<p>Area filling style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"areaStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>The data in radar chart is multi-variable (dimension). Here is an example:</p>\n<pre><code class=\"lang-js\">data : [\n    {\n        value : [4300, 10000, 28000, 35000, 50000, 19000],\n        name : &#39;Allocated Budget&#39;\n    },\n    {\n        value : [5000, 14000, 28000, 31000, 42000, 21000],\n        name : &#39;Actual Spending&#39;\n    }\n]\n</code></pre>\n<p>Among them, <code class=\"codespan\">value</code> item array contains data that is corresponding to <a href=\"#radar.indicator\">radar.indicator</a>.</p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Data item name</p>\n"},"value":{"type":["number"],"description":"<p>Numerical value of a single data item.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of single data.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>","default":"'circle'"},"symbolSize":{"type":["number","Array"],"description":"<p>single data symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n","default":4},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of single data symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of single data symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"label":{"type":["Object"],"description":"<p>Style setting of the text on single inflection point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"top"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style setting of the symbol on single inflection point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Bar color. </p>\n","default":"auto"},"borderColor":{"type":["Color"],"description":"<p>The border color of bar.</p>\n","default":"'#000'"},"borderWidth":{"type":["number"],"description":"<p>The border width of bar. defaults to have no border.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"lineStyle":{"type":["Object"],"description":"<p>Line style of a single item.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"areaStyle":{"type":["Object"],"description":"<p>Area filling style of a single item.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"top"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Bar color. </p>\n","default":"auto"},"borderColor":{"type":["Color"],"description":"<p>The border color of bar.</p>\n","default":"'#000'"},"borderWidth":{"type":["number"],"description":"<p>The border width of bar. defaults to have no border.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"areaStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in radar chart.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in radar chart, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong>Tree Diagram</strong></p>\n<p>The tree diagram is mainly used to visualize the tree data structure, which is a special hierarchical type with a unique root node, left subtree, and right subtree.</p>\n<p><strong>Note: Forests are not currently supported directly in a single series, and can be implemented by configuring multiple series in an option</strong></p>\n<p><strong>Tree example:</strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=tree-vertical&edit=1&reset=1\" width=\"900\" height=\"780\"><iframe />\n\n\n<p><strong>Multiple series are combined into forest:</strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=tree-legend&edit=1&reset=1\" width=\"800\" height=\"680\"><iframe />\n\n","properties":{"type":{"type":["string"],"description":"","default":"'tree'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between tree component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"12%"},"top":{"type":["string","number"],"description":"<p>Distance between tree component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"12%"},"right":{"type":["string","number"],"description":"<p>Distance between tree component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n","default":"12%"},"bottom":{"type":["string","number"],"description":"<p>Distance between tree component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n","default":"12%"},"width":{"type":["string","number"],"description":"<p>Width of tree component. </p>\n","default":null},"height":{"type":["string","number"],"description":"<p>Height of tree component. </p>\n","default":null},"layout":{"type":["string"],"description":"<p>The layout of the tree, which can be <code class=\"codespan\">orthogonal</code> and <code class=\"codespan\">radial</code>. Here the <code class=\"codespan\">orthogonal</code> layout is what we usually refer to the <code class=\"codespan\">horizontal</code> and <code class=\"codespan\">vertical</code> direction, the corresponding parameter value is <code class=\"codespan\">orthogonal</code>. The <code class=\"codespan\">radial</code> layout refers to the view that the root node as the center and each layer of nodes as the ring, the corresponding parameter value is <code class=\"codespan\">radial</code>.</p>\n<p><strong>Orthogonal Example:</strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=tree-basic&edit=1&reset=1\" width=\"780\" height=\"900\"><iframe />\n\n\n\n<p><strong>Radial Example:</strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=tree-radial&edit=1&reset=1\" width=\"800\" height=\"800\"><iframe />\n\n\n","default":"'orthogonal'"},"orient":{"type":["string"],"description":"<p>The direction of the <code class=\"codespan\">orthogonal</code> layout in the tree diagram. That means this configuration takes effect only if <code class=\"codespan\">layout = &#39;orthogonal&#39;</code>. The corresponding directions are <code class=\"codespan\">from left to right</code>, <code class=\"codespan\">from right to left</code>, <code class=\"codespan\">from top to bottom</code>, <code class=\"codespan\">from bottom to top</code>, with shorthand values <code class=\"codespan\">&#39;LR&#39;</code>, <code class=\"codespan\">&#39;RL&#39;</code>, <code class=\"codespan\">&#39;TB&#39;</code>, <code class=\"codespan\">&#39;BT&#39;</code>.\n<strong>Note: The previous configuration value <code class=\"codespan\">&#39;horizontal&#39;</code> is equivalent to <code class=\"codespan\">&#39;LR&#39;</code>, <code class=\"codespan\">&#39;vertical&#39;</code> is equivalent to <code class=\"codespan\">&#39;TB&#39;</code>.</strong></p>\n","default":"'LR'"},"symbol":{"type":["string","Function"],"description":"<p>Symbol of tree node.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-tree.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'emptyCircle'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>tree node symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-tree.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":7},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of tree node symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-tree.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of tree node symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"edgeShape":{"type":["string"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.7.0</code></p>\n</blockquote>\n<p>The shape of the edge which is under the tree <code class=\"codespan\">orthogonal layout</code>. There are two types of shape, curve and polyline, the corresponding values are <code class=\"codespan\">&#39;curve&#39;</code> and <code class=\"codespan\">&#39;polyline&#39;</code>.</p>\n<p><strong> Note: This configuration item is only valid under the <code class=\"codespan\">orthogonal layout</code>. Errors will be reported in the development environment under the <code class=\"codespan\">radial layout</code>. </strong></p>\n","default":"'curve'"},"edgeForkPosition":{"type":["string"],"description":"<p>This is the position where the polyline branches in the subtree when the shape of the edge is a polyline in the <code class=\"codespan\">orthogonal layout</code>. The position here refers to the percentage of the distance between the bifurcation point and the parent node of the subtree to the height of the entire subtree. The default value is <code class=\"codespan\">&#39;50%&#39;</code>, which can be between [&#39;0&#39;, &#39;100%&#39;].</p>\n<p><strong> Note: This configuration item is only valid when <code class=\"codespan\">edgeShape = &#39;polyline&#39;</code>. </strong></p>\n","default":"'50%'"},"roam":{"type":["boolean","string"],"description":"<p>Whether to enable mouse zooming and translating. <code class=\"codespan\">false</code> by default. If either zooming or translating is wanted, it can be set to <code class=\"codespan\">&#39;scale&#39;</code> or <code class=\"codespan\">&#39;move&#39;</code>. Otherwise, set it to be <code class=\"codespan\">true</code> to enable both.</p>\n","default":false},"expandAndCollapse":{"type":["boolean"],"description":"<p>Subtree collapses and expands interaction, <code class=\"codespan\">default true</code>. As the drawing area is limited, and usually the nodes of a tree may be more, so there will be hidden between the nodes. In order to avoid this problem, you can put a temporary unrelated subtree folded away, until you need to start when necessary. Such as the above radial layout tree example, the center of the node is filled with blue is the folded away subtree, you can click to expand it.</p>\n<p><strong>Note: If you configure a custom image as the tag for a node, it is not possible to distinguish whether the current node has a collapsed subtree by the fill color. And currently do not support, upload two pictures, respectively represent the collapsing and expansion state of the node. So, if you want to explicitly show the two states of the node, it is recommended to use <code class=\"codespan\">ECharts</code> regular tag types, such as <code class=\"codespan\">emptyCircle</code>.</strong></p>\n","default":true},"initialTreeDepth":{"type":["number"],"description":"<p>The initial level (depth) of the tree. The root node is the 0th layer, then the first layer, the second layer, ... , until the leaf node. This configuration item is primarily used in conjunction with <code class=\"codespan\">collapsing and expansion</code> interactions. The purpose is to prevent the nodes from obscuring each other. If set as -1 or <code class=\"codespan\">null</code> or <code class=\"codespan\">undefined</code>, all nodes are expanded.</p>\n","default":2},"itemStyle":{"type":["Object"],"description":"<p>The style of each node in the tree, where [itemStyle.color] (~ series-tree.itemStyle.color) represents the fill color of the node, to distinguish the state of the subtree corresponding to <code class=\"codespan\">collapsing</code> or <code class=\"codespan\">expansion</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"'#c23531'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1.5},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"<p><code class=\"codespan\">label</code> describes the style of the text corresponding to each node.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"<p>Defines the style of the tree edge.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>The color of the tree edge.</p>\n","default":"\"'#ccc'\""},"width":{"type":["number"],"description":"<p>The width of the tree edge.</p>\n","default":1.5},"curveness":{"type":["number"],"description":"<p>The curvature of the tree edge.</p>\n","default":0.5},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>The color of the tree edge.</p>\n","default":"\"'#ccc'\""},"width":{"type":["number"],"description":"<p>The width of the tree edge.</p>\n","default":1.5},"curveness":{"type":["number"],"description":"<p>The curvature of the tree edge.</p>\n","default":0.5},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"leaves":{"type":["Object"],"description":"<p>Leaf node special configuration, such as the above tree diagram example, the leaf node and non-leaf node label location is different.</p>\n","properties":{"label":{"type":["Object"],"description":"<p>Describes the style of the text label corresponding to the leaf node.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>The style of the leaf node in the tree.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}}}},"data":{"type":["Object"],"description":"<p><a href=\"#series-tree.data\">series-tree.data</a> the data format is a tree structure, for example:</p>\n<pre><code class=\"lang-javascript\">{ // note that the outermost layer is an object that represents the root node of the tree.\n    name: &quot;flare&quot;,    // the name of the node, the text corresponding to the current node label.\n    label: {          // the special label configuration (if necessary).\n        ...           // the format of the label is shown in the series-tree.label.\n    },\n    itemStyle: {      // the special itemStyle configuration (if necessary).\n        ...           // the format of the itemstyle is shown in the series-tree.itemStyle.\n    },\n    children: [\n        {\n            name: &quot;flex&quot;,\n            value: 4116,    // value, which only displayed in tooltip.\n            label: {\n                ...\n            },\n            itemStyle: {\n                ...\n            },\n            collapsed: null, // If set as `true`, the node is collpased in the initialization.\n            children: [...]  // leaf nodes do not have children, can not write.\n        },\n        ...\n    ]\n};\n</code></pre>\n","properties":{"name":{"type":["string"],"description":"<p>The name of the tree node, used to identify each node.</p>\n"},"value":{"type":["number"],"description":"<p>The value of the node, displayed in the tooltip.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>The style of the node.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"<p>The label of the node.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"'linear'"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><a href=\"https://en.wikipedia.org/wiki/Treemapping\" target=\"_blank\">Treemap</a> is a common way to present &quot;hierarchical data&quot; or &quot;tree data&quot;. It primarily highlights the important nodes at all hierarchies in 『Tree』with area.</p>\n<p><strong>Example:</strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=treemap-obama&edit=1&reset=1\" width=\"700\" height=\"580\"><iframe />\n\n\n\n<p><br>\n<strong>Visual Mapping:</strong></p>\n<p>treemap maps the numerical values to area.</p>\n<p>Moreover, it is able to map some dimensions of data to other visual channel, like colors, lightness of colors and etc.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br>\n<strong>Drill Down:</strong></p>\n<p>The feature <code class=\"codespan\">drill down</code> means: when clicking a tree node, this node will be set as root and its children will be shown. When <a href=\"#series-treemap.leafDepth\">leafDepth</a> is set, this feature is enabled.</p>\n<p><strong>An example about drill down:</strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=treemap-drill-down&edit=1&reset=1\" width=\"800\" height=\"500\"><iframe />\n\n\n<p><br>\n<br>\n<br>\nNotice: There are some difference in treemap configuration between ECharts3 and ECharts2. Some immature configuration ways are no longer supported:</p>\n<ul>\n<li><p>The position method using <code class=\"codespan\">center/size</code> is no longer supported, and <code class=\"codespan\">left/top/bottom/right/width/height</code> are used to position treemap, as other components do.</p>\n</li>\n<li><p>The configuration item <code class=\"codespan\">breadcrumb</code> is moved outside <code class=\"codespan\">itemStyle/itemStyle.emphasis</code>, and it is in the same level with <code class=\"codespan\">itemStyle</code> now.</p>\n</li>\n<li><p>The configuration item <code class=\"codespan\">root</code> is not avaliable temporarily.User can zoom treemap to see some tiny or deep descendants, or using <a href=\"#series-treemap.leafDepth\">leafDepth</a> to enable the feature of &quot;drill down&quot;.</p>\n</li>\n<li><p>The configuration item <code class=\"codespan\">label</code> is moved outside the <code class=\"codespan\">itemStyle/itemStyle.emphasis</code>, and it is in the same level with <code class=\"codespan\">itemStyle</code> now.</p>\n</li>\n<li><p>The configuration items <code class=\"codespan\">itemStyle.childBorderWidth</code> and <code class=\"codespan\">itemStyle.childBorderColor</code> are not supported anymore (because in this way only 2 levels can be defined). <a href=\"#series-treemap.levels\">series-treemap.levels</a> is used to define all levels now.</p>\n</li>\n</ul>\n<p><br>\n<br></p>\n","properties":{"type":{"type":["string"],"description":"","default":"'treemap'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between treemap  component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"center"},"top":{"type":["string","number"],"description":"<p>Distance between treemap  component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"middle"},"right":{"type":["string","number"],"description":"<p>Distance between treemap  component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"<p>Distance between treemap  component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"width":{"type":["string","number"],"description":"<p>Width of treemap  component. </p>\n","default":"80%"},"height":{"type":["string","number"],"description":"<p>Height of treemap  component. </p>\n","default":"80%"},"squareRatio":{"type":["number"],"description":"<p>The expected square ratio. Layout would approach the ratio as close as possible.</p>\n<p>It defaults to be the golden ratio: <code class=\"codespan\">0.5 * (1 + Math.sqrt(5))</code>.</p>\n"},"leafDepth":{"type":["number"],"description":"<p>When <code class=\"codespan\">leafDepth</code> is set, the feature &quot;drill down&quot; is enabled, which means when clicking a tree node, this node will be set as root and its children will be shown.</p>\n<p><code class=\"codespan\">leafDepth</code> represents how many levels are shown at most. For example, when <code class=\"codespan\">leafDepth</code> is set to <code class=\"codespan\">1</code>, only one level will be shown.</p>\n<p><code class=\"codespan\">leafDepth</code> is <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code> by default, which means that &quot;drill down&quot; is disabled.</p>\n<p><strong>An example about drill down:</strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=treemap-drill-down&edit=1&reset=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":null},"drillDownIcon":{"type":["string"],"description":"<p>Marker when the node is able to be drilled down.</p>\n","default":"'▶'"},"roam":{"type":["boolean","string"],"description":"<p>Whether to enable dragging roam (move and zoom). Optional values are:</p>\n<ul>\n<li><code class=\"codespan\">false</code>: roam is disabled.</li>\n<li><code class=\"codespan\">&#39;scale&#39;</code> or <code class=\"codespan\">&#39;zoom&#39;</code>: zoom only.</li>\n<li><code class=\"codespan\">&#39;move&#39;</code> or <code class=\"codespan\">&#39;pan&#39;</code>: move (translation) only.</li>\n<li><code class=\"codespan\">true</code>: both zoom and move (translation) are avaliable.</li>\n</ul>\n","default":true},"nodeClick":{"type":["boolean","string"],"description":"<p>The behaviour when clicking a node. Optional values are:</p>\n<ul>\n<li><code class=\"codespan\">false</code>: Do nothing after clicked.</li>\n<li><code class=\"codespan\">&#39;zoomToNode&#39;</code>: Zoom to clicked node.</li>\n<li><code class=\"codespan\">&#39;link&#39;</code>: If there is <a href=\"#series-treemap.data.link\">link</a> in node data, do hyperlink jump after clicked.</li>\n</ul>\n","default":"'zoomToNode'"},"zoomToNodeRatio":{"type":["number"],"description":"<p>The treemap will be auto zoomed to a appropriate ratio when a node is clicked (when <a href=\"#series-treemap.nodeClick\">nodeClick</a> is set as <code class=\"codespan\">&#39;zoomToNode&#39;</code> and no drill down happens). This configuration item indicates the ratio.</p>\n","default":"0.32*0.32"},"levels":{"type":["Array"],"description":"<p><strong>Multiple Levels Configuration</strong></p>\n<p>treemap adopts 4-level configuration:</p>\n<pre><code>&quot;each node&quot; --&gt; &quot;each level&quot; --&gt; &quot;each series&quot;.\n</code></pre><p>That is, we can configurate each node, can also configurate each level of the tree, or set overall configurations on each series. The highest priority is node configuration.</p>\n<p><code class=\"codespan\">levels</code> is configurations on each levels, which is used most.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">// Notice that in fact the data structure is not &quot;tree&quot;, but is &quot;forest&quot;.\ndata: [\n    {\n        name: &#39;nodeA&#39;,\n        children: [\n            {name: &#39;nodeAA&#39;},\n            {name: &#39;nodeAB&#39;},\n        ]\n    },\n    {\n        name: &#39;nodeB&#39;,\n        children: [\n            {name: &#39;nodeBA&#39;}\n        ]\n    }\n],\nlevels: [\n    {...}, // configurations of the top level of the data structure &quot;forest&quot;\n        // (the level that contains &#39;nodeA&#39;, &#39;nodeB&#39; shown above).\n    {...}, // configurations of the next level\n        // (the level that contains &#39;nodeAA&#39;, &#39;nodeAB&#39;, &#39;nodeBA&#39; shown above)\n    {...}, // configurations of the next level\n    ...\n]\n</code></pre>\n<p><br>\n<strong>The Rules about Visual Mapping</strong></p>\n<p>When designing a treemap, we primarily focus on how to visually distinguish &quot;different levels&quot;, &quot;different categories in the same level&quot;, which requires appropriate settings of &quot;rectangular color&quot;, &quot;border thickness&quot;, &quot;border color&quot; and even &quot;color saturation of rectangular&quot; and so on on each level.</p>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=treemap-disk&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>. The top level is divided into several parts by colors &quot;red&quot;, &quot;green&quot;, &quot;blue&quot;, and etc ... In each color block, <code class=\"codespan\">colorSaturation</code> is used to distinguish nodes in sublevel. The border color of the top level is &quot;white&quot;, while the border color of the sublevel is the color that based on the current block color and processed by <code class=\"codespan\">borderColorSaturation</code>.</p>\n<p><code class=\"codespan\">treemap</code> uses this rule of visual configuration: each level computes its visual value based on the configurations (<code class=\"codespan\">color</code>, <code class=\"codespan\">colorSaturation</code>, <code class=\"codespan\">borderColor</code>, <code class=\"codespan\">borderColorSaturation</code>) on this level. If there is no certain configuration in a node, it inherits the configuration from its parent.</p>\n<p>In this way, this effect can be configured: set a <code class=\"codespan\">color</code> list on the parent level, and set <code class=\"codespan\">colorSaturation</code> on the child level, and then each node in the parent level would obtain a color from the <code class=\"codespan\">color</code> list, and each node in the child level would obtain a value from <code class=\"codespan\">colorSaturation</code> and compound it with the color inherited from its parent node to get its final color.</p>\n<p><br>\n<strong>Dimensions and &quot;Extra Visual Mapping&quot;</strong></p>\n<p>See the example below: every <code class=\"codespan\">value</code> field is set as an Array, in which each item in the array represents a dimension respectively.</p>\n<pre><code class=\"lang-javascript\">[\n    {\n        value: [434, 6969, 8382],\n        children: [\n            {\n                value: [1212, 4943, 5453],\n                id: &#39;someid-1&#39;,\n                name: &#39;description of this node&#39;,\n                children: [...]\n            },\n            {\n                value: [4545, 192, 439],\n                id: &#39;someid-2&#39;,\n                name: &#39;description of this node&#39;,\n                children: [...]\n            },\n            ...\n        ]\n    },\n    {\n        value: [23, 59, 12],\n        children: [...]\n    },\n    ...\n]\n</code></pre>\n<p><code class=\"codespan\">treemap</code> will map the first dimension (the first item of the array) to &quot;area&quot;. If we want to express more information, we could map another dimension (specified by <a href=\"#series-treemap.viusalDimension\">series-treemap.visualDimension</a>) to another visual types, such as <code class=\"codespan\">colorSaturation</code> and so on. See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=treemap-obama&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a> and select the legend &#39;Growth&#39;.</p>\n<p><br></p>\n<p><strong>How to avoid confusion by setting border/gap of node</strong></p>\n<p>If all of the border/gaps are set with the same color, confusion might occur when rectangulars in different levels display at the same time.</p>\n<p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/treemap-borderColor&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>. Notice that the child rectangles in the red area are in the deeper level than rectangles that are saparated by white gap. So in the red area, basically we set gap color with red, and use <code class=\"codespan\">borderColorSaturation</code> to lift the saturation.</p>\n<p><br>\n<strong>Explanation about borderWidth, gapWidth, borderColor</strong></p>\n<p><img width=\"500\" height=\"auto\" src=\"documents/asset/img/treemap-border-gap.png\"></p>\n","items":{"type":"Object","properties":{"visualDimension":{"type":["number"],"description":"<p><code class=\"codespan\">treemap</code> is able to map any dimensions of data to visual.</p>\n<p>The value of <a href=\"#series-treemap.data\">series-treemap.data</a> can be an array. And each item of the array represents a &quot;dimension&quot;. <code class=\"codespan\">visualDimension</code> specifies the dimension on which visual mapping will be performed.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">visualDimension</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n","default":0},"visualMin":{"type":["number"],"description":"<p>The minimal value of current level. Auto-statistics by default.</p>\n<p>When <a href=\"#series-treemap.levels.colorMappingBy\">colorMappingBy</a> is set to <code class=\"codespan\">&#39;value&#39;</code>, you are able to specify extent manually for visual mapping by specifying <code class=\"codespan\">visualMin</code> or <code class=\"codespan\">visualMax</code>.</p>\n","default":null},"visualMax":{"type":["number"],"description":"<p>The maximal value of current level. Auto-statistics by default.</p>\n<p>When <a href=\"#series-treemap.levels.colorMappingBy\">colorMappingBy</a> is set to <code class=\"codespan\">&#39;value&#39;</code>, you are able to specify extent manually for visual mapping by specifying <code class=\"codespan\">visualMin</code> or <code class=\"codespan\">visualMax</code>.</p>\n","default":null},"color":{"type":["Array"],"description":"<p>A color list for a level. Each node in the level will obtain a color from the color list (the rule see <a href=\"#series-treemap.levels.colorMappingBy\">colorMappingBy</a>). It is empty by default, which means the global color list will be used.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">color</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n"},"colorAlpha":{"type":["Array"],"description":"<p>It indicates the range of tranparent rate (color alpha) for nodes in a level . The range of values is 0 ~ 1.</p>\n<p>For example, <code class=\"codespan\">colorAlpha</code> can be <code class=\"codespan\">[0.3, 1]</code>.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">colorAlpha</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n","default":null},"colorSaturation":{"type":["number"],"description":"<p>It indicates the range of saturation (color alpha) for nodes in a level . The range of values is 0 ~ 1.</p>\n<p>For example, <code class=\"codespan\">colorSaturation</code> can be <code class=\"codespan\">[0.3, 1]</code>.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">colorSaturation</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n","default":null},"colorMappingBy":{"type":["string"],"description":"<p>Specify the rule according to which each node obtain color from <a href=\"#series-treemap.levels.color\">color list</a>. Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;value&#39;</code>:</li>\n</ul>\n<p>Map <a href=\"#series-treemap.data.value\">series-treemap.data.value</a> to color.</p>\n<p>In this way, the color of each node indicate its value.</p>\n<p><a href=\"#series-treemap.levels.visualDimension\">visualDimension</a> can be used to specify which dimension of <a href=\"#series-treemap.data\">data</a> is used to perform visual mapping.</p>\n<ul>\n<li><code class=\"codespan\">&#39;index&#39;</code>:</li>\n</ul>\n<p>Map the <code class=\"codespan\">index</code> (ordinal number) of nodes to color. Namely, in a level, the first node is mapped to the first color of <a href=\"#series-treemap.levels.color\">color list</a>, and the second node gets the second color.</p>\n<p>In this way, adjacent nodes are distinguished by color.</p>\n<ul>\n<li><code class=\"codespan\">&#39;id&#39;</code>:</li>\n</ul>\n<p>Map <a href=\"#series-treemap.data.id\">series-treemap.data.id</a> to color.</p>\n<p>Since <code class=\"codespan\">id</code> is used to identify node, if user call <code class=\"codespan\">setOption</code> to modify the tree, each node will remain the original color before and after <code class=\"codespan\">setOption</code> called. See this <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=treemap-obama&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">colorMappingBy</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n","default":"'index'"},"visibleMin":{"type":["number"],"description":"<p>A node will not be shown when its area size is smaller than this value (unit: px square).</p>\n<p>In this way, tiny nodes will be hidden, otherwise they will huddle together. When user zoom the treemap, the area size will increase and the rectangle will be shown if the area size is larger than this threshold.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">visibleMin</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n","default":10},"childrenVisibleMin":{"type":["number"],"description":"<p>Children will not be shown when area size of a node is smaller than this value (unit: px square).</p>\n<p>This can hide the details of nodes when the rectangular area is not large enough. When users zoom nodes, the child node would show if the area is larger than this threshold.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">childrenVisibleMin</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n","default":null},"label":{"type":["Object"],"description":"<p><code class=\"codespan\">label</code> decribes the style of the label in each node.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">label</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n<p><br></p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"ellipsis":{"type":["boolean"],"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n","default":true}}},"upperLabel":{"type":["Object"],"description":"<p><code class=\"codespan\">upperLabel</code> is used to specify whether show label when the node has children. When <a href=\"#series-treemap.upperLabel.show\">upperLabel.show</a> is set as <code class=\"codespan\">true</code>, the feature that &quot;show parent label&quot; is enabled.</p>\n<p>The same as <a href=\"#series-treemap.label\">series-treemap.label</a>, the option <code class=\"codespan\">upperLabel</code> can be placed at the root of <a href=\"#series-treemap\">series-treemap</a> directly, or in <a href=\"#series-treemap.level\">series-treemap.level</a>, or in each item of <a href=\"#series-treemap.data\">series-treemap.data</a>.</p>\n<p>Specifically, <a href=\"#series-treemap.label\">series-treemap.label</a> specifies the style when a node is a leaf, while <code class=\"codespan\">upperLabel</code> specifies the style when a node has children, in which case the label is displayed in the inner top of the node.</p>\n<p>See:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=treemap-show-parent&edit=1&reset=1\" width=\"700\" height=\"500\"><iframe />\n\n\n\n\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">label</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n<p><br></p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number"],"description":"<p>Height of label area.</p>\n","default":20},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"ellipsis":{"type":["boolean"],"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n","default":true}}},"itemStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">itemStyle</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n<p><br></p>\n","properties":{"color":{"type":["Color"],"description":"<p>The color of a node. It use global palette <a href=\"#color\">option.color</a> by default.</p>\n","default":null},"colorAlpha":{"type":["number"],"description":"<p>The tranparent rate of a node, the range is between 0 ~ 1.</p>\n","default":null},"colorSaturation":{"type":["number"],"description":"<p>The color saturation of a node. The range is between 0 ~ 1.</p>\n","default":null},"borderWidth":{"type":["number"],"description":"<p>The border width of a node. There is no border when it is set as <code class=\"codespan\">0</code>.</p>\n<p>Tip, gaps between child nodes are specified by <a href=\"#series-treemap.levels.gapWidth\">gapWidth</a></p>\n","default":0},"gapWidth":{"type":["number"],"description":"<p>Gaps between child nodes.</p>\n","default":0},"borderColor":{"type":["Color"],"description":"<p>The border color and gap color of a node.</p>\n","default":"'#fff',"},"borderColorSaturation":{"type":["Color"],"description":"<p>The color saturation of a border or gap. The value range is between 0 ~ 1.</p>\n<p>Tips:</p>\n<p>When <code class=\"codespan\">borderColorSaturation</code> is set, the <code class=\"codespan\">borderColor</code> is disabled, and, instead, the final border color is calculated based on the color of this node (this color could be sepcified explicitly or inherited from its parent node) and mixing with <code class=\"codespan\">borderColorSaturation</code>.</p>\n<p>In this way, a effect can be implemented: different sections have different hue of gap color repectively, which makes users easy to distinguish both sections and levels.</p>\n<p><br></p>\n<p><strong>How to avoid confusion by setting border/gap of node</strong></p>\n<p>If all of the border/gaps are set with the same color, confusion might occur when rectangulars in different levels display at the same time.</p>\n<p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/treemap-borderColor&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>. Notice that the child rectangles in the red area are in the deeper level than rectangles that are saparated by white gap. So in the red area, basically we set gap color with red, and use <code class=\"codespan\">borderColorSaturation</code> to lift the saturation.</p>\n","default":null},"strokeColor":{"type":["Color"],"description":"<p>Stroke color of each rect.</p>\n","default":null},"strokeWidth":{"type":["number"],"description":"<p>Stroke width of each rect.</p>\n","default":null}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"ellipsis":{"type":["boolean"],"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n","default":true}}},"upperLabel":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"ellipsis":{"type":["boolean"],"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n","default":true}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>The color of a node. It use global palette <a href=\"#color\">option.color</a> by default.</p>\n","default":null}}}}}}}},"visualDimension":{"type":["number"],"description":"<p><code class=\"codespan\">treemap</code> is able to map any dimensions of data to visual.</p>\n<p>The value of <a href=\"#series-treemap.data\">series-treemap.data</a> can be an array. And each item of the array represents a &quot;dimension&quot;. <code class=\"codespan\">visualDimension</code> specifies the dimension on which visual mapping will be performed.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">visualDimension</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n","default":0},"visualMin":{"type":["number"],"description":"<p>The minimal value of current level. Auto-statistics by default.</p>\n<p>When <a href=\"#series-treemap.levels.colorMappingBy\">colorMappingBy</a> is set to <code class=\"codespan\">&#39;value&#39;</code>, you are able to specify extent manually for visual mapping by specifying <code class=\"codespan\">visualMin</code> or <code class=\"codespan\">visualMax</code>.</p>\n","default":null},"visualMax":{"type":["number"],"description":"<p>The maximal value of current level. Auto-statistics by default.</p>\n<p>When <a href=\"#series-treemap.levels.colorMappingBy\">colorMappingBy</a> is set to <code class=\"codespan\">&#39;value&#39;</code>, you are able to specify extent manually for visual mapping by specifying <code class=\"codespan\">visualMin</code> or <code class=\"codespan\">visualMax</code>.</p>\n","default":null},"colorAlpha":{"type":["Array"],"description":"<p>It indicates the range of tranparent rate (color alpha)  of the series. The range of values is 0 ~ 1.</p>\n<p>For example, <code class=\"codespan\">colorAlpha</code> can be <code class=\"codespan\">[0.3, 1]</code>.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">colorAlpha</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n","default":null},"colorSaturation":{"type":["number"],"description":"<p>It indicates the range of saturation (color alpha)  of the series. The range of values is 0 ~ 1.</p>\n<p>For example, <code class=\"codespan\">colorSaturation</code> can be <code class=\"codespan\">[0.3, 1]</code>.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">colorSaturation</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n","default":null},"colorMappingBy":{"type":["string"],"description":"<p>Specify the rule according to which each node obtain color from <a href=\"#series-treemap.levels.color\">color list</a>. Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;value&#39;</code>:</li>\n</ul>\n<p>Map <a href=\"#series-treemap.data.value\">series-treemap.data.value</a> to color.</p>\n<p>In this way, the color of each node indicate its value.</p>\n<p><a href=\"#series-treemap.levels.visualDimension\">visualDimension</a> can be used to specify which dimension of <a href=\"#series-treemap.data\">data</a> is used to perform visual mapping.</p>\n<ul>\n<li><code class=\"codespan\">&#39;index&#39;</code>:</li>\n</ul>\n<p>Map the <code class=\"codespan\">index</code> (ordinal number) of nodes to color. Namely, in a level, the first node is mapped to the first color of <a href=\"#series-treemap.levels.color\">color list</a>, and the second node gets the second color.</p>\n<p>In this way, adjacent nodes are distinguished by color.</p>\n<ul>\n<li><code class=\"codespan\">&#39;id&#39;</code>:</li>\n</ul>\n<p>Map <a href=\"#series-treemap.data.id\">series-treemap.data.id</a> to color.</p>\n<p>Since <code class=\"codespan\">id</code> is used to identify node, if user call <code class=\"codespan\">setOption</code> to modify the tree, each node will remain the original color before and after <code class=\"codespan\">setOption</code> called. See this <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=treemap-obama&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">colorMappingBy</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n","default":"'index'"},"visibleMin":{"type":["number"],"description":"<p>A node will not be shown when its area size is smaller than this value (unit: px square).</p>\n<p>In this way, tiny nodes will be hidden, otherwise they will huddle together. When user zoom the treemap, the area size will increase and the rectangle will be shown if the area size is larger than this threshold.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">visibleMin</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n","default":10},"childrenVisibleMin":{"type":["number"],"description":"<p>Children will not be shown when area size of a node is smaller than this value (unit: px square).</p>\n<p>This can hide the details of nodes when the rectangular area is not large enough. When users zoom nodes, the child node would show if the area is larger than this threshold.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">childrenVisibleMin</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n","default":null},"label":{"type":["Object"],"description":"<p><code class=\"codespan\">label</code> decribes the style of the label in each node.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">label</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n<p><br></p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"ellipsis":{"type":["boolean"],"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n","default":true}}},"upperLabel":{"type":["Object"],"description":"<p><code class=\"codespan\">upperLabel</code> is used to specify whether show label when the node has children. When <a href=\"#series-treemap.upperLabel.show\">upperLabel.show</a> is set as <code class=\"codespan\">true</code>, the feature that &quot;show parent label&quot; is enabled.</p>\n<p>The same as <a href=\"#series-treemap.label\">series-treemap.label</a>, the option <code class=\"codespan\">upperLabel</code> can be placed at the root of <a href=\"#series-treemap\">series-treemap</a> directly, or in <a href=\"#series-treemap.level\">series-treemap.level</a>, or in each item of <a href=\"#series-treemap.data\">series-treemap.data</a>.</p>\n<p>Specifically, <a href=\"#series-treemap.label\">series-treemap.label</a> specifies the style when a node is a leaf, while <code class=\"codespan\">upperLabel</code> specifies the style when a node has children, in which case the label is displayed in the inner top of the node.</p>\n<p>See:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=treemap-show-parent&edit=1&reset=1\" width=\"700\" height=\"500\"><iframe />\n\n\n\n\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">label</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n<p><br></p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number"],"description":"<p>Height of label area.</p>\n","default":20},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"ellipsis":{"type":["boolean"],"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n","default":true}}},"itemStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">itemStyle</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n<p><br></p>\n","properties":{"color":{"type":["Color"],"description":"<p>The color of a node. It use global palette <a href=\"#color\">option.color</a> by default.</p>\n","default":null},"colorAlpha":{"type":["number"],"description":"<p>The tranparent rate of a node, the range is between 0 ~ 1.</p>\n","default":null},"colorSaturation":{"type":["number"],"description":"<p>The color saturation of a node. The range is between 0 ~ 1.</p>\n","default":null},"borderWidth":{"type":["number"],"description":"<p>The border width of a node. There is no border when it is set as <code class=\"codespan\">0</code>.</p>\n<p>Tip, gaps between child nodes are specified by <a href=\"#series-treemap.levels.gapWidth\">gapWidth</a></p>\n","default":0},"gapWidth":{"type":["number"],"description":"<p>Gaps between child nodes.</p>\n","default":0},"borderColor":{"type":["Color"],"description":"<p>The border color and gap color of a node.</p>\n","default":"'#fff',"},"borderColorSaturation":{"type":["Color"],"description":"<p>The color saturation of a border or gap. The value range is between 0 ~ 1.</p>\n<p>Tips:</p>\n<p>When <code class=\"codespan\">borderColorSaturation</code> is set, the <code class=\"codespan\">borderColor</code> is disabled, and, instead, the final border color is calculated based on the color of this node (this color could be sepcified explicitly or inherited from its parent node) and mixing with <code class=\"codespan\">borderColorSaturation</code>.</p>\n<p>In this way, a effect can be implemented: different sections have different hue of gap color repectively, which makes users easy to distinguish both sections and levels.</p>\n<p><br></p>\n<p><strong>How to avoid confusion by setting border/gap of node</strong></p>\n<p>If all of the border/gaps are set with the same color, confusion might occur when rectangulars in different levels display at the same time.</p>\n<p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/treemap-borderColor&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>. Notice that the child rectangles in the red area are in the deeper level than rectangles that are saparated by white gap. So in the red area, basically we set gap color with red, and use <code class=\"codespan\">borderColorSaturation</code> to lift the saturation.</p>\n","default":null},"strokeColor":{"type":["Color"],"description":"<p>Stroke color of each rect.</p>\n","default":null},"strokeWidth":{"type":["number"],"description":"<p>Stroke width of each rect.</p>\n","default":null}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"ellipsis":{"type":["boolean"],"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n","default":true}}},"upperLabel":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"ellipsis":{"type":["boolean"],"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n","default":true}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>The color of a node. It use global palette <a href=\"#color\">option.color</a> by default.</p>\n","default":null}}}}},"breadcrumb":{"type":["Object"],"description":"<p>breadcrumb, showing the path of the current node.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the breadcrumb.</p>\n","default":true},"left":{"type":["string","number"],"description":"<p>Distance between asdf  component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'center'"},"top":{"type":["string","number"],"description":"<p>Distance between asdf  component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"right":{"type":["string","number"],"description":"<p>Distance between asdf  component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"<p>Distance between asdf  component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":0},"height":{"type":["number"],"description":"<p>The height of breadcrumb.</p>\n","default":22},"emptyItemWidth":{"type":["number"],"description":"<p>When is no content in breadcrumb, this minimal width need to be set up.</p>\n","default":25},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of , <code class=\"codespan\">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>boxplot color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"rgba(0,0,0,0.7)"},"borderColor":{"type":["Color"],"description":"<p>boxplot border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"rgba(255,255,255,0.7)"},"borderWidth":{"type":["number"],"description":"<p>boxplot border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"rgba(150,150,150,1)"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"textStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"#fff"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"emphasis":{"type":["*"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>boxplot color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"rgba(0,0,0,0.7)"},"borderColor":{"type":["Color"],"description":"<p>boxplot border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"rgba(255,255,255,0.7)"},"borderWidth":{"type":["number"],"description":"<p>boxplot border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"rgba(150,150,150,1)"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"textStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"#fff"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"data":{"type":["Array"],"description":"<p>the the data format of <a href=\"#series-treemap.data\">series-treemap.data</a> is a forest. For example:</p>\n<pre><code class=\"lang-javascript\">[ // Tips, the top level is an array.\n    {\n        value: 1212,\n        children: [\n            {\n                value: 2323,    // The value of this node, indicating the area size.\n                                // it could also be an array, such as [2323, 43, 55], in which the first item of array indicates the area size.\n                                // The other items of the array can be used for extra visual mapping. See details in series-treemp.levels.\n                id: &#39;someid-1&#39;, // id is not mandatory.\n                                // But if using API, id is used to locate node.\n                name: &#39;description of this node&#39;, // show the description text in rectangle.\n                children: [...],\n                label: {        // The label config of this node (if necessary).\n                    ...         // see series-treemap.label.\n                },\n                itemStyle: {    // the itemStyle of this node (if necessary).\n                    ...         // the see series-treemap.itemStyle.\n                }\n            },\n            {\n                value: 4545,\n                id: &#39;someid-2&#39;,\n                name: &#39;description of this node&#39;,\n                children: [\n                    {\n                        value: 5656,\n                        id: &#39;someid-3&#39;,\n                        name: &#39;description of this node&#39;,\n                        children: [...]\n                    },\n                    ...\n                ]\n            }\n        ]\n    },\n    {\n        value: [23, 59, 12]\n        // if there is no children, here could be nothing.\n    },\n    ...\n]\n</code></pre>\n","items":{"type":"Object","properties":{"value":{"type":["number","Array"],"description":"<p>The value of this node, indicating the area size.</p>\n<p>It could also be an array, such as [2323, 43, 55], in which the first item of array indicates the area size.</p>\n<p>The other items of the array can be used for extra visual mapping. See details in series-treemp.levels.</p>\n"},"id":{"type":["string"],"description":"<p><code class=\"codespan\">id</code> is not mandatory.\nBut if using API, id is used to locate node.</p>\n"},"name":{"type":["string"],"description":"<p>Show the description text in rectangle.</p>\n"},"visualDimension":{"type":["number"],"description":"<p><code class=\"codespan\">treemap</code> is able to map any dimensions of data to visual.</p>\n<p>The value of <a href=\"#series-treemap.data\">series-treemap.data</a> can be an array. And each item of the array represents a &quot;dimension&quot;. <code class=\"codespan\">visualDimension</code> specifies the dimension on which visual mapping will be performed.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">visualDimension</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n","default":0},"visualMin":{"type":["number"],"description":"<p>The minimal value of current level. Auto-statistics by default.</p>\n<p>When <a href=\"#series-treemap.levels.colorMappingBy\">colorMappingBy</a> is set to <code class=\"codespan\">&#39;value&#39;</code>, you are able to specify extent manually for visual mapping by specifying <code class=\"codespan\">visualMin</code> or <code class=\"codespan\">visualMax</code>.</p>\n","default":null},"visualMax":{"type":["number"],"description":"<p>The maximal value of current level. Auto-statistics by default.</p>\n<p>When <a href=\"#series-treemap.levels.colorMappingBy\">colorMappingBy</a> is set to <code class=\"codespan\">&#39;value&#39;</code>, you are able to specify extent manually for visual mapping by specifying <code class=\"codespan\">visualMin</code> or <code class=\"codespan\">visualMax</code>.</p>\n","default":null},"color":{"type":["Array"],"description":"<p>A color list for a level. Each node in the level will obtain a color from the color list (the rule see <a href=\"#series-treemap.levels.colorMappingBy\">colorMappingBy</a>). It is empty by default, which means the global color list will be used.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">color</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n"},"colorAlpha":{"type":["Array"],"description":"<p>It indicates the range of tranparent rate (color alpha) for nodes in a level . The range of values is 0 ~ 1.</p>\n<p>For example, <code class=\"codespan\">colorAlpha</code> can be <code class=\"codespan\">[0.3, 1]</code>.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">colorAlpha</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n","default":null},"colorSaturation":{"type":["number"],"description":"<p>It indicates the range of saturation (color alpha) for nodes in a level . The range of values is 0 ~ 1.</p>\n<p>For example, <code class=\"codespan\">colorSaturation</code> can be <code class=\"codespan\">[0.3, 1]</code>.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">colorSaturation</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n","default":null},"colorMappingBy":{"type":["string"],"description":"<p>Specify the rule according to which each node obtain color from <a href=\"#series-treemap.levels.color\">color list</a>. Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;value&#39;</code>:</li>\n</ul>\n<p>Map <a href=\"#series-treemap.data.value\">series-treemap.data.value</a> to color.</p>\n<p>In this way, the color of each node indicate its value.</p>\n<p><a href=\"#series-treemap.levels.visualDimension\">visualDimension</a> can be used to specify which dimension of <a href=\"#series-treemap.data\">data</a> is used to perform visual mapping.</p>\n<ul>\n<li><code class=\"codespan\">&#39;index&#39;</code>:</li>\n</ul>\n<p>Map the <code class=\"codespan\">index</code> (ordinal number) of nodes to color. Namely, in a level, the first node is mapped to the first color of <a href=\"#series-treemap.levels.color\">color list</a>, and the second node gets the second color.</p>\n<p>In this way, adjacent nodes are distinguished by color.</p>\n<ul>\n<li><code class=\"codespan\">&#39;id&#39;</code>:</li>\n</ul>\n<p>Map <a href=\"#series-treemap.data.id\">series-treemap.data.id</a> to color.</p>\n<p>Since <code class=\"codespan\">id</code> is used to identify node, if user call <code class=\"codespan\">setOption</code> to modify the tree, each node will remain the original color before and after <code class=\"codespan\">setOption</code> called. See this <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=treemap-obama&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">colorMappingBy</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n","default":"'index'"},"visibleMin":{"type":["number"],"description":"<p>A node will not be shown when its area size is smaller than this value (unit: px square).</p>\n<p>In this way, tiny nodes will be hidden, otherwise they will huddle together. When user zoom the treemap, the area size will increase and the rectangle will be shown if the area size is larger than this threshold.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">visibleMin</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n","default":10},"childrenVisibleMin":{"type":["number"],"description":"<p>Children will not be shown when area size of a node is smaller than this value (unit: px square).</p>\n<p>This can hide the details of nodes when the rectangular area is not large enough. When users zoom nodes, the child node would show if the area is larger than this threshold.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">childrenVisibleMin</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n","default":null},"label":{"type":["Object"],"description":"<p><code class=\"codespan\">label</code> decribes the style of the label in each node.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">label</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n<p><br></p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"ellipsis":{"type":["boolean"],"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n","default":true}}},"upperLabel":{"type":["Object"],"description":"<p><code class=\"codespan\">upperLabel</code> is used to specify whether show label when the node has children. When <a href=\"#series-treemap.upperLabel.show\">upperLabel.show</a> is set as <code class=\"codespan\">true</code>, the feature that &quot;show parent label&quot; is enabled.</p>\n<p>The same as <a href=\"#series-treemap.label\">series-treemap.label</a>, the option <code class=\"codespan\">upperLabel</code> can be placed at the root of <a href=\"#series-treemap\">series-treemap</a> directly, or in <a href=\"#series-treemap.level\">series-treemap.level</a>, or in each item of <a href=\"#series-treemap.data\">series-treemap.data</a>.</p>\n<p>Specifically, <a href=\"#series-treemap.label\">series-treemap.label</a> specifies the style when a node is a leaf, while <code class=\"codespan\">upperLabel</code> specifies the style when a node has children, in which case the label is displayed in the inner top of the node.</p>\n<p>See:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=treemap-show-parent&edit=1&reset=1\" width=\"700\" height=\"500\"><iframe />\n\n\n\n\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">label</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n<p><br></p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number"],"description":"<p>Height of label area.</p>\n","default":20},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"ellipsis":{"type":["boolean"],"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n","default":true}}},"itemStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code class=\"codespan\">itemStyle</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n<p><br></p>\n","properties":{"color":{"type":["Color"],"description":"<p>The color of a node. It use global palette <a href=\"#color\">option.color</a> by default.</p>\n","default":null},"colorAlpha":{"type":["number"],"description":"<p>The tranparent rate of a node, the range is between 0 ~ 1.</p>\n","default":null},"colorSaturation":{"type":["number"],"description":"<p>The color saturation of a node. The range is between 0 ~ 1.</p>\n","default":null},"borderWidth":{"type":["number"],"description":"<p>The border width of a node. There is no border when it is set as <code class=\"codespan\">0</code>.</p>\n<p>Tip, gaps between child nodes are specified by <a href=\"#series-treemap.levels.gapWidth\">gapWidth</a></p>\n","default":0},"gapWidth":{"type":["number"],"description":"<p>Gaps between child nodes.</p>\n","default":0},"borderColor":{"type":["Color"],"description":"<p>The border color and gap color of a node.</p>\n","default":"'#fff',"},"borderColorSaturation":{"type":["Color"],"description":"<p>The color saturation of a border or gap. The value range is between 0 ~ 1.</p>\n<p>Tips:</p>\n<p>When <code class=\"codespan\">borderColorSaturation</code> is set, the <code class=\"codespan\">borderColor</code> is disabled, and, instead, the final border color is calculated based on the color of this node (this color could be sepcified explicitly or inherited from its parent node) and mixing with <code class=\"codespan\">borderColorSaturation</code>.</p>\n<p>In this way, a effect can be implemented: different sections have different hue of gap color repectively, which makes users easy to distinguish both sections and levels.</p>\n<p><br></p>\n<p><strong>How to avoid confusion by setting border/gap of node</strong></p>\n<p>If all of the border/gaps are set with the same color, confusion might occur when rectangulars in different levels display at the same time.</p>\n<p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/treemap-borderColor&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>. Notice that the child rectangles in the red area are in the deeper level than rectangles that are saparated by white gap. So in the red area, basically we set gap color with red, and use <code class=\"codespan\">borderColorSaturation</code> to lift the saturation.</p>\n","default":null},"strokeColor":{"type":["Color"],"description":"<p>Stroke color of each rect.</p>\n","default":null},"strokeWidth":{"type":["number"],"description":"<p>Stroke width of each rect.</p>\n","default":null}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"ellipsis":{"type":["boolean"],"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n","default":true}}},"upperLabel":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"ellipsis":{"type":["boolean"],"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n","default":true}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>The color of a node. It use global palette <a href=\"#color\">option.color</a> by default.</p>\n","default":null}}}}},"link":{"type":["string"],"description":"<p>Enable hyperlink jump when clicking on node. It is avaliable when <a href=\"#series-treemap.nodeClick\">series-treemap.nodeClick</a> is <code class=\"codespan\">&#39;link&#39;</code>.</p>\n<p>See <a href=\"#series-treemap.data.target\">series-treemap.data.target</a>.</p>\n"},"target":{"type":["string"],"description":"<p>The same meaning as <code class=\"codespan\">target</code> in <code class=\"codespan\">html</code> <code class=\"codespan\">&lt;a&gt;</code> label, See <a href=\"#series-treemap.data.link\">series-treemap.data.link</a>. Option values are: <code class=\"codespan\">&#39;blank&#39;</code> or <code class=\"codespan\">&#39;self&#39;</code>.</p>\n","default":"'blank'"},"children":{"type":["Array"],"description":"<p>child nodes, recursive definition, configurations are the same as <a href=\"#series-treemap.data\">series-treemap.data</a>.</p>\n"},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1500},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"quinticInOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><a href=\"https://en.wikipedia.org/wiki/Pie_chart#Ring_chart_/_Sunburst_chart_/_Multilevel_pie_chart\" target=\"_blank\">Sunburst Chart</a> is composed of multiple pie charts. From the view of data structure, inner rings are the parent nodes of outer rings. Therefore, it can show the partial-overall relationship as <a href=\"#series-pie\">Pie</a> charts, and also level relation as <a href=\"#series-treemap\">Treemap</a> charts.</p>\n<p><strong>For example:</strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-monochrome&edit=1&reset=1\" width=\"700\" height=\"500\"><iframe />\n\n\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-drink&edit=1&reset=1\" width=\"700\" height=\"700\"><iframe />\n\n\n<p><strong>Data mining</strong></p>\n<p>Sunburst charts support data mining by default. That means, when a user clicks a sector, it will be used as root node, and there will be a circle in the center for return to parent node. If data mining is not needed, it can be disabled by <a href=\"#series-treemap.nodeClick\">series-sunburst.nodeClick</a>.</p>\n","properties":{"type":{"type":["string"],"description":"","default":"'sunburst'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"center":{"type":["Array"],"description":"<p>Center position of Sunburst chart, the first of which is the horizontal position, and the second is the vertical position.</p>\n<p>Percentage is supported. When set in percentage, the item is relative to the container width, and the second item to the height.</p>\n<p><strong>Example: </strong></p>\n<pre><code>// Set to absolute pixel values\ncenter: [400, 300]\n// Set to relative percent\ncenter: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>","default":"['50%', '50%']"},"radius":{"type":["number","string","Array"],"description":"<p>Radius of Sunburst chart. Value can be:</p>\n<ul>\n<li><code class=\"codespan\">number</code>: Specify outside radius directly.</li>\n<li><p><code class=\"codespan\">string</code>: For example, <code class=\"codespan\">&#39;20%&#39;</code>, means that the outside radius is 20% of the viewport size (the little one between width and height of the chart container).</p>\n</li>\n<li><p><code class=\"codespan\">Array.&lt;number|string&gt;</code>: The first item specifies the inside radius, and the second item specifies the outside radius. Each item follows the definitions above.</p>\n</li>\n</ul>\n","default":"[0, '75%']"},"data":{"type":["Array"],"description":"<p>The data structure of <a href=\"#series-sunburst.data\">series-sunburst.data</a> is like tree. For example:</p>\n<pre><code class=\"lang-js\">[{\n    name: &#39;parent1&#39;,\n    value: 10,          // value of parent node can be left unset, and sum of\n                        // children values will be used in this case.\n                        // If is set, and is larger than sum of children nodes,\n                        // the reset can be used for other parts in parent.\n    children: [{\n        value: 5,\n        name: &#39;child1&#39;,\n        children: [{\n            value: 2,\n            name: &#39;grandchild1&#39;,\n            itemStyle: {\n                // every data can have its own itemStyle,\n                // which will overwrites series.itemStyle and level.itemStyle\n            },\n            label: {\n                // label style, the same to above\n            }\n        }]\n    }, {\n        value: 3,\n        name: &#39;child2&#39;\n    }],\n    itemStyle: {\n        // itemStyle of parent1, which will not be inherited for children\n    },\n    label: {\n        // label of parent1, which will not be inherited for children\n    }\n}, {\n    name: &#39;parent2&#39;,\n    value: 4\n}]\n</code></pre>\n","items":{"type":"Object","properties":{"value":{"type":["number"],"description":"<p>Value for each item. If contains children, value can be left unset, and sum of children values will be used in this case.</p>\n"},"name":{"type":["string"],"description":"<p>Name displayed in each sector.</p>\n"},"link":{"type":["string"],"description":"<p>Link address that redirects to when this sector is clicked. Only useful when <a href=\"#series-treemap.nodeClick\">series-sunburst.nodeClick</a> is set to be <code class=\"codespan\">&#39;link&#39;</code>.</p>\n<p>See <a href=\"#series-sunburst.data.target\">series-sunburst.data.target</a>.</p>\n"},"target":{"type":["string"],"description":"<p>Like <code class=\"codespan\">target</code> attribute of HTML <code class=\"codespan\">&lt;a&gt;</code>, which can either be <code class=\"codespan\">&#39;blank&#39;</code> or <code class=\"codespan\">&#39;self&#39;</code>. See <a href=\"#series-sunburst.data.link\">series-sunburst.data.link</a>.</p>\n","default":"'blank'"},"label":{"type":["Object"],"description":"<p><code class=\"codespan\">label</code> sets the text style for every sectors.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.label\">series.data.label</a> &gt; <a href=\"#series-sunburst.levels.label\">series.levels.label</a> &gt; <a href=\"#series-sunburst.label\">series.label</a>.</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"rotate":{"type":["string","number"],"description":"<p>If it is <code class=\"codespan\">number</code> type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.</p>\n<p>Besides, it can be string <code class=\"codespan\">&#39;radial&#39;</code>, standing for radial rotation; or <code class=\"codespan\">&#39;tangential&#39;</code>, standing for tangential rotation.</p>\n<p>By default, it is <code class=\"codespan\">&#39;radial&#39;</code>. If no rotation is wanted, it can be set to <code class=\"codespan\">0</code>.</p>\n<p>The following example shows different <code class=\"codespan\">rotate</code> settings:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'radial'"},"align":{"type":["string"],"description":"<p>Align of text, which can be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>. Note that <code class=\"codespan\">&#39;left&#39;</code> stands for inner side, and <code class=\"codespan\">&#39;right&#39;</code> stands for outer side.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'center'"},"minAngle":{"type":["number"],"description":"<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n","default":null},"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of Sunburst sectors.</p>\n<p>Style can be set in <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> for sectors of this series, or <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> for the whole level, or<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> for single sector. If <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> is defined, it will cover the setting of <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> and <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> &gt; <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> &gt; <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>.</strong></p>\n<p>In ECharts, <em>emphasis</em> is for styles when mouse hovers. For Sunburst charts, there are two extra states: <em>highlight</em> for highlighting items that relates to the emphasized one, and <em>downplay</em> for others when emphasizing an item. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"'white'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":1}}},"emphasis":{"type":["Object"],"description":"<p>Item style when mouse is hovering. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"label":{"type":["Object"],"description":"<p><code class=\"codespan\">label</code> sets the text style for every sectors.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.label\">series.data.label</a> &gt; <a href=\"#series-sunburst.levels.label\">series.levels.label</a> &gt; <a href=\"#series-sunburst.label\">series.label</a>.</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"rotate":{"type":["string","number"],"description":"<p>If it is <code class=\"codespan\">number</code> type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.</p>\n<p>Besides, it can be string <code class=\"codespan\">&#39;radial&#39;</code>, standing for radial rotation; or <code class=\"codespan\">&#39;tangential&#39;</code>, standing for tangential rotation.</p>\n<p>By default, it is <code class=\"codespan\">&#39;radial&#39;</code>. If no rotation is wanted, it can be set to <code class=\"codespan\">0</code>.</p>\n<p>The following example shows different <code class=\"codespan\">rotate</code> settings:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'radial'"},"align":{"type":["string"],"description":"<p>Align of text, which can be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>. Note that <code class=\"codespan\">&#39;left&#39;</code> stands for inner side, and <code class=\"codespan\">&#39;right&#39;</code> stands for outer side.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'center'"},"minAngle":{"type":["number"],"description":"<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n","default":null},"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of Sunburst sectors.</p>\n<p>Style can be set in <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> for sectors of this series, or <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> for the whole level, or<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> for single sector. If <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> is defined, it will cover the setting of <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> and <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> &gt; <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> &gt; <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>.</strong></p>\n<p>In ECharts, <em>emphasis</em> is for styles when mouse hovers. For Sunburst charts, there are two extra states: <em>highlight</em> for highlighting items that relates to the emphasized one, and <em>downplay</em> for others when emphasizing an item. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"'white'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":1}}}}},"highlight":{"type":["Object"],"description":"<p>Item style when mouse is hovering related items. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"label":{"type":["Object"],"description":"<p><code class=\"codespan\">label</code> sets the text style for every sectors.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.label\">series.data.label</a> &gt; <a href=\"#series-sunburst.levels.label\">series.levels.label</a> &gt; <a href=\"#series-sunburst.label\">series.label</a>.</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"rotate":{"type":["string","number"],"description":"<p>If it is <code class=\"codespan\">number</code> type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.</p>\n<p>Besides, it can be string <code class=\"codespan\">&#39;radial&#39;</code>, standing for radial rotation; or <code class=\"codespan\">&#39;tangential&#39;</code>, standing for tangential rotation.</p>\n<p>By default, it is <code class=\"codespan\">&#39;radial&#39;</code>. If no rotation is wanted, it can be set to <code class=\"codespan\">0</code>.</p>\n<p>The following example shows different <code class=\"codespan\">rotate</code> settings:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'radial'"},"align":{"type":["string"],"description":"<p>Align of text, which can be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>. Note that <code class=\"codespan\">&#39;left&#39;</code> stands for inner side, and <code class=\"codespan\">&#39;right&#39;</code> stands for outer side.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'center'"},"minAngle":{"type":["number"],"description":"<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n","default":null},"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of Sunburst sectors.</p>\n<p>Style can be set in <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> for sectors of this series, or <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> for the whole level, or<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> for single sector. If <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> is defined, it will cover the setting of <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> and <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> &gt; <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> &gt; <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>.</strong></p>\n<p>In ECharts, <em>emphasis</em> is for styles when mouse hovers. For Sunburst charts, there are two extra states: <em>highlight</em> for highlighting items that relates to the emphasized one, and <em>downplay</em> for others when emphasizing an item. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"'white'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":1}}}}},"downplay":{"type":["Object"],"description":"<p>Item style when mouse is hovering unrelated items. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"label":{"type":["Object"],"description":"<p><code class=\"codespan\">label</code> sets the text style for every sectors.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.label\">series.data.label</a> &gt; <a href=\"#series-sunburst.levels.label\">series.levels.label</a> &gt; <a href=\"#series-sunburst.label\">series.label</a>.</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"rotate":{"type":["string","number"],"description":"<p>If it is <code class=\"codespan\">number</code> type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.</p>\n<p>Besides, it can be string <code class=\"codespan\">&#39;radial&#39;</code>, standing for radial rotation; or <code class=\"codespan\">&#39;tangential&#39;</code>, standing for tangential rotation.</p>\n<p>By default, it is <code class=\"codespan\">&#39;radial&#39;</code>. If no rotation is wanted, it can be set to <code class=\"codespan\">0</code>.</p>\n<p>The following example shows different <code class=\"codespan\">rotate</code> settings:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'radial'"},"align":{"type":["string"],"description":"<p>Align of text, which can be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>. Note that <code class=\"codespan\">&#39;left&#39;</code> stands for inner side, and <code class=\"codespan\">&#39;right&#39;</code> stands for outer side.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'center'"},"minAngle":{"type":["number"],"description":"<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n","default":null},"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of Sunburst sectors.</p>\n<p>Style can be set in <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> for sectors of this series, or <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> for the whole level, or<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> for single sector. If <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> is defined, it will cover the setting of <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> and <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> &gt; <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> &gt; <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>.</strong></p>\n<p>In ECharts, <em>emphasis</em> is for styles when mouse hovers. For Sunburst charts, there are two extra states: <em>highlight</em> for highlighting items that relates to the emphasized one, and <em>downplay</em> for others when emphasizing an item. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"'white'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":1}}}}},"children":{"type":["Array"],"description":"<p>Children nodes, which is recursively defined. In the same format to <a href=\"#series-sunburst.data\">series-sunburst.data</a>.</p>\n"}}}},"label":{"type":["Object"],"description":"<p><code class=\"codespan\">label</code> sets the text style for every sectors.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.label\">series.data.label</a> &gt; <a href=\"#series-sunburst.levels.label\">series.levels.label</a> &gt; <a href=\"#series-sunburst.label\">series.label</a>.</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"rotate":{"type":["string","number"],"description":"<p>If it is <code class=\"codespan\">number</code> type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.</p>\n<p>Besides, it can be string <code class=\"codespan\">&#39;radial&#39;</code>, standing for radial rotation; or <code class=\"codespan\">&#39;tangential&#39;</code>, standing for tangential rotation.</p>\n<p>By default, it is <code class=\"codespan\">&#39;radial&#39;</code>. If no rotation is wanted, it can be set to <code class=\"codespan\">0</code>.</p>\n<p>The following example shows different <code class=\"codespan\">rotate</code> settings:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'radial'"},"align":{"type":["string"],"description":"<p>Align of text, which can be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>. Note that <code class=\"codespan\">&#39;left&#39;</code> stands for inner side, and <code class=\"codespan\">&#39;right&#39;</code> stands for outer side.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'center'"},"minAngle":{"type":["number"],"description":"<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n","default":null},"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of Sunburst sectors.</p>\n<p>Style can be set in <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> for sectors of this series, or <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> for the whole level, or<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> for single sector. If <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> is defined, it will cover the setting of <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> and <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> &gt; <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> &gt; <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>.</strong></p>\n<p>In ECharts, <em>emphasis</em> is for styles when mouse hovers. For Sunburst charts, there are two extra states: <em>highlight</em> for highlighting items that relates to the emphasized one, and <em>downplay</em> for others when emphasizing an item. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"'white'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":1}}},"highlightPolicy":{"type":["string"],"description":"<p>When mouse hovers a sector, the sector is emphasized. <strong>If <code class=\"codespan\">highlightPolicy</code> is set to be <code class=\"codespan\">&#39;descendant&#39;</code>, then the sector and its descendant will be <em>highlighted</em>, and others will be <em>downplayed</em>. If <code class=\"codespan\">highlightPolicy</code> is <code class=\"codespan\">&#39;ancestor&#39;</code>, then the sector and its ancestors will be highlighted. If it is set to be <code class=\"codespan\">&#39;self&#39;</code>, then the sector will be highlighted and others downplayed. If it is set to be <code class=\"codespan\">&#39;none&#39;</code>, then others will not be downplayed.</strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-highlight-descendant&edit=1&reset=1\" width=\"700\" height=\"350\"><iframe />\n\n\n<p>The <code class=\"codespan\">highlightPolicy</code> value above is the default value <code class=\"codespan\">&#39;descendant&#39;</code>. We use <code class=\"codespan\">dispatchAction</code> to highlight certain sector. Target sector will use the style of <code class=\"codespan\">emphasis</code>, and related sectors decided by <code class=\"codespan\">highlightPolicy</code> uses the style of <code class=\"codespan\">highlight</code>, and others use <code class=\"codespan\">downplay</code>.</p>\n<pre><code class=\"lang-js\">itemStyle: {\n    color: &#39;yellow&#39;,\n    borderWidth: 2,\n    emphasis: {\n        color: &#39;red&#39;\n    },\n    highlight: {\n        color: &#39;orange&#39;\n    },\n    downplay: {\n        color: &#39;#ccc&#39;\n    }\n}\n</code></pre>\n<p>If <code class=\"codespan\">highlightPolicy</code> is set to be <code class=\"codespan\">&#39;ancestor&#39;</code>, then the result looks like:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-highlight-ancestor&edit=1&reset=1\" width=\"700\" height=\"350\"><iframe />\n\n\n\n","default":"'descendant'"},"nodeClick":{"type":["boolean","string"],"description":"<p>The action of clicking a sector, which can be:</p>\n<ul>\n<li><code class=\"codespan\">false</code>: nothing happens.</li>\n<li><code class=\"codespan\">&#39;rootToNode&#39;</code>: use the clicked sector as root.</li>\n<li><code class=\"codespan\">&#39;link&#39;</code>:if <a href=\"#series-sunburst.data.link\">link</a> is set, the page will redirect to it.</li>\n</ul>\n","default":"'rootToNode'"},"sort":{"type":["string","Function"],"description":"<p>Sorting method that sectors use based on <a href=\"#series-sunburst.data.value\"><code class=\"codespan\">value</code></a>, which is the sum of children when not set. The default value <code class=\"codespan\">&#39;desc&#39;</code> states for descending order, while it can also be set to be <code class=\"codespan\">&#39;asc&#39;</code> for ascending order, or <code class=\"codespan\">null</code> for not sorting, or callback function like:</p>\n<pre><code class=\"lang-js\">function(nodeA, nodeB) {\n    return nodeA.getValue() - nodeB.getValue();\n}\n</code></pre>\n","default":"'desc'"},"renderLabelForZeroData":{"type":["boolean"],"description":"<p>If there is no <code class=\"codespan\">name</code>, whether need to render it.</p>\n","default":false},"emphasis":{"type":["Object"],"description":"<p>Item style when mouse is hovering. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"label":{"type":["Object"],"description":"<p><code class=\"codespan\">label</code> sets the text style for every sectors.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.label\">series.data.label</a> &gt; <a href=\"#series-sunburst.levels.label\">series.levels.label</a> &gt; <a href=\"#series-sunburst.label\">series.label</a>.</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"rotate":{"type":["string","number"],"description":"<p>If it is <code class=\"codespan\">number</code> type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.</p>\n<p>Besides, it can be string <code class=\"codespan\">&#39;radial&#39;</code>, standing for radial rotation; or <code class=\"codespan\">&#39;tangential&#39;</code>, standing for tangential rotation.</p>\n<p>By default, it is <code class=\"codespan\">&#39;radial&#39;</code>. If no rotation is wanted, it can be set to <code class=\"codespan\">0</code>.</p>\n<p>The following example shows different <code class=\"codespan\">rotate</code> settings:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'radial'"},"align":{"type":["string"],"description":"<p>Align of text, which can be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>. Note that <code class=\"codespan\">&#39;left&#39;</code> stands for inner side, and <code class=\"codespan\">&#39;right&#39;</code> stands for outer side.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'center'"},"minAngle":{"type":["number"],"description":"<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n","default":null},"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of Sunburst sectors.</p>\n<p>Style can be set in <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> for sectors of this series, or <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> for the whole level, or<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> for single sector. If <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> is defined, it will cover the setting of <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> and <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> &gt; <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> &gt; <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>.</strong></p>\n<p>In ECharts, <em>emphasis</em> is for styles when mouse hovers. For Sunburst charts, there are two extra states: <em>highlight</em> for highlighting items that relates to the emphasized one, and <em>downplay</em> for others when emphasizing an item. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"'white'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":1}}}}},"highlight":{"type":["Object"],"description":"<p>Item style when mouse is hovering related items. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"label":{"type":["Object"],"description":"<p><code class=\"codespan\">label</code> sets the text style for every sectors.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.label\">series.data.label</a> &gt; <a href=\"#series-sunburst.levels.label\">series.levels.label</a> &gt; <a href=\"#series-sunburst.label\">series.label</a>.</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"rotate":{"type":["string","number"],"description":"<p>If it is <code class=\"codespan\">number</code> type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.</p>\n<p>Besides, it can be string <code class=\"codespan\">&#39;radial&#39;</code>, standing for radial rotation; or <code class=\"codespan\">&#39;tangential&#39;</code>, standing for tangential rotation.</p>\n<p>By default, it is <code class=\"codespan\">&#39;radial&#39;</code>. If no rotation is wanted, it can be set to <code class=\"codespan\">0</code>.</p>\n<p>The following example shows different <code class=\"codespan\">rotate</code> settings:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'radial'"},"align":{"type":["string"],"description":"<p>Align of text, which can be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>. Note that <code class=\"codespan\">&#39;left&#39;</code> stands for inner side, and <code class=\"codespan\">&#39;right&#39;</code> stands for outer side.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'center'"},"minAngle":{"type":["number"],"description":"<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n","default":null},"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of Sunburst sectors.</p>\n<p>Style can be set in <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> for sectors of this series, or <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> for the whole level, or<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> for single sector. If <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> is defined, it will cover the setting of <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> and <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> &gt; <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> &gt; <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>.</strong></p>\n<p>In ECharts, <em>emphasis</em> is for styles when mouse hovers. For Sunburst charts, there are two extra states: <em>highlight</em> for highlighting items that relates to the emphasized one, and <em>downplay</em> for others when emphasizing an item. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"'white'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":1}}}}},"downplay":{"type":["Object"],"description":"<p>Item style when mouse is hovering unrelated items. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"label":{"type":["Object"],"description":"<p><code class=\"codespan\">label</code> sets the text style for every sectors.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.label\">series.data.label</a> &gt; <a href=\"#series-sunburst.levels.label\">series.levels.label</a> &gt; <a href=\"#series-sunburst.label\">series.label</a>.</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"rotate":{"type":["string","number"],"description":"<p>If it is <code class=\"codespan\">number</code> type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.</p>\n<p>Besides, it can be string <code class=\"codespan\">&#39;radial&#39;</code>, standing for radial rotation; or <code class=\"codespan\">&#39;tangential&#39;</code>, standing for tangential rotation.</p>\n<p>By default, it is <code class=\"codespan\">&#39;radial&#39;</code>. If no rotation is wanted, it can be set to <code class=\"codespan\">0</code>.</p>\n<p>The following example shows different <code class=\"codespan\">rotate</code> settings:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'radial'"},"align":{"type":["string"],"description":"<p>Align of text, which can be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>. Note that <code class=\"codespan\">&#39;left&#39;</code> stands for inner side, and <code class=\"codespan\">&#39;right&#39;</code> stands for outer side.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'center'"},"minAngle":{"type":["number"],"description":"<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n","default":null},"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of Sunburst sectors.</p>\n<p>Style can be set in <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> for sectors of this series, or <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> for the whole level, or<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> for single sector. If <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> is defined, it will cover the setting of <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> and <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> &gt; <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> &gt; <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>.</strong></p>\n<p>In ECharts, <em>emphasis</em> is for styles when mouse hovers. For Sunburst charts, there are two extra states: <em>highlight</em> for highlighting items that relates to the emphasized one, and <em>downplay</em> for others when emphasizing an item. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"'white'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":1}}}}},"levels":{"type":["Array"],"description":"<p><strong>Multiple levels</strong></p>\n<p>Sunburst chart has a leveled structure. To make it convenient, we provide a <code class=\"codespan\">levels</code> option, which is an array. The first element of it is for returning to parent node when data mining. The following elements are for levels from center to outside.</p>\n<p>For example, if we don&#39;t want the data mining, and want to set the most inside sector to be red, and text to be blue, we can set the option like:</p>\n<pre><code class=\"lang-js\">series: {\n    // ...\n    levels: [\n        {\n            // Blank setting for data mining\n        },\n        {\n            // The most inside level\n            itemStyle: {\n                color: &#39;red&#39;\n            },\n            label: {\n                color: &#39;blue&#39;\n            }\n        },\n        {\n            // The second level\n        }\n    ]\n}\n</code></pre>\n","items":{"type":"Object","properties":{"label":{"type":["Object"],"description":"<p><code class=\"codespan\">label</code> sets the text style for every sectors.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.label\">series.data.label</a> &gt; <a href=\"#series-sunburst.levels.label\">series.levels.label</a> &gt; <a href=\"#series-sunburst.label\">series.label</a>.</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"rotate":{"type":["string","number"],"description":"<p>If it is <code class=\"codespan\">number</code> type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.</p>\n<p>Besides, it can be string <code class=\"codespan\">&#39;radial&#39;</code>, standing for radial rotation; or <code class=\"codespan\">&#39;tangential&#39;</code>, standing for tangential rotation.</p>\n<p>By default, it is <code class=\"codespan\">&#39;radial&#39;</code>. If no rotation is wanted, it can be set to <code class=\"codespan\">0</code>.</p>\n<p>The following example shows different <code class=\"codespan\">rotate</code> settings:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'radial'"},"align":{"type":["string"],"description":"<p>Align of text, which can be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>. Note that <code class=\"codespan\">&#39;left&#39;</code> stands for inner side, and <code class=\"codespan\">&#39;right&#39;</code> stands for outer side.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'center'"},"minAngle":{"type":["number"],"description":"<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n","default":null},"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of Sunburst sectors.</p>\n<p>Style can be set in <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> for sectors of this series, or <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> for the whole level, or<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> for single sector. If <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> is defined, it will cover the setting of <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> and <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> &gt; <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> &gt; <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>.</strong></p>\n<p>In ECharts, <em>emphasis</em> is for styles when mouse hovers. For Sunburst charts, there are two extra states: <em>highlight</em> for highlighting items that relates to the emphasized one, and <em>downplay</em> for others when emphasizing an item. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"'white'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":1}}},"emphasis":{"type":["Object"],"description":"<p>Item style when mouse is hovering. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"label":{"type":["Object"],"description":"<p><code class=\"codespan\">label</code> sets the text style for every sectors.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.label\">series.data.label</a> &gt; <a href=\"#series-sunburst.levels.label\">series.levels.label</a> &gt; <a href=\"#series-sunburst.label\">series.label</a>.</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"rotate":{"type":["string","number"],"description":"<p>If it is <code class=\"codespan\">number</code> type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.</p>\n<p>Besides, it can be string <code class=\"codespan\">&#39;radial&#39;</code>, standing for radial rotation; or <code class=\"codespan\">&#39;tangential&#39;</code>, standing for tangential rotation.</p>\n<p>By default, it is <code class=\"codespan\">&#39;radial&#39;</code>. If no rotation is wanted, it can be set to <code class=\"codespan\">0</code>.</p>\n<p>The following example shows different <code class=\"codespan\">rotate</code> settings:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'radial'"},"align":{"type":["string"],"description":"<p>Align of text, which can be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>. Note that <code class=\"codespan\">&#39;left&#39;</code> stands for inner side, and <code class=\"codespan\">&#39;right&#39;</code> stands for outer side.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'center'"},"minAngle":{"type":["number"],"description":"<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n","default":null},"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of Sunburst sectors.</p>\n<p>Style can be set in <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> for sectors of this series, or <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> for the whole level, or<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> for single sector. If <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> is defined, it will cover the setting of <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> and <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> &gt; <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> &gt; <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>.</strong></p>\n<p>In ECharts, <em>emphasis</em> is for styles when mouse hovers. For Sunburst charts, there are two extra states: <em>highlight</em> for highlighting items that relates to the emphasized one, and <em>downplay</em> for others when emphasizing an item. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"'white'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":1}}}}},"highlight":{"type":["Object"],"description":"<p>Item style when mouse is hovering related items. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"label":{"type":["Object"],"description":"<p><code class=\"codespan\">label</code> sets the text style for every sectors.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.label\">series.data.label</a> &gt; <a href=\"#series-sunburst.levels.label\">series.levels.label</a> &gt; <a href=\"#series-sunburst.label\">series.label</a>.</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"rotate":{"type":["string","number"],"description":"<p>If it is <code class=\"codespan\">number</code> type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.</p>\n<p>Besides, it can be string <code class=\"codespan\">&#39;radial&#39;</code>, standing for radial rotation; or <code class=\"codespan\">&#39;tangential&#39;</code>, standing for tangential rotation.</p>\n<p>By default, it is <code class=\"codespan\">&#39;radial&#39;</code>. If no rotation is wanted, it can be set to <code class=\"codespan\">0</code>.</p>\n<p>The following example shows different <code class=\"codespan\">rotate</code> settings:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'radial'"},"align":{"type":["string"],"description":"<p>Align of text, which can be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>. Note that <code class=\"codespan\">&#39;left&#39;</code> stands for inner side, and <code class=\"codespan\">&#39;right&#39;</code> stands for outer side.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'center'"},"minAngle":{"type":["number"],"description":"<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n","default":null},"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of Sunburst sectors.</p>\n<p>Style can be set in <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> for sectors of this series, or <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> for the whole level, or<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> for single sector. If <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> is defined, it will cover the setting of <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> and <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> &gt; <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> &gt; <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>.</strong></p>\n<p>In ECharts, <em>emphasis</em> is for styles when mouse hovers. For Sunburst charts, there are two extra states: <em>highlight</em> for highlighting items that relates to the emphasized one, and <em>downplay</em> for others when emphasizing an item. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"'white'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":1}}}}},"downplay":{"type":["Object"],"description":"<p>Item style when mouse is hovering unrelated items. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"label":{"type":["Object"],"description":"<p><code class=\"codespan\">label</code> sets the text style for every sectors.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.label\">series.data.label</a> &gt; <a href=\"#series-sunburst.levels.label\">series.levels.label</a> &gt; <a href=\"#series-sunburst.label\">series.label</a>.</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"rotate":{"type":["string","number"],"description":"<p>If it is <code class=\"codespan\">number</code> type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.</p>\n<p>Besides, it can be string <code class=\"codespan\">&#39;radial&#39;</code>, standing for radial rotation; or <code class=\"codespan\">&#39;tangential&#39;</code>, standing for tangential rotation.</p>\n<p>By default, it is <code class=\"codespan\">&#39;radial&#39;</code>. If no rotation is wanted, it can be set to <code class=\"codespan\">0</code>.</p>\n<p>The following example shows different <code class=\"codespan\">rotate</code> settings:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'radial'"},"align":{"type":["string"],"description":"<p>Align of text, which can be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>. Note that <code class=\"codespan\">&#39;left&#39;</code> stands for inner side, and <code class=\"codespan\">&#39;right&#39;</code> stands for outer side.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n","default":"'center'"},"minAngle":{"type":["number"],"description":"<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n","default":null},"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of Sunburst sectors.</p>\n<p>Style can be set in <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> for sectors of this series, or <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> for the whole level, or<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> for single sector. If <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> is defined, it will cover the setting of <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> and <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> &gt; <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> &gt; <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>.</strong></p>\n<p>In ECharts, <em>emphasis</em> is for styles when mouse hovers. For Sunburst charts, there are two extra states: <em>highlight</em> for highlighting items that relates to the emphasized one, and <em>downplay</em> for others when emphasizing an item. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"'white'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":1}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":500},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},{"type":["Object"],"description":"<p><a href=\"https://en.wikipedia.org/wiki/Box_plot\" target=\"_blank\">Boxplot</a> is a convenient way of graphically depicting groups of numerical data through their quartiles.</p>\n<p><strong>Example:</strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=boxplot-light-velocity&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n<p><br>\nMultiple <code class=\"codespan\">series</code> can be displayed in the same coordinate system. Please refer to <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=boxplot-multi&amp;edit=1&amp;reset=1\" target=\"_blank\">this example</a>.</p>\n<p><br>\n<br></p>\n","properties":{"type":{"type":["string"],"description":"","default":"'boxplot'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;cartesian2d&#39;</code></p>\n<p>  Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-cartesian2d.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-cartesian2d.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n","default":"'cartesian2d'"},"xAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#xAxis\">x axis</a> to combine with, which is  useful for multiple x axes in one chart.</p>\n","default":0},"yAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#yAxis\">y axis</a> to combine with, which is  useful for multiple y axes in one chart.</p>\n","default":0},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"legendHoverLink":{"type":["boolean"],"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n","default":true},"hoverAnimation":{"type":["boolean"],"description":"<p>Whether to enable the animation when hovering on box.</p>\n","default":true},"layout":{"type":["string"],"description":"<p>Layout methods, whose optional values are:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;horizontal&#39;</code>: horizontally layout all boxes.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;vertical&#39;</code>: vertically layout all boxes.</p>\n</li>\n</ul>\n<p>The default value is decided by:</p>\n<ul>\n<li>if there is a <code class=\"codespan\">category</code> axis:<ul>\n<li>if it is horizontal, use <code class=\"codespan\">&#39;horizontal&#39;</code>;</li>\n<li>otherwise use <code class=\"codespan\">&#39;vertical&#39;</code>;</li>\n</ul>\n</li>\n<li>otherwise use <code class=\"codespan\">&#39;horizontal&#39;</code>.</li>\n</ul>\n","default":null},"boxWidth":{"type":["Array"],"description":"<p>Up and bottom boundary of box width. The array is in the form of <code class=\"codespan\">[min, max]</code>.</p>\n<p>It could be absolute value in pixel, such as <code class=\"codespan\">[7, 50]</code>, or percentage, such as <code class=\"codespan\">[&#39;40%&#39;, &#39;90%&#39;]</code>. The percentage means the percentage to the maximum possible width.</p>\n","default":"[7, 50]"},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>boxplot color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#fff"},"borderColor":{"type":["Color"],"description":"<p>boxplot border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p>boxplot border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>boxplot color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#fff"},"borderColor":{"type":["Color"],"description":"<p>boxplot border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p>boxplot border width. No border when it is set to be 0.</p>\n","default":2},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":5},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"rgba(0,0,0,0.4)"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":2},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":2},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"dimensions":{"type":["Array"],"description":"<p><code class=\"codespan\">dimensions</code> can be used to define dimension info for <code class=\"codespan\">series.data</code> or <code class=\"codespan\">dataset.source</code>.</p>\n<p>Notice: if <a href=\"#dataset\">dataset</a> is used, we can provide dimension names in the first column/row of <a href=\"#dataset.source\">dataset.source</a>, and not need to specify <code class=\"codespan\">dimensions</code> here. But if <code class=\"codespan\">dimensions</code> is specified here, echarts will not retrieve dimension names from the first row/column of <code class=\"codespan\">dataset.source</code> any more.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\n    ]\n}\n</code></pre>\n<p>Each data item of <code class=\"codespan\">dimensions</code> can be:</p>\n<ul>\n<li><code class=\"codespan\">string</code>, for example, <code class=\"codespan\">&#39;someName&#39;</code>, which equals to <code class=\"codespan\">{name: &#39;someName&#39;}</code>.</li>\n<li><code class=\"codespan\">Object</code>, where the attributes can be:<ul>\n<li>name: <code class=\"codespan\">string</code>.</li>\n<li>type: <code class=\"codespan\">string</code>, supports:<ul>\n<li><code class=\"codespan\">number</code></li>\n<li><code class=\"codespan\">float</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array\" target=\"_blank\">Float64Array</a></li>\n<li><code class=\"codespan\">int</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array\" target=\"_blank\">Int32Array</a></li>\n<li><code class=\"codespan\">ordinal</code>, discrete value, which represents string generally.</li>\n<li><code class=\"codespan\">time</code>, time value, see <a href=\"#series.data\">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code class=\"codespan\">string</code>, generally used in tooltip for dimension display. If not specified, use <code class=\"codespan\">name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code class=\"codespan\">dimensions</code> is specified, the default <code class=\"codespan\">tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code class=\"codespan\">tooltip</code> will displayed only value horizontally.</p>\n"},"encode":{"type":["Object"],"description":"<p>Define what is encoded to for each dimension of <code class=\"codespan\">data</code>. For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n</code></pre>\n<p>When <a href=\"#series.dimensions\">dimensions</a> is used to defined name for a certain dimension, <code class=\"codespan\">encode</code> can refer the name directly. For example:</p>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<p>The basic structure of <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code> or some special reserved names like &quot;tooltip&quot;, &quot;itemName&quot; etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code class=\"codespan\">encode</code> listed as follows:</p>\n<pre><code class=\"lang-js\">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension &quot;product&quot; and &quot;score&quot; in the tooltip.\n    tooltip: [&#39;product&#39;, &#39;score&#39;]\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // &#39;pie&#39;, &#39;funnel&#39;, where data item name can be displayed in legend.\n    itemName: 3\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension &quot;score&quot; to the X axis.\n    x: [1, 5, &#39;score&#39;],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like &#39;pie&#39;, &#39;funnel&#39; etc.:\nencode: {\n    value: 3\n}\n</code></pre>\n<p>This is an <a href=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a> for <code class=\"codespan\">encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code class=\"codespan\">encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href=\"#dataZoom\">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class=\"lang-js\">var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            return {\n                type: &#39;circle&#39;,\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: &#39;blue&#39;\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n</code></pre>\n"},"data":{"type":["Array"],"description":"<p>Data should be the two-dimensional array shown as follow.</p>\n<pre><code class=\"lang-javascript\">[\n    [655, 850, 940, 980, 1175],\n    [672.5, 800, 845, 885, 1012.5],\n    [780, 840, 855, 880, 940],\n    [621.25, 767.5, 815, 865, 1011.25],\n    { // the data item could also be an Object, so that it could contains special settings for this data item.\n        value: [713.75, 807.5, 810, 870, 963.75],\n        itemStyle: {...}\n    },\n    ...\n]\n</code></pre>\n<p>Every data item (each line in the example above) in the two-dimensional array will be rendered into a box, and each line have five values as:</p>\n<pre><code class=\"lang-javascript\">[min,  Q1,  median (or Q2),  Q3,  max]\n</code></pre>\n<p><strong>Data Processing</strong></p>\n<p>ECharts doesn&#39;t contain data processing modules, so the five statistic values should be calculated by yourself and then passes into <code class=\"codespan\">boxplot</code>.</p>\n<p>However, ECharts also provide some simple <a href=\"https://github.com/apache/incubator-echarts/tree/master/extension/dataTool\" target=\"_blank\">raw data processing tools</a>. For example, this <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=boxplot-light-velocity&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a> uses <code class=\"codespan\">echarts.dataTool.prepareBoxplotData</code> to proceed simple data statistics.</p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Name of data item.</p>\n"},"value":{"type":["Array"],"description":"<p>Value of data item.</p>\n<pre><code class=\"lang-javascript\">[min,  Q1,  median (or Q2),  Q3,  max]\n</code></pre>\n"},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>boxplot color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#fff"},"borderColor":{"type":["Color"],"description":"<p>boxplot border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p>boxplot border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>boxplot color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#fff"},"borderColor":{"type":["Color"],"description":"<p>boxplot border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p>boxplot border width. No border when it is set to be 0.</p>\n","default":2},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":5},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"rgba(0,0,0,0.4)"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":2},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":2},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-boxplot.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-boxplot.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-boxplot.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-boxplot.markPoint.data.x\">x</a>, <a href=\"#series-boxplot.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-boxplot.markPoint.data.coord\">coord</a> attribute, in which <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-boxplot.markPoint.data.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-boxplot.markPoint.data.valueIndex\">valueIndex</a> or <a href=\"#series-boxplot.markPoint.data.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n    {\n        name: &#39;maximum&#39;,\n        type: &#39;max&#39;\n    }, \n    {\n        name: &#39;coordinate&#39;,\n        coord: [10, 20]\n    }, {\n        name: &#39;fixed x position&#39;,\n        yAxis: 10,\n        x: &#39;90%&#39;\n    }, \n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Available when using <a href=\"#series-boxplot.markPoint.data.type\">type</a> it is used to assign maximum value and minimum value in dimensions, it could be <code class=\"codespan\">0</code> (xAxis, radiusAxis), <code class=\"codespan\">1</code> (yAxis, angleAxis), and use the first value axis dimension by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-boxplot.markPoint.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["Object"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-boxplot.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class=\"codespan\">symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-boxplot.markLine.data.0.x\">x</a>, <a href=\"#series-boxplot.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-boxplot.markLine.data.0.coord\">coord</a> attribute, in which <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-boxplot.markLine.data.0.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-boxplot.markLine.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-boxplot.markLine.data.0.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n<li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code class=\"codespan\">xAxis</code> or <code class=\"codespan\">yAxis</code>. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a> for example.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p>You may also set the type of mark line through <code class=\"codespan\">type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code class=\"codespan\">valueIndex</code>.</p>\n<pre><code>data: [\n    {\n        name: &#39;average line&#39;,\n        // &#39;average&#39;, &#39;min&#39;, and &#39;max&#39; are supported\n        type: &#39;average&#39;\n    },\n    {\n        name: &#39;Horizontal line with Y value at 100&#39;,\n        yAxis: 100\n    },\n    [\n        {\n            // Use the same name with starting and ending point\n            name: &#39;Minimum to Maximum&#39;,\n            type: &#39;min&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n    [\n        {\n            name: &#39;Markline between two points&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [{\n        // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n        yAxis: &#39;max&#39;,\n        x: &#39;90%&#39;\n    }, {\n        type: &#39;max&#39;\n    }],\n    [\n        {\n            name: &#39;Mark line between two points&#39;,\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n<li><code class=\"codespan\">&#39;median&#39;</code> median value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-boxplot.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-boxplot.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'starting point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n<li><code class=\"codespan\">&#39;median&#39;</code> median value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-boxplot.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-boxplot.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'ending point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code class=\"codespan\">data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li><p>Specify the coordinate in screen coordinate system using <a href=\"#series-boxplot.markArea.data.0.x\">x</a>, <a href=\"#series-boxplot.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code class=\"codespan\">5</code>), or percent (e.g., the value is <code class=\"codespan\">&#39;35%&#39;</code>).</p>\n</li>\n<li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using\n<a href=\"#series-boxplot.markArea.data.0.coord\">coord</a>, which can be also set as <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> (e.g, <code class=\"codespan\">coord: [23, &#39;min&#39;]</code>, or <code class=\"codespan\">coord: [&#39;average&#39;, &#39;max&#39;]</code>).</p>\n</li>\n</ol>\n<ol start=\"3\">\n<li>Locate the point on the min value or max value of <code class=\"codespan\">series.data</code> using <a href=\"#series-boxplot.markArea.data.0.type\">type</a>, where <a href=\"#series-boxplot.markArea.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-boxplot.markPoint.data.0.valueDim\">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</li>\n<li>If in cartesian, you can only specify <code class=\"codespan\">xAxis</code> or <code class=\"codespan\">yAxis</code> to define a mark area based on only X or Y axis, see sample <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a></li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n\n    [\n        {\n            name: &#39;From average to max&#39;,\n            type: &#39;average&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n\n    [\n        {\n            name: &#39;Mark area between two points in data coordiantes&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [\n        {\n            name: &#39;From 60 to 80&#39;,\n            yAxis: 60\n        },\n        {\n            yAxis: 80\n        }\n    ], [\n        {\n            name: &#39;Mark area covers all data&#39;\n            coord: [&#39;min&#39;, &#39;min&#39;]\n        },\n        {\n            coord: [&#39;max&#39;, &#39;max&#39;]\n        }\n    ],\n    [\n        {\n            name: &#39;Mark area in two screen points&#39;,\n            x: 100,\n            y: 100\n        }, {\n            x: &#39;90%&#39;,\n            y: &#39;10%&#39;\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> max value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> min value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-boxplot.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-boxplot.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'start'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> max value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> min value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-boxplot.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-boxplot.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'end'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in Box plot.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in Box plot, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":800},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"elasticOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p>A <a href=\"https://en.wikipedia.org/wiki/Candlestick_chart\" target=\"_blank\">candlestick</a> chart (also called Japanese candlestick chart) is a style of financial chart used to describe price movements of a security, derivative, or currency.</p>\n<p>ECharts3 supports both <code class=\"codespan\">&#39;candlestick&#39;</code> and <code class=\"codespan\">&#39;k&#39;</code> in <a href=\"#(series.type\">series.type</a> (<code class=\"codespan\">&#39;k&#39;</code> would automatically turns into <code class=\"codespan\">&#39;candlestick&#39;</code>).</p>\n<p><strong>An example:</strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=candlestick-sh&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n\n<p><br>\n<strong>About color of increase and decrease</strong></p>\n<p>Different countries or regions have different implications on the color of candle stick chart. It may use red to imply increasing with red and decreasing with blue (in China mainland, Taiwan, Japan, Koera, and so on), or to imply increasing with green and decreasing with red (in Europe, North America, Hong Kong, Singapore, and so on). Besides color, the increase and decrease of stock may also be represented with candle stick with or without filling colors.</p>\n<p>We use red to represent increasing and blue decreasing by default. If you want to change the configuration, you may change the following parameters.</p>\n<ul>\n<li><a href=\"#series-candlestick.itemStyle.color\">series-candlestick.itemStyle.color</a>: fill color for bullish candle stick (namely, increase)</li>\n<li><a href=\"#series-candlestick.itemStyle.color0\">series-candlestick.itemStyle.color0</a>: fill color for bearish candle stick (namely, decrease)</li>\n<li><a href=\"#series-candlestick.itemStyle.borderColor\">series-candlestick.itemStyle.borderColor</a>: border color for bullish candle stick (namely, increase)</li>\n<li><a href=\"series-candlestick.itemStyle.borderColor0\" target=\"_blank\">series-candlestick.itemStyle.borderColor0</a>: border color for bearish candle stick (namely, decrease)</li>\n</ul>\n<p><br>\n<br></p>\n","properties":{"type":{"type":["string"],"description":"","default":"'candlestick'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;cartesian2d&#39;</code></p>\n<p>  Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-cartesian2d.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-cartesian2d.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n","default":"'cartesian2d'"},"xAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#xAxis\">x axis</a> to combine with, which is  useful for multiple x axes in one chart.</p>\n","default":0},"yAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#yAxis\">y axis</a> to combine with, which is  useful for multiple y axes in one chart.</p>\n","default":0},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"legendHoverLink":{"type":["boolean"],"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n","default":true},"hoverAnimation":{"type":["boolean"],"description":"<p>Whether to enable animation when hovering on box.</p>\n","default":true},"layout":{"type":["string"],"description":"<p>Layout method, whose values may be:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;horizontal&#39;</code>: horizontally layout all boxs.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;vertical&#39;</code>: vertically layout all boxs.</p>\n</li>\n</ul>\n<p>The default value is decided by:</p>\n<ul>\n<li>if there is a <code class=\"codespan\">category</code> axis:<ul>\n<li>if it is horizontal, use <code class=\"codespan\">&#39;horizontal&#39;</code>;</li>\n<li>otherwise use <code class=\"codespan\">&#39;vertical&#39;</code>;</li>\n</ul>\n</li>\n<li>otherwise use <code class=\"codespan\">&#39;horizontal&#39;</code>.</li>\n</ul>\n","default":null},"barWidth":{"type":["number"],"description":"<p>Specify bar width. Absolute value (like <code class=\"codespan\">10</code>) or percentage (like <code class=\"codespan\">&#39;20%&#39;</code>, according to band width) can be used. Auto adapt by default.</p>\n"},"barMinWidth":{"type":["number","string"],"description":"<p>Specify bar min width. Absolute value (like <code class=\"codespan\">10</code>) or percentage (like <code class=\"codespan\">&#39;20%&#39;</code>, according to band width) can be used. Auto adapt by default.</p>\n"},"barMaxWidth":{"type":["number","string"],"description":"<p>Specify bar max width. Absolute value (like <code class=\"codespan\">10</code>) or percentage (like <code class=\"codespan\">&#39;20%&#39;</code>, according to band width) can be used. Auto adapt by default.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Item style of candlestick.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color of bullish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#c23531"},"color0":{"type":["Color"],"description":"<p>Fill color of bearish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#314656"},"borderColor":{"type":["Color"],"description":"<p>Border color of bullish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#c23531"},"borderColor0":{"type":["Color"],"description":"<p>Border color of bearish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#314656"},"borderWidth":{"type":["number"],"description":"<p>Border width of candlestick. There is no border when it is <code class=\"codespan\">0</code>.</p>\n","default":1},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"<p>Emphasis style of candlestick.</p>\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Fill color of bullish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#c23531"},"color0":{"type":["Color"],"description":"<p>Fill color of bearish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#314656"},"borderColor":{"type":["Color"],"description":"<p>Border color of bullish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#c23531"},"borderColor0":{"type":["Color"],"description":"<p>Border color of bearish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#314656"},"borderWidth":{"type":["number"],"description":"<p>Border width of candlestick. There is no border when it is <code class=\"codespan\">0</code>.</p>\n","default":2},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"large":{"type":["boolean"],"description":"<p>Whether to enable the optimization of large-scale data. It could be set when large data causes performance problem.</p>\n<p>After being enabled, <code class=\"codespan\">largeThreshold</code> can be used to indicate the minimum number for turning on the optimization.</p>\n<p>But when the optimization enabled, the style of single data item can&#39;t be customized any more.</p>\n","default":true},"largeThreshold":{"type":["number"],"description":"<p>The threshold enabling the drawing optimization.</p>\n","default":600},"progressive":{"type":["number"],"description":"<p><code class=\"codespan\">progressive</code> specifies the amount of graphic elements that can be rendered within a frame (about 16ms) if &quot;progressive rendering&quot; enabled.</p>\n<p>When data amount is from thousand to more than 10 million, it will take too long time to render all of the graphic elements. Since ECharts 4, &quot;progressive rendering&quot; is supported in its workflow, which processes and renders data chunk by chunk alone with each frame, avoiding to block the UI thread of the browser.</p>\n<p>Set <code class=\"codespan\">progressive: 0</code> to disable progressive permanently. By default, progressive is auto-enabled when data amount is bigger than <code class=\"codespan\">progressiveThreshold</code>.</p>\n","default":3000},"progressiveThreshold":{"type":["number"],"description":"<p>If current data amount is over the threshold, &quot;progressive rendering&quot; is enabled.</p>\n","default":10000},"progressiveChunkMode":{"type":["string"],"description":"<p>Chunk approach, optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;sequential&#39;</code>: slice data by data index.</li>\n<li><code class=\"codespan\">&#39;mod&#39;</code>: slice data by mod, which make the data items of each chunk coming from all over the data, bringing better visual effect while progressive rendering.</li>\n</ul>\n","default":"mod"},"dimensions":{"type":["Array"],"description":"<p><code class=\"codespan\">dimensions</code> can be used to define dimension info for <code class=\"codespan\">series.data</code> or <code class=\"codespan\">dataset.source</code>.</p>\n<p>Notice: if <a href=\"#dataset\">dataset</a> is used, we can provide dimension names in the first column/row of <a href=\"#dataset.source\">dataset.source</a>, and not need to specify <code class=\"codespan\">dimensions</code> here. But if <code class=\"codespan\">dimensions</code> is specified here, echarts will not retrieve dimension names from the first row/column of <code class=\"codespan\">dataset.source</code> any more.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\n    ]\n}\n</code></pre>\n<p>Each data item of <code class=\"codespan\">dimensions</code> can be:</p>\n<ul>\n<li><code class=\"codespan\">string</code>, for example, <code class=\"codespan\">&#39;someName&#39;</code>, which equals to <code class=\"codespan\">{name: &#39;someName&#39;}</code>.</li>\n<li><code class=\"codespan\">Object</code>, where the attributes can be:<ul>\n<li>name: <code class=\"codespan\">string</code>.</li>\n<li>type: <code class=\"codespan\">string</code>, supports:<ul>\n<li><code class=\"codespan\">number</code></li>\n<li><code class=\"codespan\">float</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array\" target=\"_blank\">Float64Array</a></li>\n<li><code class=\"codespan\">int</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array\" target=\"_blank\">Int32Array</a></li>\n<li><code class=\"codespan\">ordinal</code>, discrete value, which represents string generally.</li>\n<li><code class=\"codespan\">time</code>, time value, see <a href=\"#series.data\">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code class=\"codespan\">string</code>, generally used in tooltip for dimension display. If not specified, use <code class=\"codespan\">name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code class=\"codespan\">dimensions</code> is specified, the default <code class=\"codespan\">tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code class=\"codespan\">tooltip</code> will displayed only value horizontally.</p>\n"},"encode":{"type":["Object"],"description":"<p>Define what is encoded to for each dimension of <code class=\"codespan\">data</code>. For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n</code></pre>\n<p>When <a href=\"#series.dimensions\">dimensions</a> is used to defined name for a certain dimension, <code class=\"codespan\">encode</code> can refer the name directly. For example:</p>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<p>The basic structure of <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code> or some special reserved names like &quot;tooltip&quot;, &quot;itemName&quot; etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code class=\"codespan\">encode</code> listed as follows:</p>\n<pre><code class=\"lang-js\">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension &quot;product&quot; and &quot;score&quot; in the tooltip.\n    tooltip: [&#39;product&#39;, &#39;score&#39;]\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // &#39;pie&#39;, &#39;funnel&#39;, where data item name can be displayed in legend.\n    itemName: 3\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension &quot;score&quot; to the X axis.\n    x: [1, 5, &#39;score&#39;],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like &#39;pie&#39;, &#39;funnel&#39; etc.:\nencode: {\n    value: 3\n}\n</code></pre>\n<p>This is an <a href=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a> for <code class=\"codespan\">encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code class=\"codespan\">encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href=\"#dataZoom\">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class=\"lang-js\">var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            return {\n                type: &#39;circle&#39;,\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: &#39;blue&#39;\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n</code></pre>\n"},"data":{"type":["Array"],"description":"<p>Data should be the two-dimensional array shown as follows.</p>\n<pre><code class=\"lang-javascript\">[\n    [2320.26, 2320.26, 2287.3,  2362.94],\n    [2300,    2291.3,  2288.26, 2308.38],\n    { // the data item could also be an Object, so that it could contains special settings for this data item.\n        value: [2300,    2291.3,  2288.26, 2308.38],\n        itemStyle: {...}\n    },\n    ...\n]\n</code></pre>\n<p>Every data item (each line in the example above) represents a box, which contains 4 values. They are:</p>\n<pre><code class=\"lang-javascript\">[open, close, lowest, highest]  (namely: [opening value, closing value, lowest value, highest value])\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Name of data item.</p>\n"},"value":{"type":["Array"],"description":"<p>Value of data item.</p>\n<pre><code class=\"lang-javascript\">[open, close, lowest, highest]  (namely: [opening value, closing value, lowest value, highest value])\n</code></pre>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of a candle box.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color of bullish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#c23531"},"color0":{"type":["Color"],"description":"<p>Fill color of bearish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#314656"},"borderColor":{"type":["Color"],"description":"<p>Border color of bullish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#c23531"},"borderColor0":{"type":["Color"],"description":"<p>Border color of bearish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#314656"},"borderWidth":{"type":["number"],"description":"<p>Border width of candlestick. There is no border when it is <code class=\"codespan\">0</code>.</p>\n","default":1},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"<p>Emphasis style of a candle box.</p>\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Fill color of bullish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#c23531"},"color0":{"type":["Color"],"description":"<p>Fill color of bearish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#314656"},"borderColor":{"type":["Color"],"description":"<p>Border color of bullish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#c23531"},"borderColor0":{"type":["Color"],"description":"<p>Border color of bearish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#314656"},"borderWidth":{"type":["number"],"description":"<p>Border width of candlestick. There is no border when it is <code class=\"codespan\">0</code>.</p>\n","default":2},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-candlestick.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-candlestick.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-candlestick.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-candlestick.markPoint.data.x\">x</a>, <a href=\"#series-candlestick.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-candlestick.markPoint.data.coord\">coord</a> attribute, in which <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-candlestick.markPoint.data.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-candlestick.markPoint.data.valueIndex\">valueIndex</a> or <a href=\"#series-candlestick.markPoint.data.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n    {\n        name: &#39;maximum&#39;,\n        type: &#39;max&#39;\n    }, \n    {\n        name: &#39;coordinate&#39;,\n        coord: [10, 20]\n    }, {\n        name: &#39;fixed x position&#39;,\n        yAxis: 10,\n        x: &#39;90%&#39;\n    }, \n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Available when using <a href=\"#series-candlestick.markPoint.data.type\">type</a> it is used to assign maximum value and minimum value in dimensions, it could be <code class=\"codespan\">0</code> (xAxis, radiusAxis), <code class=\"codespan\">1</code> (yAxis, angleAxis), and use the first value axis dimension by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-candlestick.markPoint.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["Object"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-candlestick.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class=\"codespan\">symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-candlestick.markLine.data.0.x\">x</a>, <a href=\"#series-candlestick.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-candlestick.markLine.data.0.coord\">coord</a> attribute, in which <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-candlestick.markLine.data.0.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-candlestick.markLine.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-candlestick.markLine.data.0.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n<li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code class=\"codespan\">xAxis</code> or <code class=\"codespan\">yAxis</code>. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a> for example.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p>You may also set the type of mark line through <code class=\"codespan\">type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code class=\"codespan\">valueIndex</code>.</p>\n<pre><code>data: [\n    {\n        name: &#39;average line&#39;,\n        // &#39;average&#39;, &#39;min&#39;, and &#39;max&#39; are supported\n        type: &#39;average&#39;\n    },\n    {\n        name: &#39;Horizontal line with Y value at 100&#39;,\n        yAxis: 100\n    },\n    [\n        {\n            // Use the same name with starting and ending point\n            name: &#39;Minimum to Maximum&#39;,\n            type: &#39;min&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n    [\n        {\n            name: &#39;Markline between two points&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [{\n        // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n        yAxis: &#39;max&#39;,\n        x: &#39;90%&#39;\n    }, {\n        type: &#39;max&#39;\n    }],\n    [\n        {\n            name: &#39;Mark line between two points&#39;,\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n<li><code class=\"codespan\">&#39;median&#39;</code> median value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-candlestick.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-candlestick.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'starting point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n<li><code class=\"codespan\">&#39;median&#39;</code> median value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-candlestick.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-candlestick.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'ending point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code class=\"codespan\">data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li><p>Specify the coordinate in screen coordinate system using <a href=\"#series-candlestick.markArea.data.0.x\">x</a>, <a href=\"#series-candlestick.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code class=\"codespan\">5</code>), or percent (e.g., the value is <code class=\"codespan\">&#39;35%&#39;</code>).</p>\n</li>\n<li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using\n<a href=\"#series-candlestick.markArea.data.0.coord\">coord</a>, which can be also set as <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> (e.g, <code class=\"codespan\">coord: [23, &#39;min&#39;]</code>, or <code class=\"codespan\">coord: [&#39;average&#39;, &#39;max&#39;]</code>).</p>\n</li>\n</ol>\n<ol start=\"3\">\n<li>Locate the point on the min value or max value of <code class=\"codespan\">series.data</code> using <a href=\"#series-candlestick.markArea.data.0.type\">type</a>, where <a href=\"#series-candlestick.markArea.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-candlestick.markPoint.data.0.valueDim\">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</li>\n<li>If in cartesian, you can only specify <code class=\"codespan\">xAxis</code> or <code class=\"codespan\">yAxis</code> to define a mark area based on only X or Y axis, see sample <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a></li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n\n    [\n        {\n            name: &#39;From average to max&#39;,\n            type: &#39;average&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n\n    [\n        {\n            name: &#39;Mark area between two points in data coordiantes&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [\n        {\n            name: &#39;From 60 to 80&#39;,\n            yAxis: 60\n        },\n        {\n            yAxis: 80\n        }\n    ], [\n        {\n            name: &#39;Mark area covers all data&#39;\n            coord: [&#39;min&#39;, &#39;min&#39;]\n        },\n        {\n            coord: [&#39;max&#39;, &#39;max&#39;]\n        }\n    ],\n    [\n        {\n            name: &#39;Mark area in two screen points&#39;,\n            x: 100,\n            y: 100\n        }, {\n            x: &#39;90%&#39;,\n            y: &#39;10%&#39;\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> max value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> min value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-candlestick.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-candlestick.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'start'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> max value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> min value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-candlestick.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-candlestick.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'end'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"clip":{"type":["boolean"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.5.0</code></p>\n</blockquote>\n<p>If clip the overflow on the coordinate system. Clip results varies between series:</p>\n<ul>\n<li>Scatter:Ignore the symbols exceeds the coordinate system. Not clip the elements.</li>\n<li>Bar:Clip all the overflowed. With bar width kept.</li>\n<li>Line:Clip the overflowed line.</li>\n<li>Lines: Clip all the overflowed.</li>\n<li>Candlestick: Ignore the elements exceeds the coordinate system.</li>\n<li>Custom: Clip all the olverflowed.</li>\n</ul>\n<p>All these series have default value <code class=\"codespan\">true</code> except custom series. Set it to <code class=\"codespan\">false</code> if you don&#39;t want to clip.</p>\n","default":true},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in candlestick.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in candlestick, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"linear"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong>heat map</strong></p>\n<p>Heat map mainly use colors to represent values, which must be used along with <a href=\"#visualMap\">visualMap</a> component.</p>\n<p>It can be used in either <a href=\"#grid\">rectangular coordinate</a> or <a href=\"#geo\">geographic coordinate</a>. But the behaviour on them are quite different. Rectangular coordinate must have two catagories to use it.</p>\n<p>Here are the examples using it in rectangular coordinate and geographic coordinate:</p>\n<p><strong>rectangular coordinate: </strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=heatmap-cartesian&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n","properties":{"type":{"type":["string"],"description":"","default":"'heatmap'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;cartesian2d&#39;</code></p>\n<p>  Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-heatmap.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-heatmap.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">&#39;geo&#39;</code></p>\n<p>  Use geographic coordinate, with <a href=\"#series-heatmap.geoIndex\">geoIndex</a> to assign the corresponding geographic coordinate components.</p>\n</li>\n</ul>\n","default":"'cartesian2d'"},"xAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#xAxis\">x axis</a> to combine with, which is  useful for multiple x axes in one chart.</p>\n","default":0},"yAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#yAxis\">y axis</a> to combine with, which is  useful for multiple y axes in one chart.</p>\n","default":0},"geoIndex":{"type":["number"],"description":"<p>Index of <a href=\"#geo\">geographic coordinate</a> to combine with, which is useful for multiple geographic axes in one chart.</p>\n","default":0},"calendarIndex":{"type":["number"],"description":"<p>Index of <a href=\"#calendar\">calendar coordinates</a> to combine with, which is useful for multiple calendar coordinates in one chart.</p>\n","default":0},"pointSize":{"type":["number"],"description":"<p>Point size of each data point. It is valid with <a href=\"#series-heatmap.coordinateSystem\">coordinateSystem</a> of &#39;geo&#39; value.</p>\n","default":20},"blurSize":{"type":["number"],"description":"<p>Blur size of each data point. It is valid with <a href=\"#series-heatmap.coordinateSystem\">coordinateSystem</a> of &#39;geo&#39; value.</p>\n","default":20},"minOpacity":{"type":["number"],"description":"<p>Minimum opacity. It is valid with <a href=\"#series-heatmap.coordinateSystem\">coordinateSystem</a> of &#39;geo&#39; value.</p>\n","default":0},"maxOpacity":{"type":["number"],"description":"<p>Maximum opacity. It is valid with <a href=\"#series-heatmap.coordinateSystem\">coordinateSystem</a> of &#39;geo&#39; value.</p>\n","default":1},"progressive":{"type":["number"],"description":"<p><code class=\"codespan\">progressive</code> specifies the amount of graphic elements that can be rendered within a frame (about 16ms) if &quot;progressive rendering&quot; enabled.</p>\n<p>When data amount is from thousand to more than 10 million, it will take too long time to render all of the graphic elements. Since ECharts 4, &quot;progressive rendering&quot; is supported in its workflow, which processes and renders data chunk by chunk alone with each frame, avoiding to block the UI thread of the browser.</p>\n<p>Set <code class=\"codespan\">progressive: 0</code> to disable progressive permanently. By default, progressive is auto-enabled when data amount is bigger than <code class=\"codespan\">progressiveThreshold</code>.</p>\n","default":400},"progressiveThreshold":{"type":["number"],"description":"<p>If current data amount is over the threshold, &quot;progressive rendering&quot; is enabled.</p>\n","default":3000},"label":{"type":["Object"],"description":"<p>Work for <a href=\"#series-heatmap.coordinateSystem\">coordinateSystem</a>: &#39;cartesian2d&#39;.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"inside"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Work for <a href=\"#series-heatmap.coordinateSystem\">coordinateSystem</a>: &#39;cartesian2d&#39;.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"inside"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"data":{"type":["Array"],"description":"<p>Data array of series, which can be in the following forms:</p>\n<p>Notice, if no <code class=\"codespan\">data</code> specified in series, and there is <a href=\"#dataset\">dataset</a> in option, series will use the first <a href=\"#dataset\">dataset</a> as its datasource. If <code class=\"codespan\">data</code> has been specified, <a href=\"#dataset\">dataset</a> will not used.</p>\n<p><code class=\"codespan\">series.datasetIndex</code> can be used to specify other <a href=\"#dataset\">dataset</a>.</p>\n<p>Basically, data is represented by a two-dimension array, like the example below, where each column is named as a &quot;dimension&quot;.</p>\n<pre><code class=\"lang-js\">series: [{\n    data: [\n        // dimX   dimY   other dimensions ...\n        [  3.4,    4.5,   15,   43],\n        [  4.2,    2.3,   20,   91],\n        [  10.8,   9.5,   30,   18],\n        [  7.2,    8.8,   18,   57]\n    ]\n}]\n</code></pre>\n<ul>\n<li>In <a href=\"#grid\">cartesian (grid)</a>, &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href=\"#xAxis\">xAxis</a> and <a href=\"#yAxis\">yAxis</a> respectively.</li>\n<li>In <a href=\"#polar\">polar</a> &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href=\"#radiusAxis\">radiusAxis</a> 和 <a href=\"#anbleAxis\">angleAxis</a> respectively.</li>\n<li>Other dimensions are optional, which can be used in other places. For example:<ul>\n<li><a href=\"#visualMap\">visualMap</a> can map one or more dimensions to visual (color, symbol size ...).</li>\n<li><a href=\"#series.symbolSize\">series.symbolSize</a> can be set as a callback function, where symbol size can be calculated by values of a certain dimension.</li>\n<li>Values in other dimensions can be shown by <a href=\"#tooltip.formatter\">tooltip.formatter</a> or <a href=\"#series.label.formatter\">series.label.formatter</a>.</li>\n</ul>\n</li>\n</ul>\n<p>Especially, when there is one and only one category axis (axis.type is <code class=\"codespan\">&#39;category&#39;</code>), data can be simply be represented by a one-dimension array, like:</p>\n<pre><code class=\"lang-js\">xAxis: {\n    data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;]\n},\nseries: [{\n    // Each item corresponds to each item in xAxis.data.\n    data: [23,  44,  55,  19]\n    // In fact, it is the simplification of the format below:\n    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n</code></pre>\n<p><br>\n<strong>Relationship between &quot;value&quot; and <a href=\"#xAxis.type\">axis.type</a></strong></p>\n<ul>\n<li><p>When a dimension corresponds to a value axis (axis.type is <code class=\"codespan\">&#39;value&#39;</code> or <code class=\"codespan\">&#39;log&#39;</code>):</p>\n<p>  The value can be a <code class=\"codespan\">number</code> (like <code class=\"codespan\">12</code>) (can also be a number in a <code class=\"codespan\">string</code> format, like <code class=\"codespan\">&#39;12&#39;</code>).</p>\n</li>\n<li><p>When a dimension corresponds to a category axis (axis.type is <code class=\"codespan\">&#39;category&#39;</code>):</p>\n<p>  The value should be the ordinal of the axis.data (based on <code class=\"codespan\">0</code>), the string value of the axis.data. For example:</p>\n<pre><code class=\"lang-js\">  xAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;]\n  },\n  yAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;, &#39;p&#39;, &#39;q&#39;]\n  },\n  series: [{\n      data: [\n          // xAxis      yAxis\n          [  0,           0,    2  ], // This point is located at xAxis: &#39;Monday&#39;, yAxis: &#39;a&#39;.\n          [  &#39;Thursday&#39;,  2,    1  ], // This point is located at xAxis: &#39;Thursday&#39;, yAxis: &#39;m&#39;.\n          [  2,          &#39;p&#39;,   2  ], // This point is located at xAxis: &#39;Wednesday&#39;, yAxis: &#39;p&#39;.\n          [  3,           3,    5  ]\n      ]\n  }]\n</code></pre>\n<p>  There is an example of double category axes: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-punchCard\" target=\"_blank\">Github Punchcard</a>.</p>\n</li>\n<li><p>When a dimension corresponds to a time axis (type is <code class=\"codespan\">&#39;time&#39;</code>), the value can be:</p>\n<ul>\n<li>a timestamp, like <code class=\"codespan\">1484141700832</code>, which represents a UTC time.</li>\n<li>a date string, in one of the formats below:<ul>\n<li>a subset of <a href=\"http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15\" target=\"_blank\">ISO 8601</a>, only including (all of these are treated as local time unless timezone is specified, which is consistent with <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>):<ul>\n<li>only part of year/month/date/time are specified: <code class=\"codespan\">&#39;2012-03&#39;</code>, <code class=\"codespan\">&#39;2012-03-01&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 05&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 05:06&#39;</code>.</li>\n<li>separated by <code class=\"codespan\">&quot;T&quot;</code> or a space: <code class=\"codespan\">&#39;2012-03-01T12:22:33.123&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 12:22:33.123&#39;</code>.</li>\n<li>timezone specified: <code class=\"codespan\">&#39;2012-03-01T12:22:33Z&#39;</code>, <code class=\"codespan\">&#39;2012-03-01T12:22:33+8000&#39;</code>, <code class=\"codespan\">&#39;2012-03-01T12:22:33-05:00&#39;</code>.</li>\n</ul>\n</li>\n<li>other date string format (all of these are treated as local time):\n<code class=\"codespan\">&#39;2012&#39;</code>, <code class=\"codespan\">&#39;2012-3-1&#39;</code>, <code class=\"codespan\">&#39;2012/3/1&#39;</code>, <code class=\"codespan\">&#39;2012/03/01&#39;</code>,\n<code class=\"codespan\">&#39;2009/6/12 2:00&#39;</code>, <code class=\"codespan\">&#39;2009/6/12 2:05:08&#39;</code>, <code class=\"codespan\">&#39;2009/6/12 2:05:08.123&#39;</code>.</li>\n</ul>\n</li>\n<li>a JavaScript Date instance created by user:<ul>\n<li>Caution, when using a data string to create a Date instance, <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">browser differences and inconsistencies</a> should be considered.</li>\n<li>For example: In chrome, <code class=\"codespan\">new Date(&#39;2012-01-01&#39;)</code> is treated as a Jan 1st 2012 in UTC, while <code class=\"codespan\">new Date(&#39;2012-1-1&#39;)</code> and <code class=\"codespan\">new Date(&#39;2012/01/01&#39;)</code> are treated as Jan 1st 2012 in local timezone. In safari <code class=\"codespan\">new Date(&#39;2012-1-1&#39;)</code> is not supported.</li>\n<li>So if you intent to perform <code class=\"codespan\">new Date(dateString)</code>, it is strongly recommended to use a time parse library (e.g., <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>), or use <code class=\"codespan\">echarts.number.parseDate</code>, or check <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">this</a>.</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<strong>Customize a data item:</strong></p>\n<p>When needing to customize a data item, it can be set as an object, where property <code class=\"codespan\">value</code> reprensent real value. For example:</p>\n<pre><code class=\"lang-js\">[\n    12,\n    24,\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    33\n]\n// Or\n[\n    [12, 332],\n    [24, 32],\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    [33, 31]\n]\n</code></pre>\n<p><br>\n<strong>Empty value:</strong></p>\n<p><code class=\"codespan\">&#39;-&#39;</code> or <code class=\"codespan\">null</code> or <code class=\"codespan\">undefined</code> or <code class=\"codespan\">NaN</code> can be used to describe that a data item does not exist (ps:<em>not exist</em> does not means its value is <code class=\"codespan\">0</code>).</p>\n<p>For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.</p>\n<p><br><br></p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Name of data item.</p>\n"},"value":{"type":["Array"],"description":"<p>Value of data item.</p>\n"},"label":{"type":["Object"],"description":"<p>It is valid with <a href=\"#series-heatmap.coordinateSystem\">coordinateSystem</a> of &#39;cartesian2d&#39; value.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"inside"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of a single data point. It is valid with <a href=\"#series-heatmap.coordinateSystem\">coordinateSystem</a> of &#39;cartesian2d&#39; value.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"inside"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-heatmap.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-heatmap.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-heatmap.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li>Assign coordinate according to container with <a href=\"#series-heatmap.markPoint.data.x\">x</a>, <a href=\"#series-heatmap.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["Object"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-heatmap.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class=\"codespan\">symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li>Assign coordinate according to container with <a href=\"#series-heatmap.markLine.data.0.x\">x</a>, <a href=\"#series-heatmap.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<pre><code>data: [\n    [\n        {\n            name: &#39;Mark line between two points&#39;,\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'starting point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'ending point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code class=\"codespan\">data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li>Specify the coordinate in screen coordinate system using <a href=\"#series-heatmap.markArea.data.0.x\">x</a>, <a href=\"#series-heatmap.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code class=\"codespan\">5</code>), or percent (e.g., the value is <code class=\"codespan\">&#39;35%&#39;</code>).</li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n    [\n        {\n            name: &#39;Mark area in two screen points&#39;,\n            x: 100,\n            y: 100\n        }, {\n            x: &#39;90%&#39;,\n            y: &#39;10%&#39;\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'start'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'end'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in heatmap.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in heatmap, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong>Map.</strong></p>\n<p>Map is mainly used in the visualization of geographic area data, which can be used with <a href=\"#visualMap\">visualMap</a> component to visualize the datas such as population distribution density in diffrent areas.</p>\n<p>Series of same <a href=\"#series-map.map\">map type</a> will show in one map. At this point, the configuration of the first series will be used for the map configuration.</p>\n","properties":{"type":{"type":["string"],"description":"","default":"'map'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"map":{"type":["string"],"description":"<p>Map charts.</p>\n<p>Due to the increase of fineness of map, ECharts 3 doesn&#39;t include map data by default for package size consideration. You may find map files you need on <a href=\"http://ecomfe.github.io/echarts-builder-web/map3.html\" target=\"_blank\">map download page</a> and then include and register them in ECharts.</p>\n<p>Two formats of map data are provided in ECharts, one of which can be included in <code class=\"codespan\">&lt;script&gt;</code> tag as JavaScript file, and the other of is in JSON format and should be loaded using AJAX. Map name and data will be loaded automatically once the JavaScript file is loaded, while in the JSON form, you have to assign name explicitly.</p>\n<p>Here are examples of these two types:</p>\n<p><strong> JavaScript importing example </strong></p>\n<pre><code class=\"lang-html\">&lt;script src=&quot;echarts.js&quot;&gt;&lt;/script&gt;\n&lt;script src=&quot;map/js/china.js&quot;&gt;&lt;/script&gt;\n&lt;script&gt;\nvar chart = echarts.init(document.getElmentById(&#39;main&#39;));\nchart.setOption({\n    series: [{\n        type: &#39;map&#39;,\n        map: &#39;china&#39;\n    }]\n});\n&lt;/script&gt;\n</code></pre>\n<p><strong> JSON importing example </strong></p>\n<pre><code class=\"lang-js\">$.get(&#39;map/json/china.json&#39;, function (chinaJson) {\n    echarts.registerMap(&#39;china&#39;, chinaJson);\n    var chart = echarts.init(document.getElmentById(&#39;main&#39;));\n    chart.setOption({\n        series: [{\n            type: &#39;map&#39;,\n            map: &#39;china&#39;\n        }]\n    });\n});\n</code></pre>\n<p>ECharts uses <a href=\"http://geojson.org/\" target=\"_blank\">geoJSON</a> format as map outline. Besides the methods introduced above, you can also get <a href=\"http://geojson.org/\" target=\"_blank\">geoJSON</a> data through in other methods if you like and register it in ECharts. Reference to <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=map-usa\" target=\"_blank\">USA Population Estimates</a> for more information.</p>\n","default":"''"},"roam":{"type":["boolean","string"],"description":"<p>Whether to enable mouse zooming and translating. <code class=\"codespan\">false</code> by default. If either zooming or translating is wanted, it can be set to <code class=\"codespan\">&#39;scale&#39;</code> or <code class=\"codespan\">&#39;move&#39;</code>. Otherwise, set it to be <code class=\"codespan\">true</code> to enable both.</p>\n","default":false},"center":{"type":["Array"],"description":"<p>Center of current view-port, in longitude and latitude.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">center: [115.97, 29.71]\n</code></pre>\n"},"aspectScale":{"type":["number"],"description":"<p>Used to scale aspect of geo.</p>\n<p>The final aspect is calculated by: <code class=\"codespan\">geoBoundingRect.width / geoBoundingRect.height * aspectScale</code>.</p>\n","default":0.75},"boundingCoords":{"type":["Array"],"description":"<p>Two dimension array. Define coord of left-top, right-bottom in layout box.</p>\n<pre><code class=\"lang-js\">// A complete world map\nmap: &#39;world&#39;,\nleft: 0, top: 0, right: 0, bottom: 0,\nboundingCoords: [\n    // [lng, lat] of left-top corner\n    [-180, 90],\n    // [lng, lat] of right-bottom corner\n    [180, -90]\n],\n</code></pre>\n","default":null},"zoom":{"type":["number"],"description":"<p>Zoom rate of current view-port.</p>\n","default":1},"scaleLimit":{"type":["Object"],"description":"<p>Limit of scaling, with <code class=\"codespan\">min</code> and <code class=\"codespan\">max</code>. <code class=\"codespan\">1</code> by default.</p>\n","properties":{"min":{"type":["number"],"description":"<p>Minimum scaling</p>\n"},"max":{"type":["number"],"description":"<p>Maximum scaling</p>\n"}}},"nameMap":{"type":["Object"],"description":"<p>Name mapping for customized areas. For example:</p>\n<pre><code class=\"lang-js\">{\n    &#39;China&#39; : &#39;中国&#39;\n}\n</code></pre>\n"},"nameProperty":{"type":["string"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.8.0</code></p>\n</blockquote>\n<p>customized property key for GeoJSON feature. By default, &#39;name&#39; is used as primary key to identify GeoJSON feature.\nFor example:</p>\n<pre><code class=\"lang-js\">{\n    nameProperty: &#39;NAME&#39;, // key to connect following data point to GeoJSON region {&quot;type&quot;:&quot;Feature&quot;,&quot;id&quot;:&quot;01&quot;,&quot;properties&quot;:{&quot;NAME&quot;:&quot;Alabama&quot;}, &quot;geometry&quot;: { ... }}\n    data:[\n        {name: &#39;Alabama&#39;, value: 4822023},\n        {name: &#39;Alaska&#39;, value: 731449},\n    ]\n}\n</code></pre>\n","default":"'name'"},"selectedMode":{"type":["boolean","string"],"description":"<p>Selected mode decides whether multiple selecting is supported. By default, <code class=\"codespan\">false</code> is used for disabling selection. Its value can also be <code class=\"codespan\">&#39;single&#39;</code> for selecting single area, or <code class=\"codespan\">&#39;multiple&#39;</code> for selecting multiple areas.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of Map Area Border, <code class=\"codespan\">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"areaColor":{"type":["Color"],"description":"<p>Area filling color.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#eee'"},"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"<p>Map area style in highlighted state.</p>\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"areaColor":{"type":["Color"],"description":"<p>Area filling color.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#eee'"},"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between  component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"top":{"type":["string","number"],"description":"<p>Distance between  component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"right":{"type":["string","number"],"description":"<p>Distance between  component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"<p>Distance between  component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"layoutCenter":{"type":["Array"],"description":"<p><code class=\"codespan\">layoutCenter</code> and <code class=\"codespan\">layoutSize</code> provides layout strategy other than <code class=\"codespan\">left/right/top/bottom/width/height</code>.</p>\n<p>When using <code class=\"codespan\">left/right/top/bottom/width/height</code>, it is hard to put the map inside a box area with a fixed width-height ratio. In this case, <code class=\"codespan\">layoutCenter</code> attribute can be used to define the center position of map, and <code class=\"codespan\">layoutSize</code> can be used to define the size of map. For example:</p>\n<pre><code class=\"lang-js\">layoutCenter: [&#39;30%&#39;, &#39;30%&#39;],\n// If width-height ratio is larger than 1, then width is set to be 100.\n// Otherwise, height is set to be 100.\n// This makes sure that it will not exceed the area of 100x100\nlayoutSize: 100\n</code></pre>\n<p>After setting these two values, <code class=\"codespan\">left/right/top/bottom/width/height</code> becomes invalid.</p>\n","default":null},"layoutSize":{"type":["number","string"],"description":"<p>Size of map, see <code class=\"codespan\">layoutCenter</code> for more information. Percentage relative to screen width, and absolute pixel values are supported.</p>\n"},"geoIndex":{"type":["number"],"description":"<p>In default case, map series create exclusive <code class=\"codespan\">geo</code> component for themselves. But <code class=\"codespan\">geoIndex</code> can be used to specify an outer <a href=\"#geo\">geo component</a>, which can be shared with other series like <a href=\"#series-pie\">pie</a>. Moreover, the region color of the outer <a href=\"#geo\">geo component</a> can be controlled by the map series (via <a href=\"#visualMap\">visualMap</a>).</p>\n<p>When <code class=\"codespan\">geoIndex</code> specified, <a href=\"#series-map.map\">series-map.map</a> other style configurations like <a href=\"#series-map.itemStyle\">series-map.itemStyle</a> will not work, but corresponding configurations in <a href=\"#geo\">geo component</a> will be used.</p>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=geo-map-scatter&reset=1&edit=1\" width=\"600\" height=\"400\"><iframe />\n\n\n","default":null},"mapValueCalculation":{"type":["string"],"description":"<p>Value of multiple series with the same <a href=\"#series-map.map\">map type</a> can use this option to get a statistical value.</p>\n<p>Supported statistical methods:</p>\n<ul>\n<li><code class=\"codespan\">&#39;sum&#39;</code></li>\n<li><code class=\"codespan\">&#39;average&#39;</code></li>\n<li><code class=\"codespan\">&#39;max&#39;</code></li>\n<li><code class=\"codespan\">&#39;min&#39;</code></li>\n</ul>\n","default":"'sum'"},"showLegendSymbol":{"type":["boolean"],"description":"<p>Show the symbol in related area (dot of series symbol). Available when <a href=\"#legend\">legend</a> component exists.</p>\n"},"seriesLayoutBy":{"type":["string"],"description":"<p>When <a href=\"#dataset\">dataset</a> is used, <code class=\"codespan\">seriesLayoutBy</code> specifies whether the column or the row of <code class=\"codespan\">dataset</code> is mapped to the series, namely, the series is &quot;layout&quot; on columns or rows. Optional values:</p>\n<ul>\n<li>&#39;column&#39;: by default, the columns of <code class=\"codespan\">dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>&#39;row&#39;:the rows of <code class=\"codespan\">dataset</code> are mapped to the series. In this case, each row represents a dimension.</li>\n</ul>\n<p>Check this <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=dataset-series-layout-by\" target=\"_blank\">example</a>.</p>\n","default":"'column'"},"datasetIndex":{"type":["number"],"description":"<p>If <a href=\"#series.data\">series.data</a> is not specified, and <a href=\"#dataset\">dataset</a> exists, the series will use <code class=\"codespan\">dataset</code>. <code class=\"codespan\">datasetIndex</code> specifies which dataset will be used.</p>\n","default":0},"data":{"type":["Array"],"description":"<p>Data array of map series, which can be a single data value, like:</p>\n<pre><code class=\"lang-js\">[12, 34, 56, 10, 23]\n</code></pre>\n<p>Or, if need extra dimensions for components like <a href=\"#visualMap\">visualMap</a> to map to graphic attributes like color, it can also be in the form of array. For example:</p>\n<pre><code class=\"lang-js\">[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]\n</code></pre>\n<p>In this case, we can assgin the second value in each array item to <a href=\"#visualMap\">visualMap</a> component.</p>\n<p>More likely, we need to assign name to each data item, in which case each item should be an object:</p>\n<pre><code class=\"lang-js\">[{\n    // name of date item\n    name: &#39;data1&#39;,\n    // value of date item is 8\n    value: 10\n}, {\n    name: &#39;data2&#39;,\n    value: 20\n}]\n</code></pre>\n<p>Each data item can be further customized:</p>\n<pre><code class=\"lang-js\">[{\n    name: &#39;data1&#39;,\n    value: 10\n}, {\n    // name of data item\n    name: &#39;data2&#39;,\n    value : 56,\n    // user-defined label format that only useful for this data item\n    label: {},\n    // user-defined special itemStyle that only useful for this data item\n    itemStyle:{}\n}]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>The name of the map area where the data belongs to, such as <code class=\"codespan\">&#39;China&#39;</code> or <code class=\"codespan\">&#39;United Kingdom&#39;</code> .</p>\n"},"value":{"type":["number"],"description":"<p>The numerical value of this area.</p>\n"},"selected":{"type":["boolean"],"description":"<p>Whether the are selected.</p>\n","default":false},"itemStyle":{"type":["Object"],"description":"<p>Style of item polygon</p>\n","properties":{"areaColor":{"type":["Color"],"description":"<p>Color of the area.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'bottom'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"areaColor":{"type":["Color"],"description":"<p>Area color in the map.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-map.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-map.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-map.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-map.markPoint.data.x\">x</a>, <a href=\"#series-map.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-map.markPoint.data.coord\">coord</a> attribute, in which <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n    {\n        name: &#39;coordinate&#39;,\n        coord: [10, 20]\n    }, {\n        name: &#39;fixed x position&#39;,\n        yAxis: 10,\n        x: &#39;90%&#39;\n    }, \n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"valueIndex":{"type":["number"],"description":"<p>Available when using <a href=\"#series-map.markPoint.data.type\">type</a> it is used to assign maximum value and minimum value in dimensions, it could be <code class=\"codespan\">0</code> (xAxis, radiusAxis), <code class=\"codespan\">1</code> (yAxis, angleAxis), and use the first value axis dimension by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-map.markPoint.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["Object"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-map.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class=\"codespan\">symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-map.markLine.data.0.x\">x</a>, <a href=\"#series-map.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-map.markLine.data.0.coord\">coord</a> attribute, in which <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<pre><code>data: [\n    [\n        {\n            name: &#39;Markline between two points&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [{\n        // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n        yAxis: &#39;max&#39;,\n        x: &#39;90%&#39;\n    }, {\n        type: &#39;max&#39;\n    }],\n    [\n        {\n            name: &#39;Mark line between two points&#39;,\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-map.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-map.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'starting point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-map.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-map.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'ending point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code class=\"codespan\">data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li><p>Specify the coordinate in screen coordinate system using <a href=\"#series-map.markArea.data.0.x\">x</a>, <a href=\"#series-map.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code class=\"codespan\">5</code>), or percent (e.g., the value is <code class=\"codespan\">&#39;35%&#39;</code>).</p>\n</li>\n<li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using\n<a href=\"#series-map.markArea.data.0.coord\">coord</a>, which can be also set as <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> (e.g, <code class=\"codespan\">coord: [23, &#39;min&#39;]</code>, or <code class=\"codespan\">coord: [&#39;average&#39;, &#39;max&#39;]</code>).</p>\n</li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n\n    [\n        {\n            name: &#39;Mark area between two points in data coordiantes&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [\n        {\n            name: &#39;From 60 to 80&#39;,\n            yAxis: 60\n        },\n        {\n            yAxis: 80\n        }\n    ], [\n        {\n            name: &#39;Mark area covers all data&#39;\n            coord: [&#39;min&#39;, &#39;min&#39;]\n        },\n        {\n            coord: [&#39;max&#39;, &#39;max&#39;]\n        }\n    ],\n    [\n        {\n            name: &#39;Mark area in two screen points&#39;,\n            x: 100,\n            y: 100\n        }, {\n            x: &#39;90%&#39;,\n            y: &#39;10%&#39;\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-map.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-map.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'start'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-map.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-map.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'end'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p>The series in parallel coordinate system.</p>\n<p><br></p>\n<hr>\n<p><strong>Introduction about Parallel coordinates</strong></p>\n<p><a href=\"https://en.wikipedia.org/wiki/Parallel_coordinates\" target=\"_blank\">Parallel Coordinates</a> is a common way of visualizing high-dimensional geometry and analyzing multivariate data.</p>\n<p>For example, <a href=\"#series-parallel.data\">series-parallel.data</a> is the following data:</p>\n<pre><code class=\"lang-javascript\">[\n    [1,  55,  9,   56,  0.46,  18,  6,  &#39;good&#39;],\n    [2,  25,  11,  21,  0.65,  34,  9,  &#39;excellent&#39;],\n    [3,  56,  7,   63,  0.3,   14,  5,  &#39;good&#39;],\n    [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],\n    { // Data item can also be an Object, so that perticular settings of its line can be set here.\n        value: [5,  42,  24,  44,  0.76,  40,  16, &#39;excellent&#39;]\n        lineStyle: {...},\n    }\n    ...\n]\n</code></pre>\n<p>In data above, each row is a &quot;data item&quot;, and each column represents a &quot;dimension&quot;. For example, the meanings of columns above are: &quot;data&quot;, &quot;AQI&quot;, &quot;PM2.5&quot;, &quot;PM10&quot;, &quot;carbon monoxide level&quot;, &quot;nitrogen dioxide level&quot;, and &quot;sulfur dioxide level&quot;.</p>\n<p>Parallel coordinates are often used to visualize multi-dimension data shown above. Each axis represents a dimension (namely, a column), and each line represents a data item. Data can be brush-selected on axes. For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/parallel-all&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n<hr>\n<p><strong>Brief about Configuration</strong></p>\n<p>Basic configuration parallel coordinates is shown as follow:</p>\n<pre><code class=\"lang-javascript\">option = {\n    parallelAxis: [                     // Definitions of axes.\n        {dim: 0, name: schema[0].text}, // Each axis has a &#39;dim&#39; attribute, representing dimension index in data.\n        {dim: 1, name: schema[1].text},\n        {dim: 2, name: schema[2].text},\n        {dim: 3, name: schema[3].text},\n        {dim: 4, name: schema[4].text},\n        {dim: 5, name: schema[5].text},\n        {dim: 6, name: schema[6].text},\n        {dim: 7, name: schema[7].text,\n            type: &#39;category&#39;,           // Also supports category data.\n            data: [&#39;Excellent&#39;, &#39;good&#39;, &#39;light pollution&#39;, &#39;moderate pollution&#39;, &#39;heavy pollution&#39;, &#39;severe pollution&#39;]\n        }\n    ],\n    parallel: {                         // Definition of a parallel coordinate system.\n        left: &#39;5%&#39;,                     // Location of parallel coordinate system.\n        right: &#39;13%&#39;,\n        bottom: &#39;10%&#39;,\n        top: &#39;20%&#39;,\n        parallelAxisDefault: {          // A pattern for axis definition, which can avoid repeating in `parallelAxis`.\n            type: &#39;value&#39;,\n            nameLocation: &#39;end&#39;,\n            nameGap: 20\n        }\n    },\n    series: [                           // Here the three series sharing the same parallel coordinate system.\n        {\n            name: &#39;Beijing&#39;,\n            type: &#39;parallel&#39;,           // The type of this series is &#39;parallel&#39;\n            data: [\n                [1,  55,  9,   56,  0.46,  18,  6,  &#39;good&#39;],\n                [2,  25,  11,  21,  0.65,  34,  9,  &#39;excellent&#39;],\n                ...\n            ]\n        },\n        {\n            name: &#39;Shanghai&#39;,\n            type: &#39;parallel&#39;,\n            data: [\n                [3,  56,  7,   63,  0.3,   14,  5,  &#39;good&#39;],\n                [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],\n                ...\n            ]\n        },\n        {\n            name: &#39;Guangzhou&#39;,\n            type: &#39;parallel&#39;,\n            data: [\n                [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],\n                [5,  42,  24,  44,  0.76,  40,  16, &#39;excellent&#39;],\n                ...\n            ]\n        }\n    ]\n};\n</code></pre>\n<p>Three components are involved here: <a href=\"#parallel\">parallel</a>, <a href=\"#parallelAxis\">parallelAxis</a>, <a href=\"#series-parallel\">series-parallel</a></p>\n<ul>\n<li><p><a href=\"#parallel\">parallel</a></p>\n<p>  This component is the coordinate system. One or more series (like &quot;Beijing&quot;, &quot;Shanghai&quot;, and &quot;Guangzhou&quot; in the above example) can share one coordinate system.</p>\n<p>  Like other coordinate systems, multiple parallel coordinate systems can be created in one echarts instance.</p>\n<p>  Position setting is also carried out here.</p>\n</li>\n<li><p><a href=\"#parallelAxis\">parallelAxis</a></p>\n<p>  This is axis configuration. Multiple axes are needed in parallel coordinates.</p>\n<p>  <a href=\"#parallelAxis.parallelIndex\">parallelAxis.parallelIndex</a> is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.</p>\n</li>\n<li><p><a href=\"#series-parallel\">series-parallel</a></p>\n<p>  This is the definition of parallel series, which will be drawn on parallel coordinate system.</p>\n<p>  <a href=\"#parallelAxis.parallelIndex\">parallelAxis.parallelIndex</a> is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>Notes and Best Practices</strong></p>\n<p>When configuring multiple <a href=\"#parallelAxis\">parallelAxis</a>, there might be some common attributes in each axis configuration. To avoid writing them repeatly, they can be put under <a href=\"#parallel.parallelAxisDefault\">parallel.parallelAxisDefault</a>. Before initializing axis, configurations in <a href=\"#parallel.parallelAxisDefault\">parallel.parallelAxisDefault</a> will be merged into <a href=\"#parallelAxis\">parallelAxis</a> to generate the final axis configuration.</p>\n<p><strong>If data is too large and cause bad performance</strong></p>\n<p>It is suggested to set <a href=\"#series-parallel.lineStyle.width\">series-parallel.lineStyle.width</a> to be <code class=\"codespan\">0.5</code> (or less), which may improve performance significantly.</p>\n<p><br></p>\n<hr>\n<p><strong>Display High-Dimension Data</strong></p>\n<p>When dimension number is extremely large, say, more than 50 dimensions, there will be more than 50 axes, which may hardly display in a page.</p>\n<p>In this case, you may use <a href=\"#parallel.axisExpandable\">parallel.axisExpandable</a> to improve the display. See this example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=map-parallel-prices&edit=1&reset=1\" width=\"600\" height=\"460\"><iframe />\n\n\n\n\n\n\n\n\n","properties":{"type":{"type":["string"],"description":"","default":"'parallel'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;parallel&#39;</code></p>\n<p>  Use parallel coordinates, with <a href=\"#series-parallel.parallelIndex\">parallelIndex</a> to assign the corresponding parallel coordinate components.</p>\n</li>\n</ul>\n","default":"'parallel'"},"parallelIndex":{"type":["number"],"description":"<p>Index of <a href=\"#parallel\">parallel coordinates</a> to combine with, which is useful for multiple parallel axes in one chart.</p>\n","default":0},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"lineStyle":{"type":["Object"],"description":"<p>Line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":2},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":0.45}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":2},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":0.45}}}}},"inactiveOpacity":{"type":["number"],"description":"<p>When perform brush selection, the unselected lines will be set as this transparency rate (which could darken those lines).</p>\n","default":0.05},"activeOpacity":{"type":["number"],"description":"<p>When perform brush selection, the selected lines will be set as this transparency rate (which could highlight those lines).</p>\n","default":1},"realtime":{"type":["boolean"],"description":"<p>Whether to update view in realtime.</p>\n","default":true},"smooth":{"type":["boolean","number"],"description":"<p>Whether to smooth the line. It defaults to be <code class=\"codespan\">false</code> and can be set as <code class=\"codespan\">true</code> or the values from 0 to 1 which indicating the smoothness.</p>\n","default":false},"progressive":{"type":["number"],"description":"<p><code class=\"codespan\">progressive</code> specifies the amount of graphic elements that can be rendered within a frame (about 16ms) if &quot;progressive rendering&quot; enabled.</p>\n<p>When data amount is from thousand to more than 10 million, it will take too long time to render all of the graphic elements. Since ECharts 4, &quot;progressive rendering&quot; is supported in its workflow, which processes and renders data chunk by chunk alone with each frame, avoiding to block the UI thread of the browser.</p>\n<p>Set <code class=\"codespan\">progressive: 0</code> to disable progressive permanently. By default, progressive is auto-enabled when data amount is bigger than <code class=\"codespan\">progressiveThreshold</code>.</p>\n","default":500},"progressiveThreshold":{"type":["number"],"description":"<p>If current data amount is over the threshold, &quot;progressive rendering&quot; is enabled.</p>\n","default":3000},"progressiveChunkMode":{"type":["string"],"description":"<p>Chunk approach, optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;sequential&#39;</code>: slice data by data index.</li>\n<li><code class=\"codespan\">&#39;mod&#39;</code>: slice data by mod, which make the data items of each chunk coming from all over the data, bringing better visual effect while progressive rendering.</li>\n</ul>\n","default":"sequential"},"data":{"type":["Array"],"description":"<p>For example, <a href=\"#series-parallel.data\">series-parallel.data</a> is the following data:</p>\n<pre><code class=\"lang-javascript\">[\n    [1,  55,  9,   56,  0.46,  18,  6,  &#39;good&#39;],\n    [2,  25,  11,  21,  0.65,  34,  9,  &#39;excellent&#39;],\n    [3,  56,  7,   63,  0.3,   14,  5,  &#39;good&#39;],\n    [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],\n    { // Data item can also be an Object, so that perticular settings of its line can be set here.\n        value: [5,  42,  24,  44,  0.76,  40,  16, &#39;excellent&#39;]\n        lineStyle: {...},\n    }\n    ...\n]\n</code></pre>\n<p>In data above, each row is a &quot;data item&quot;, and each column represents a &quot;dimension&quot;. For example, the meanings of columns above are: &quot;data&quot;, &quot;AQI&quot;, &quot;PM2.5&quot;, &quot;PM10&quot;, &quot;carbon monoxide level&quot;, &quot;nitrogen dioxide level&quot;, and &quot;sulfur dioxide level&quot;.</p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>The name of a data item.</p>\n"},"value":{"type":["Array"],"description":"<p>The value of a data item.</p>\n"},"lineStyle":{"type":["Object"],"description":"<p>Line style.</p>\n"},"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":2},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":0.45},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":2},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":0.45}}}}}}}},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in parallel.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in parallel, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"linear"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong>Lines graph</strong></p>\n<p>It is used to draw the line data with the information about &quot;from&quot; and &quot;to&quot;; and it is applied fot drawing the air routes on map, which visualizes these routes.</p>\n<p>ECharts 2.x uses the <code class=\"codespan\">markLine</code> to draw the migrating effect, while in ECharts 3, the <code class=\"codespan\">lines</code> graph is recommended to be used.</p>\n","properties":{"type":{"type":["string"],"description":"","default":"'lines'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;cartesian2d&#39;</code></p>\n<p>  Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-lines.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-lines.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">&#39;geo&#39;</code></p>\n<p>  Use geographic coordinate, with <a href=\"#series-lines.geoIndex\">geoIndex</a> to assign the corresponding geographic coordinate components.</p>\n</li>\n</ul>\n","default":"'geo'"},"xAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#xAxis\">x axis</a> to combine with, which is  useful for multiple x axes in one chart.</p>\n","default":0},"yAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#yAxis\">y axis</a> to combine with, which is  useful for multiple y axes in one chart.</p>\n","default":0},"geoIndex":{"type":["number"],"description":"<p>Index of <a href=\"#geo\">geographic coordinate</a> to combine with, which is useful for multiple geographic axes in one chart.</p>\n","default":0},"polyline":{"type":["boolean"],"description":"<p>If draw as a polyline.</p>\n<p>Default to be <code class=\"codespan\">false</code>. Can only draw a two end straight line.</p>\n<p>If it is set true, <a href=\"#series-lines.data.coords\">data.coords</a> can have more than two coord to draw a polyline. It is useful when visualizing GPS track data. See example <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=lines-bmap-bus\" target=\"_blank\">lines-bus</a>.</p>\n","default":false},"effect":{"type":["Object"],"description":"<p>The setting about the special effects of lines.</p>\n<p><strong>Tips: </strong>All the graphs with trail effect should be put on a individual layer, which means that <a href=\"#series-lines.zlevel\">zlevel</a> need to be different with others. And the animation (<a href=\"#series-lines.animation\">animation</a>: false)  of this layer is suggested to be turned off at the meanwhile. Otherwise, other graphic elements in other series and the <a href=\"#series-lines.label\">label</a> of animation would produce unnecessary ghosts.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show special effect.</p>\n","default":false},"period":{"type":["number"],"description":"<p>The duration of special effect, which unit is second.</p>\n","default":4},"delay":{"type":["number","Function"],"description":"<p>Effect animation delay. Can be number or callback function.</p>\n"},"constantSpeed":{"type":["number"],"description":"<p>If symbol movement of special effect has a constant speed, which unit is pixel per second. <a href=\"#series-lines.effect.period\">period</a> will be ignored if <code class=\"codespan\">constantSpeed</code> is larger than 0.</p>\n","default":0},"symbol":{"type":["string"],"description":"<p>The symbol of special effect.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>The above example uses a custom path of plane shape.</p>\n<p><strong>Tip:</strong> Ahe angle of symbol changes as the tangent of track changes. If you use a custom path, you should make sure that the path shape are upward oriented. It would ensure that the symbol will always move toward the right moving direction when the symbol moves along the track.</p>\n","default":"'circle'"},"symbolSize":{"type":["Array","number"],"description":"<p>The symbol size of special effect, which could be set as single number such as <code class=\"codespan\">10</code>. What&#39;s more, arrays could be used to decribe the width and height respectively. For instance, <code class=\"codespan\">[20, 10]</code> indicates <code class=\"codespan\">20</code> for width and  <code class=\"codespan\">10</code> for height.</p>\n","default":3},"color":{"type":["Color"],"description":"<p>The color of special effect symbol, which defaults to be same with <a href=\"#series-lines.lineStyle.color\">lineStyle.color</a>.</p>\n"},"trailLength":{"type":["number"],"description":"<p>The length of trail of special effect.  The values from 0 to 1 could be set. Trail would be longer as the the value becomes larger.</p>\n","default":0.2},"loop":{"type":["boolean"],"description":"<p>Whether to loop the special effect animation.</p>\n","default":true}}},"large":{"type":["boolean"],"description":"<p>Whether to enable the optimization of large-scale lines graph. It could be enabled when there is a particularly large number of data(&gt;=5k) .</p>\n<p>After being enabled, <a href=\"#series-lines.largeThreshold\">largeThreshold</a> can be used to indicate the minimum number for turning on the optimization.</p>\n<p>The style of a single data item can&#39;t be customized</p>\n","default":true},"largeThreshold":{"type":["number"],"description":"<p>The threshold enabling the drawing optimization.</p>\n","default":2000},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-line.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n","default":"'none'"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class=\"codespan\">symbolSize</code>.</p>\n","default":10},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<p>Supports callback functions, in the form of:</p>\n<pre><code class=\"lang-js\">(params: Object) =&gt; Color\n</code></pre>\n<p>Input parameters are <code class=\"codespan\">seriesIndex</code>, <code class=\"codespan\">dataIndex</code>, <code class=\"codespan\">data</code>, <code class=\"codespan\">value</code>, and etc. of data item.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'self-adaptive'"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":0.5},"curveness":{"type":["number"],"description":"<p>The curveness of edge. The values from 0 to 1 could be set. The curveness would be larger as the the value becomes larger.</p>\n","default":0}}},"label":{"type":["Object"],"description":"<p>Label settings. Does not work when <a href=\"#series-lines.polyline\">polyline</a> is <code class=\"codespan\">true</code>.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string"],"description":"<p>the position of label, options:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;end&#39;</code></li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"emphasis":{"type":["Object"],"description":"<p>Emphasis style.</p>\n","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string"],"description":"<p>the position of label, options:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;end&#39;</code></li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"progressive":{"type":["number"],"description":"<p><code class=\"codespan\">progressive</code> specifies the amount of graphic elements that can be rendered within a frame (about 16ms) if &quot;progressive rendering&quot; enabled.</p>\n<p>When data amount is from thousand to more than 10 million, it will take too long time to render all of the graphic elements. Since ECharts 4, &quot;progressive rendering&quot; is supported in its workflow, which processes and renders data chunk by chunk alone with each frame, avoiding to block the UI thread of the browser.</p>\n<p>Set <code class=\"codespan\">progressive: 0</code> to disable progressive permanently. By default, progressive is auto-enabled when data amount is bigger than <code class=\"codespan\">progressiveThreshold</code>.</p>\n","default":400},"progressiveThreshold":{"type":["number"],"description":"<p>If current data amount is over the threshold, &quot;progressive rendering&quot; is enabled.</p>\n","default":3000},"data":{"type":["Array"],"description":"<p>The data set of lines.</p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>the name of data.</p>\n"},"coords":{"type":["Array"],"description":"<p>An array includes two ore more than two coordinates. Each coordinate could be <code class=\"codespan\">[x, y]</code> in <a href=\"#grid\">rectangular coordinate</a> and <code class=\"codespan\">[lng, lat]</code> in <a href=\"#geo\">geographic coordinate</a>.</p>\n"},"lineStyle":{"type":["Object"],"description":"<p>The line style of this data item.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string"],"description":"<p>the position of label, options:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;end&#39;</code></li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string"],"description":"<p>the position of label, options:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;end&#39;</code></li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-lines.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-lines.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-lines.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li>Assign coordinate according to container with <a href=\"#series-lines.markPoint.data.x\">x</a>, <a href=\"#series-lines.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["Object"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-lines.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class=\"codespan\">symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li>Assign coordinate according to container with <a href=\"#series-lines.markLine.data.0.x\">x</a>, <a href=\"#series-lines.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<pre><code>data: [\n    [\n        {\n            name: &#39;Mark line between two points&#39;,\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'starting point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'ending point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code class=\"codespan\">data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li>Specify the coordinate in screen coordinate system using <a href=\"#series-lines.markArea.data.0.x\">x</a>, <a href=\"#series-lines.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code class=\"codespan\">5</code>), or percent (e.g., the value is <code class=\"codespan\">&#39;35%&#39;</code>).</li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n    [\n        {\n            name: &#39;Mark area in two screen points&#39;,\n            x: 100,\n            y: 100\n        }, {\n            x: &#39;90%&#39;,\n            y: &#39;10%&#39;\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'start'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'end'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"clip":{"type":["boolean"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.4.0</code></p>\n</blockquote>\n<p>If clip the overflow on the coordinate system. Clip results varies between series:</p>\n<ul>\n<li>Scatter:Ignore the symbols exceeds the coordinate system. Not clip the elements.</li>\n<li>Bar:Clip all the overflowed. With bar width kept.</li>\n<li>Line:Clip the overflowed line.</li>\n<li>Lines: Clip all the overflowed.</li>\n<li>Candlestick: Ignore the elements exceeds the coordinate system.</li>\n<li>Custom: Clip all the olverflowed.</li>\n</ul>\n<p>All these series have default value <code class=\"codespan\">true</code> except custom series. Set it to <code class=\"codespan\">false</code> if you don&#39;t want to clip.</p>\n","default":true},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in lines graph.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in lines graph, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},{"type":["Object"],"description":"<p><strong>relation graph</strong></p>\n<p>Graph is a diagram to represent <a href=\"#series-graph.nodes\">nodes</a> and the <a href=\"#series-graph.links\">links</a> connecting nodes.</p>\n<p><strong>Example: </strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=graph&reset=1&edit=1\" width=\"600\" height=\"400\"><iframe />\n\n\n","properties":{"type":{"type":["string"],"description":"","default":"'graph'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"legendHoverLink":{"type":["boolean"],"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n","default":true},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">null</code> or <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>  No coordinate.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">&#39;cartesian2d&#39;</code></p>\n<p>  Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-graph.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-graph.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">&#39;polar&#39;</code></p>\n<p>  Use polar coordinates, with <a href=\"#series-graph.polarIndex\">polarIndex</a> to assign the corresponding polar coordinate component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">&#39;geo&#39;</code></p>\n<p>  Use geographic coordinate, with <a href=\"#series-graph.geoIndex\">geoIndex</a> to assign the corresponding geographic coordinate components.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">&#39;none&#39;</code></p>\n<p>  Do not use coordinate system.</p>\n</li>\n</ul>\n","default":null},"xAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#xAxis\">x axis</a> to combine with, which is  useful for multiple x axes in one chart.</p>\n","default":0},"yAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#yAxis\">y axis</a> to combine with, which is  useful for multiple y axes in one chart.</p>\n","default":0},"polarIndex":{"type":["number"],"description":"<p>Index of <a href=\"#polar\">polar coordinate</a> to combine with, which is useful for multiple polar axes in one chart.</p>\n","default":0},"geoIndex":{"type":["number"],"description":"<p>Index of <a href=\"#geo\">geographic coordinate</a> to combine with, which is useful for multiple geographic axes in one chart.</p>\n","default":0},"calendarIndex":{"type":["number"],"description":"<p>Index of <a href=\"#calendar\">calendar coordinates</a> to combine with, which is useful for multiple calendar coordinates in one chart.</p>\n","default":0},"hoverAnimation":{"type":["boolean"],"description":"<p>Whether to enable the highlight animation effect of mousr hover node.</p>\n"},"center":{"type":["Array"],"description":"<p>Center of current view-port.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">center: [115.97, 29.71]\n</code></pre>\n"},"zoom":{"type":["number"],"description":"<p>Zoom rate of current view-port.</p>\n","default":1},"layout":{"type":["string"],"description":"<p>Graph layout.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><p><code class=\"codespan\">&#39;none&#39;</code> No any layout, use  <a href=\"#series-graph.data.x\">x</a>,  <a href=\"#series-graph.data.y\">y</a> provided in <a href=\"#series-graph.data\">node</a> as the position of node.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;circular&#39;</code> Adopt circular layout, see the example <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=graph-circular-layout\" target=\"_blank\">Les Miserables</a>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;force&#39;</code> Adopt force-directed layout, see the example <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=graph-force\" target=\"_blank\">Force</a>, the detail about configrations of layout are in <a href=\"#series-graph.force\">graph.force</a></p>\n</li>\n</ul>\n","default":"'none'"},"circular":{"type":["Object"],"description":"<p>Configuration about circular layout.</p>\n","properties":{"rotateLabel":{"type":["boolean"],"description":"<p>Whether to rotate the label automatically.</p>\n","default":false}}},"force":{"type":["Object"],"description":"<p>Configuration items about force-directed layout. Force-directed layout simulates spring/charge model, which will add a repulsion between 2 nodes and add a attraction between 2 nodes of each edge. In each iteration nodes will move under the effect of repulsion and attraction. After several iterations, the nodes will be static in a balanced position. As a result, the energy local minimum of this whole model will be realized.</p>\n<p>The result of force-directed layout has a good symmetries and clustering, which is also aesthetically pleasing.</p>\n","properties":{"initLayout":{"type":["string"],"description":"<p>The initial layout before force-directed layout, which will influence on the result of force-directed layout.</p>\n<p>It defaults not to do any layout and use <a href=\"#series-graph.data.x\">x</a>, <a href=\"#series-graph.data.y\">y</a> provided in <a href=\"#series-graph.data\">node</a> as the position of node. If it doesn&#39;t exist, the position will be generated randomly.</p>\n<p>You can also use circular layout <code class=\"codespan\">&#39;circular&#39;</code>.</p>\n"},"repulsion":{"type":["Array","number"],"description":"<p>The repulsion factor between nodes. The repulsion will be stronger and the distance between 2 nodes becomes further as this value becomes larger.</p>\n<p>It can be an array to represent the range of repulsion. In this case larger value have larger repulsion and smaller value will have smaller repulsion.</p>\n","default":50},"gravity":{"type":["number"],"description":"<p>The gravity factor enforcing nodes approach to the center. The nodes will be closer to the center as the value becomes larger.</p>\n","default":0.1},"edgeLength":{"type":["Array","number"],"description":"<p>The distance between 2 nodes on edge. This distance is also affected by <a href=\"#series-graph.force.repulsion\">repulsion</a>.</p>\n<p>It can be an array to represent the range of edge length. In this case edge with larger value will be shorter, which means two nodes are closer. And edge with smaller value will be longer.</p>\n","default":30},"layoutAnimation":{"type":["boolean"],"description":"<p>Because the force-directed layout will be steady after several iterations, this parameter will be decide whether to show the iteration animation of layout. It is not recommended to be closed on browser when there are a lot of node data (&gt;100) as the layout process will cause browser to hang.</p>\n","default":true},"friction":{"type":["number"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.5.0</code></p>\n</blockquote>\n<p>It will slow down the nodes&#39; movement. The value range is from 0 to 1.</p>\n<p>But it is still an experimental option, see <a href=\"https://github.com/apache/incubator-echarts/issues/11024\" target=\"_blank\">#11024</a>.</p>\n","default":0.6}}},"roam":{"type":["boolean","string"],"description":"<p>Whether to enable mouse zooming and translating. <code class=\"codespan\">false</code> by default. If either zooming or translating is wanted, it can be set to <code class=\"codespan\">&#39;scale&#39;</code> or <code class=\"codespan\">&#39;move&#39;</code>. Otherwise, set it to be <code class=\"codespan\">true</code> to enable both.</p>\n","default":false},"nodeScaleRatio":{"type":["number"],"description":"<p>Related zooming ratio of nodes when mouse zooming in or out. When it is set as 0, the node will not zoom as the mouse zooms.</p>\n","default":0.6},"draggable":{"type":["boolean"],"description":"<p>If node is draggable. Only available when using force-directed layout.</p>\n","default":false},"symbol":{"type":["string","Function"],"description":"<p>Symbol of node of relation graph.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'circle'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>node of relation graph symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":10},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of node of relation graph symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of node of relation graph symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"focusNodeAdjacency":{"type":["boolean"],"description":"<p>Whether to focus/highlight the hover node and it&#39;s adjacencies.</p>\n","default":false},"edgeSymbol":{"type":["Array","string"],"description":"<p>Symbol of two ends of edge line.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">edgeSymbol: [&#39;circle&#39;, &#39;arrow&#39;]\n</code></pre>\n","default":"['none', 'none']"},"edgeSymbolSize":{"type":["Array","number"],"description":"<p>Size of symbol of two ends of edge line. Can be an array or a single number.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">// Start symbol has size 5 and end symbol has size 10\nsymbolSize: [5, 10],\n// All has size 10\nsymbolSize: 10\n</code></pre>\n","default":10},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n","default":"'pointer'"},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of , <code class=\"codespan\">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"color":{"type":["Color","Function"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n<p>Supports callback functions, in the form of:</p>\n<pre><code class=\"lang-js\">(params: Object) =&gt; Color\n</code></pre>\n<p>Input parameters are <code class=\"codespan\">seriesIndex</code>, <code class=\"codespan\">dataIndex</code>, <code class=\"codespan\">data</code>, <code class=\"codespan\">value</code>, and etc. of data item.</p>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"lineStyle":{"type":["Object"],"description":"<p>The style of edge line. <a href=\"#series-graph.lineStyle.color\">lineStyle.color</a> can be <code class=\"codespan\">&#39;source&#39;</code> or <code class=\"codespan\">&#39;target&#39;</code>, which will use the color of source node or target node.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#aaa'"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":0.5},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"edgeLabel":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>If show label on edge.</p>\n","default":false},"position":{"type":["string"],"description":"<p>Label position, options:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;end&#39;</code></li>\n</ul>\n","default":"'middle'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"edgeLabel":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>If show label on edge.</p>\n","default":false},"position":{"type":["string"],"description":"<p>Label position, options:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;end&#39;</code></li>\n</ul>\n","default":"'middle'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"categories":{"type":["Array"],"description":"<p>The categories of node, which is optional.\nIf there is a classification of nodes, the category of each node can be assigned through <a href=\"#series-graph.data.category\">data[i].category</a>. And the style of category will also be applied to the style of nodes. <code class=\"codespan\">categories</code> can also be used in <a href=\"#legend\">legend</a>.</p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Name of category, which is used to correspond with <a href=\"#legend\">legend</a> and the content of <a href=\"#tooltip\">tooltip</a>.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of node of this category.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>node of this category symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of node of this category symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of node of this category symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>The style of node in this category.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"<p>The label style of node in this category.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"inside"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"data":{"type":["Array"],"description":"<p>Nodes list of graph.</p>\n<pre><code class=\"lang-js\">data: [{\n    name: &#39;1&#39;,\n    x: 10,\n    y: 10,\n    value: 10\n}, {\n    name: &#39;2&#39;,\n    x: 100,\n    y: 100,\n    value: 20,\n    symbolSize: 20,\n    itemStyle: {\n        color: &#39;red&#39;\n    }\n}]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Name of data item.</p>\n"},"x":{"type":["number"],"description":"<p><code class=\"codespan\">x</code> value of node position.</p>\n"},"y":{"type":["number"],"description":"<p><code class=\"codespan\">y</code> value of node position.</p>\n"},"fixed":{"type":["boolean"],"description":"<p>If node are fixed when doing force directed layout.</p>\n"},"value":{"type":["number","Array"],"description":"<p>Value of data item.</p>\n"},"category":{"type":["number"],"description":"<p>Index of category which the data item belongs to.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of node of this category.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>node of this category symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of node of this category symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of node of this category symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>The style of this node.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"<p>The label style of this node.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"nodes":{"type":["Array"],"description":"<p>Alias of <a href=\"#series-graph.data\">data</a></p>\n"},"links":{"type":["Array"],"description":"<p>Relational data between nodes. Example:</p>\n<pre><code class=\"lang-js\">links: [{\n    source: &#39;n1&#39;,\n    target: &#39;n2&#39;\n}, {\n    source: &#39;n2&#39;,\n    target: &#39;n3&#39;\n}]\n</code></pre>\n","items":{"type":"Object","properties":{"source":{"type":["string","number"],"description":"<p>A string representing the <a href=\"#series-graph.data.name\">name of source node</a> on edge. Can also be a number representing the node index.</p>\n"},"target":{"type":["string","number"],"description":"<p>A string representing the <a href=\"#series-graph.data.name\">name of target node</a> on edge. Can also be a number representing node index.</p>\n"},"value":{"type":["number"],"description":"<p>value of edge, can be mapped to edge length in force graph.</p>\n"},"lineStyle":{"type":["Object"],"description":"<p>Line style of edges.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>The curveness of edge, supporting values from 0 to 1. The curveness will be larger as the value becomes lager.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>If show label on edge.</p>\n","default":false},"position":{"type":["string"],"description":"<p>Label position, options:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;end&#39;</code></li>\n</ul>\n","default":"'middle'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>If show label on edge.</p>\n","default":false},"position":{"type":["string"],"description":"<p>Label position, options:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;end&#39;</code></li>\n</ul>\n","default":"'middle'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"symbol":{"type":["Array","string"],"description":"<p>Symbol of edge ends. Can be an array with two item to specify two ends, or a string specifies both ends.</p>\n"},"symbolSize":{"type":["Array","string"],"description":"<p>Symbol size of edge ends. Can be an array with two item to specify two ends, or a string specifies both ends.</p>\n"},"ignoreForceLayout":{"type":["boolean"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.5.0</code></p>\n</blockquote>\n<p>Prevent this edge from force layout calculating.</p>\n","default":false}}}},"edges":{"type":["Array"],"description":"<p>Alias of <a href=\"#series-graph.links\">links</a></p>\n"},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-graph.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-graph.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-graph.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-graph.markPoint.data.x\">x</a>, <a href=\"#series-graph.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-graph.markPoint.data.coord\">coord</a> attribute, in which <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-graph.markPoint.data.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-graph.markPoint.data.valueIndex\">valueIndex</a> or <a href=\"#series-graph.markPoint.data.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n    {\n        name: &#39;maximum&#39;,\n        type: &#39;max&#39;\n    }, \n    {\n        name: &#39;coordinate&#39;,\n        coord: [10, 20]\n    }, {\n        name: &#39;fixed x position&#39;,\n        yAxis: 10,\n        x: &#39;90%&#39;\n    }, \n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Available when using <a href=\"#series-graph.markPoint.data.type\">type</a> it is used to assign maximum value and minimum value in dimensions, it could be <code class=\"codespan\">0</code> (xAxis, radiusAxis), <code class=\"codespan\">1</code> (yAxis, angleAxis), and use the first value axis dimension by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-graph.markPoint.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["Object"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-graph.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class=\"codespan\">symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-graph.markLine.data.0.x\">x</a>, <a href=\"#series-graph.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-graph.markLine.data.0.coord\">coord</a> attribute, in which <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-graph.markLine.data.0.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-graph.markLine.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-graph.markLine.data.0.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n<li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code class=\"codespan\">xAxis</code> or <code class=\"codespan\">yAxis</code>. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a> for example.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p>You may also set the type of mark line through <code class=\"codespan\">type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code class=\"codespan\">valueIndex</code>.</p>\n<pre><code>data: [\n    {\n        name: &#39;average line&#39;,\n        // &#39;average&#39;, &#39;min&#39;, and &#39;max&#39; are supported\n        type: &#39;average&#39;\n    },\n    {\n        name: &#39;Horizontal line with Y value at 100&#39;,\n        yAxis: 100\n    },\n    [\n        {\n            // Use the same name with starting and ending point\n            name: &#39;Minimum to Maximum&#39;,\n            type: &#39;min&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n    [\n        {\n            name: &#39;Markline between two points&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [{\n        // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n        yAxis: &#39;max&#39;,\n        x: &#39;90%&#39;\n    }, {\n        type: &#39;max&#39;\n    }],\n    [\n        {\n            name: &#39;Mark line between two points&#39;,\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n<li><code class=\"codespan\">&#39;median&#39;</code> median value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-graph.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-graph.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'starting point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n<li><code class=\"codespan\">&#39;median&#39;</code> median value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-graph.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-graph.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'ending point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code class=\"codespan\">data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li><p>Specify the coordinate in screen coordinate system using <a href=\"#series-graph.markArea.data.0.x\">x</a>, <a href=\"#series-graph.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code class=\"codespan\">5</code>), or percent (e.g., the value is <code class=\"codespan\">&#39;35%&#39;</code>).</p>\n</li>\n<li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using\n<a href=\"#series-graph.markArea.data.0.coord\">coord</a>, which can be also set as <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> (e.g, <code class=\"codespan\">coord: [23, &#39;min&#39;]</code>, or <code class=\"codespan\">coord: [&#39;average&#39;, &#39;max&#39;]</code>).</p>\n</li>\n</ol>\n<ol start=\"3\">\n<li>Locate the point on the min value or max value of <code class=\"codespan\">series.data</code> using <a href=\"#series-graph.markArea.data.0.type\">type</a>, where <a href=\"#series-graph.markArea.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-graph.markPoint.data.0.valueDim\">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</li>\n<li>If in cartesian, you can only specify <code class=\"codespan\">xAxis</code> or <code class=\"codespan\">yAxis</code> to define a mark area based on only X or Y axis, see sample <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a></li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n\n    [\n        {\n            name: &#39;From average to max&#39;,\n            type: &#39;average&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n\n    [\n        {\n            name: &#39;Mark area between two points in data coordiantes&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [\n        {\n            name: &#39;From 60 to 80&#39;,\n            yAxis: 60\n        },\n        {\n            yAxis: 80\n        }\n    ], [\n        {\n            name: &#39;Mark area covers all data&#39;\n            coord: [&#39;min&#39;, &#39;min&#39;]\n        },\n        {\n            coord: [&#39;max&#39;, &#39;max&#39;]\n        }\n    ],\n    [\n        {\n            name: &#39;Mark area in two screen points&#39;,\n            x: 100,\n            y: 100\n        }, {\n            x: &#39;90%&#39;,\n            y: &#39;10%&#39;\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> max value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> min value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-graph.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-graph.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'start'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> max value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> min value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-graph.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-graph.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'end'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between  component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'center'"},"top":{"type":["string","number"],"description":"<p>Distance between  component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"'middle'"},"right":{"type":["string","number"],"description":"<p>Distance between  component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"<p>Distance between  component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"width":{"type":["string","number"],"description":"<p>Width of  component. </p>\n","default":"auto"},"height":{"type":["string","number"],"description":"<p>Height of  component. </p>\n","default":"auto"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong> Sankey diagram </strong>\nSankey diagram is a specific type of streamgraph (can also be seen as a directed acyclic graph) in which the width of each branch is shown proportionally to the flow quantity. These graphs are typically used to visualize energy or material or cost transfers between processes. They can also visualize the energy accounts, material flow accounts on a regional or national level, and also the breakdown of cost of item or services.</p>\n<p><strong>Example: </strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sankey-energy&edit=1&reset=1\" width=\"700\" height=\"580\"><iframe />\n\n\n\n<p><br> \n<strong>Visual Encoding: </strong></p>\n<p>The Sankey diagram encodes each <code class=\"codespan\">node</code> of the raw data into a small rectangle. Different nodes are presented in different colors as far as possible. The <code class=\"codespan\">label</code> next to the small rectangul encodes the name of the node.</p>\n<p>In addition, the edge between two small rectangles in the diagram encodes the <code class=\"codespan\">link</code> of the raw data. The width of edge is shown proportionally to the <code class=\"codespan\">value</code> of <code class=\"codespan\">link</code>.</p>\n","properties":{"type":{"type":["string"],"description":"","default":"'sankey'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between sankey component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"5%"},"top":{"type":["string","number"],"description":"<p>Distance between sankey component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"5%"},"right":{"type":["string","number"],"description":"<p>Distance between sankey component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n","default":"20%"},"bottom":{"type":["string","number"],"description":"<p>Distance between sankey component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n","default":"5%"},"width":{"type":["string","number"],"description":"<p>Width of sankey component. </p>\n","default":null},"height":{"type":["string","number"],"description":"<p>Height of sankey component. </p>\n","default":null},"nodeWidth":{"type":["number"],"description":"<p>The node width of rectangle in Sankey diagram.</p>\n","default":20},"nodeGap":{"type":["number"],"description":"<p>The gap between any two rectangles in each column of the Sankey diagram.</p>\n","default":8},"nodeAlign":{"type":["string"],"description":"<p>Controls the horizontal alignment of nodes in the diagram. </p>\n<p>May be:</p>\n<ul>\n<li><p><code class=\"codespan\">left</code>: initial nodes (those with no incoming links) are aligned to the left of the diagram.</p>\n</li>\n<li><p><code class=\"codespan\">right</code>: terminal nodes (those with no outgoing links) are aligned to the right of the diagram.</p>\n</li>\n<li><p><code class=\"codespan\">justify</code>: initial and terminal nodes are aligned on the left and right edges. </p>\n</li>\n</ul>\n<p>Note when <a href=\"#series-sankey.orient\">orient</a> is <code class=\"codespan\">vertical</code>, <code class=\"codespan\">nodeAlign</code> controls vertical alignment.</p>\n","default":"'justify'"},"layoutIterations":{"type":["number"],"description":"<p>The iterations of layout, which is used to iteratively optimize the position of the nodes and edges in the Sankey diagram to reduce the overlapping between nodes and edges. The default value is <code class=\"codespan\">32</code>. If you want the order of the nodes in the chart to be the same with the order in the original <a href=\"#series-sankey.data\">data</a>, you can set the value to be <code class=\"codespan\">0</code>.</p>\n","default":32},"orient":{"type":["string"],"description":"<p>The layout direction of the nodes in the Sankey diagram, which can be horizontal from left to right or vertical from top to bottom. The corresponding parameter values ​​are <code class=\"codespan\">horizontal</code> or <code class=\"codespan\">vertical</code>.</p>\n","default":"'horizontal'"},"draggable":{"type":["boolean"],"description":"<p>The drag-and-drop interaction of the node, which is enabled by default. After opening, the user can drag any node in the Sankey diagram to any position. To turn this interaction off, simply set the value to <code class=\"codespan\">false</code>.</p>\n","default":true},"focusNodeAdjacency":{"type":["boolean","string"],"description":"<p>Support when mouse hovering over a node or an edge, the adjacent nodes and edges are also highlighted. Default off, can be manually opened.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class=\"codespan\">false</code>: When hovering over a node or an edge, only the hovered node or edge is highlighted.</li>\n<li><code class=\"codespan\">true</code>: the same as <code class=\"codespan\">&#39;allEdges&#39;</code>.</li>\n<li><code class=\"codespan\">&#39;allEdges&#39;</code>: When hovering over a node, all of the adjacent edges and nodes are highlighted. When hovering over an edge, the adjacent nodes are highlighted.</li>\n<li><code class=\"codespan\">&#39;outEdges&#39;</code>: When hovering over a node, the outcoming edges and its adjacent nodes are highlighted. When hovering over an edge, the adjacent nodes are highlighted.</li>\n<li><code class=\"codespan\">&#39;inEdges&#39;</code>: When hovering over a node, the incoming edges and its adjacent nodes are highlighted. When hovering over an edge, the adjacent nodes are highlighted.</li>\n</ul>\n","default":false},"levels":{"type":["Array"],"description":"<p>The setting of each layer of Sankey diagram. Can be set layer by layer, as follows:</p>\n<pre><code class=\"lang-js\">levels: [{\n    depth: 0,\n    itemStyle: {\n        color: &#39;#fbb4ae&#39;\n    },\n    lineStyle: {\n        color: &#39;source&#39;,\n        opacity: 0.6\n    }\n}, {\n    depth: 1,\n    itemStyle: {\n        color: &#39;#b3cde3&#39;\n    },\n    lineStyle: {\n        color: &#39;source&#39;,\n        opacity: 0.6\n    }\n}]\n</code></pre>\n<p>You can also only set a certain layer:</p>\n<pre><code class=\"lang-js\">levels: [{\n    depth: 3,\n    itemStyle: {\n        color: &#39;#fbb4ae&#39;\n    },\n    lineStyle: {\n        color: &#39;source&#39;,\n        opacity: 0.6\n    }\n}]\n</code></pre>\n","items":{"type":"Object","properties":{"depth":{"type":["number"],"description":"<p>Specify which layer is set, value starts from 0.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Specify the node style of the specific layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"lineStyle":{"type":["Object"],"description":"<p>Specify the outEdge style of the specific layer. in which <a href=\"#series-sankey.lineStyle.color\">lineStyle.color</a> can be assigned to the value of <code class=\"codespan\">&#39;source&#39;</code> of <code class=\"codespan\">&#39;target&#39;</code>, then the OutEdge will automatically take the source node or target node color as its own color.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>The color of the edge in Sankey diagram.</p>\n","default":"\"'#314656'\""},"opacity":{"type":["number"],"description":"<p>The opacity of the edge in Sankey diagram.</p>\n","default":0.2},"curveness":{"type":["number"],"description":"<p>The curveness of the edge in Sankey diagram.</p>\n","default":0.5},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}}}}},"label":{"type":["Object"],"description":"<p><code class=\"codespan\">label</code> describes the text label style in each rectangular node.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'right'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>The style of node rectangle in Sankey diagram.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"'#aaa'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"lineStyle":{"type":["Object"],"description":"<p>The edge style of Sankey diagram, in which <a href=\"#series-sankey.lineStyle.color\">lineStyle.color</a> can be assigned to the value of <code class=\"codespan\">&#39;source&#39;</code> of <code class=\"codespan\">&#39;target&#39;</code>, then the edge will automatically take the source node or target node color as its own color.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>The color of the edge in Sankey diagram.</p>\n","default":"\"'#314656'\""},"opacity":{"type":["number"],"description":"<p>The opacity of the edge in Sankey diagram.</p>\n","default":0.2},"curveness":{"type":["number"],"description":"<p>The curveness of the edge in Sankey diagram.</p>\n","default":0.5},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>The color of the edge in Sankey diagram.</p>\n","default":"\"'#314656'\""},"opacity":{"type":["number"],"description":"<p>The opacity of the edge in Sankey diagram.</p>\n","default":0.2},"curveness":{"type":["number"],"description":"<p>The curveness of the edge in Sankey diagram.</p>\n","default":0.5},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}}}},"data":{"type":["Array"],"description":"<p>The nodes list of the sankey diagram.</p>\n<pre><code class=\"lang-js\">data: [{\n    name: &#39;node1&#39;,\n    // This attribute decides the layer of the current node.\n    depth: 0\n}, {\n    name: &#39;node2&#39;,\n    depth: 1\n}]\n</code></pre>\n<p><strong>Notice:</strong> The name of the node cannot be repeated.</p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>The name of the node.</p>\n"},"value":{"type":["number"],"description":"<p>The value of the node, which can used to determine the height of the node in horizontal orient or width in the vertical orient.</p>\n"},"depth":{"type":["number"],"description":"<p>The layer of the node, value starts from 0.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>The style of this node.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"<p>The lable style of this node.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"nodes":{"type":["Array"],"description":"<p>Equals to <a href=\"#series-sankey.data\">data</a></p>\n"},"links":{"type":["Array"],"description":"<p>The links between nodes. <strong>Notes: The Sankey diagram theoretically only supports Directed Acyclic Graph(DAG), so please make sure that there is no cycle in the links.</strong> For instance:</p>\n<pre><code class=\"lang-js\">links: [{\n    source: &#39;n1&#39;,\n    target: &#39;n2&#39;\n}, {\n    source: &#39;n2&#39;,\n    target: &#39;n3&#39;\n}]\n</code></pre>\n","items":{"type":"Object","properties":{"source":{"type":["string"],"description":"<p>The <a href=\"#series-sankey.data.name\">name of source node</a> of edge</p>\n"},"target":{"type":["string"],"description":"<p>The <a href=\"#series-sankey.data.name\">name of target node</a> of edge</p>\n"},"value":{"type":["number"],"description":"<p>The value of edge, which decides the width of edge.</p>\n"},"lineStyle":{"type":["Object"],"description":"<p>The line stlye of edge.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>The color of the edge in Sankey diagram.</p>\n","default":"\"'#314656'\""},"opacity":{"type":["number"],"description":"<p>The opacity of the edge in Sankey diagram.</p>\n","default":0.2},"curveness":{"type":["number"],"description":"<p>The curveness of the edge in Sankey diagram.</p>\n","default":0.5},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>The color of the edge in Sankey diagram.</p>\n","default":"\"'#314656'\""},"opacity":{"type":["number"],"description":"<p>The opacity of the edge in Sankey diagram.</p>\n","default":0.2},"curveness":{"type":["number"],"description":"<p>The curveness of the edge in Sankey diagram.</p>\n","default":0.5},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}}}}}}},"edges":{"type":["Array"],"description":"<p>Equals to <a href=\"#series-sankey.links\">links</a></p>\n"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"'linear'"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong>Funnel chart</strong></p>\n<p><strong>sample: </strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=funnel&reset=1&edit=1\" width=\"600\" height=\"400\"><iframe />\n\n\n","properties":{"type":{"type":["string"],"description":"","default":"'funnel'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"min":{"type":["number"],"description":"<p>The specified minimum value.</p>\n","default":0},"max":{"type":["number"],"description":"<p>The specified maximum value.</p>\n","default":100},"minSize":{"type":["number","string"],"description":"<p>The mapped width from minimum data value <a href=\"#series-funnel.min\">min</a>.</p>\n<p>It can be absolute pixel and also the percentage of <a href=\"#series-funnel.width\">layout width</a>. If you don&#39;t want the graph of minimum value to be a triangle, you can set up this property larger than 0.</p>\n","default":"'0%'"},"maxSize":{"type":["number","string"],"description":"<p>The mapped width from maximum data value <a href=\"#series-funnel.max\">max</a>.</p>\n<p>It can be absolute pixel and also the percentage of <a href=\"#series-funnel.width\">layout width</a>.</p>\n","default":"'100%'"},"sort":{"type":["string","Function"],"description":"<p>Data sorting, which can be whether <code class=\"codespan\">&#39;ascending&#39;</code>, <code class=\"codespan\">&#39;descending&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code>(in data order) or a function, which is the same as <code class=\"codespan\">Array.prototype.sort(function (a, b) { ... })</code>;</p>\n","default":"'descending'"},"gap":{"type":["number"],"description":"<p>Gap between each trapezoid.</p>\n","default":0},"legendHoverLink":{"type":["boolean"],"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n","default":true},"funnelAlign":{"type":["string"],"description":"<p>Horizontal align. Defaults to align center. Can be &#39;left&#39;, &#39;right&#39;, &#39;center&#39;.</p>\n","default":"'center'"},"label":{"type":["Object"],"description":"<p>Text label of funnel chart, to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"","default":false},"position":{"type":["string"],"description":"<p>Label position.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left side of funnel chart. The corresponding trapezoid would be related to through <a href=\"#series-funnel.labelLine\">visual guide line</a>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p> Right side of funnel chart. The corresponding trapezoid would be related to through <a href=\"#series-funnel.labelLine\">visual guide line</a>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p>  Inside the trapezoid of funnel chart.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;insideRight&#39;</code></p>\n<p>  Right inside the trapezoid of funnel chart.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;insideLeft&#39;</code></p>\n<p>  Left inside the trapezoid of funnel chart.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;leftTop&#39;</code></p>\n<p>  Top-left of funnel chart.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;leftBottom&#39;</code></p>\n<p>  Bottom-left of funnel chart.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;rightTop&#39;</code></p>\n<p>  Top-right side of funnel chart.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;rightBottom&#39;</code></p>\n<p>  Bottom-right side of funnel chart.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;inner&#39;</code> equals to <code class=\"codespan\">&#39;inside&#39;</code>.</p>\n</li>\n<li><code class=\"codespan\">&#39;center&#39;</code> equals to <code class=\"codespan\">&#39;inside&#39;</code>.</li>\n</ul>\n","default":"'outside'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // percentage\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"labelLine":{"type":["Object"],"description":"<p>The visual guide line style of label. When <a href=\"#series-funnel.label.position\">label position</a> is set as <code class=\"codespan\">&#39;left&#39;</code>or<code class=\"codespan\">&#39;right&#39;</code>, the visual guide line will show.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show visual guide line.</p>\n"},"length":{"type":["number"],"description":"<p>The length of the first part from visual guide line.</p>\n"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of , <code class=\"codespan\">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"color":{"type":["Color","Function"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n<p>Supports callback functions, in the form of:</p>\n<pre><code class=\"lang-js\">(params: Object) =&gt; Color\n</code></pre>\n<p>Input parameters are <code class=\"codespan\">seriesIndex</code>, <code class=\"codespan\">dataIndex</code>, <code class=\"codespan\">data</code>, <code class=\"codespan\">value</code>, and etc. of data item.</p>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"","default":false},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // percentage\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"labelLine":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show visual guide line.</p>\n"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between funnel chart component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":80},"top":{"type":["string","number"],"description":"<p>Distance between funnel chart component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":60},"right":{"type":["string","number"],"description":"<p>Distance between funnel chart component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n","default":80},"bottom":{"type":["string","number"],"description":"<p>Distance between funnel chart component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n","default":60},"width":{"type":["string","number"],"description":"<p>Width of funnel chart component. Adaptive by default.</p>\n","default":"'auto'"},"height":{"type":["string","number"],"description":"<p>Height of funnel chart component. Adaptive by default.</p>\n","default":"'auto'"},"seriesLayoutBy":{"type":["string"],"description":"<p>When <a href=\"#dataset\">dataset</a> is used, <code class=\"codespan\">seriesLayoutBy</code> specifies whether the column or the row of <code class=\"codespan\">dataset</code> is mapped to the series, namely, the series is &quot;layout&quot; on columns or rows. Optional values:</p>\n<ul>\n<li>&#39;column&#39;: by default, the columns of <code class=\"codespan\">dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>&#39;row&#39;:the rows of <code class=\"codespan\">dataset</code> are mapped to the series. In this case, each row represents a dimension.</li>\n</ul>\n<p>Check this <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=dataset-series-layout-by\" target=\"_blank\">example</a>.</p>\n","default":"'column'"},"datasetIndex":{"type":["number"],"description":"<p>If <a href=\"#series.data\">series.data</a> is not specified, and <a href=\"#dataset\">dataset</a> exists, the series will use <code class=\"codespan\">dataset</code>. <code class=\"codespan\">datasetIndex</code> specifies which dataset will be used.</p>\n","default":0},"dimensions":{"type":["Array"],"description":"<p><code class=\"codespan\">dimensions</code> can be used to define dimension info for <code class=\"codespan\">series.data</code> or <code class=\"codespan\">dataset.source</code>.</p>\n<p>Notice: if <a href=\"#dataset\">dataset</a> is used, we can provide dimension names in the first column/row of <a href=\"#dataset.source\">dataset.source</a>, and not need to specify <code class=\"codespan\">dimensions</code> here. But if <code class=\"codespan\">dimensions</code> is specified here, echarts will not retrieve dimension names from the first row/column of <code class=\"codespan\">dataset.source</code> any more.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\n    ]\n}\n</code></pre>\n<p>Each data item of <code class=\"codespan\">dimensions</code> can be:</p>\n<ul>\n<li><code class=\"codespan\">string</code>, for example, <code class=\"codespan\">&#39;someName&#39;</code>, which equals to <code class=\"codespan\">{name: &#39;someName&#39;}</code>.</li>\n<li><code class=\"codespan\">Object</code>, where the attributes can be:<ul>\n<li>name: <code class=\"codespan\">string</code>.</li>\n<li>type: <code class=\"codespan\">string</code>, supports:<ul>\n<li><code class=\"codespan\">number</code></li>\n<li><code class=\"codespan\">float</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array\" target=\"_blank\">Float64Array</a></li>\n<li><code class=\"codespan\">int</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array\" target=\"_blank\">Int32Array</a></li>\n<li><code class=\"codespan\">ordinal</code>, discrete value, which represents string generally.</li>\n<li><code class=\"codespan\">time</code>, time value, see <a href=\"#series.data\">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code class=\"codespan\">string</code>, generally used in tooltip for dimension display. If not specified, use <code class=\"codespan\">name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code class=\"codespan\">dimensions</code> is specified, the default <code class=\"codespan\">tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code class=\"codespan\">tooltip</code> will displayed only value horizontally.</p>\n"},"encode":{"type":["Object"],"description":"<p>Define what is encoded to for each dimension of <code class=\"codespan\">data</code>. For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n</code></pre>\n<p>When <a href=\"#series.dimensions\">dimensions</a> is used to defined name for a certain dimension, <code class=\"codespan\">encode</code> can refer the name directly. For example:</p>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<p>The basic structure of <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code> or some special reserved names like &quot;tooltip&quot;, &quot;itemName&quot; etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code class=\"codespan\">encode</code> listed as follows:</p>\n<pre><code class=\"lang-js\">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension &quot;product&quot; and &quot;score&quot; in the tooltip.\n    tooltip: [&#39;product&#39;, &#39;score&#39;]\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // &#39;pie&#39;, &#39;funnel&#39;, where data item name can be displayed in legend.\n    itemName: 3\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension &quot;score&quot; to the X axis.\n    x: [1, 5, &#39;score&#39;],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like &#39;pie&#39;, &#39;funnel&#39; etc.:\nencode: {\n    value: 3\n}\n</code></pre>\n<p>This is an <a href=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a> for <code class=\"codespan\">encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code class=\"codespan\">encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href=\"#dataZoom\">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class=\"lang-js\">var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            return {\n                type: &#39;circle&#39;,\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: &#39;blue&#39;\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n</code></pre>\n"},"data":{"type":["Array"],"description":"<p>Data array of  series, which can be a single data value, like:</p>\n<pre><code class=\"lang-js\">[12, 34, 56, 10, 23]\n</code></pre>\n<p>Or, if need extra dimensions for components like <a href=\"#visualMap\">visualMap</a> to map to graphic attributes like color, it can also be in the form of array. For example:</p>\n<pre><code class=\"lang-js\">[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]\n</code></pre>\n<p>In this case, we can assgin the second value in each array item to <a href=\"#visualMap\">visualMap</a> component.</p>\n<p>More likely, we need to assign name to each data item, in which case each item should be an object:</p>\n<pre><code class=\"lang-js\">[{\n    // name of date item\n    name: &#39;data1&#39;,\n    // value of date item is 8\n    value: 10\n}, {\n    name: &#39;data2&#39;,\n    value: 20\n}]\n</code></pre>\n<p>Each data item can be further customized:</p>\n<pre><code class=\"lang-js\">[{\n    name: &#39;data1&#39;,\n    value: 10\n}, {\n    // name of data item\n    name: &#39;data2&#39;,\n    value : 56,\n    // user-defined label format that only useful for this data item\n    label: {},\n    // user-defined special itemStyle that only useful for this data item\n    itemStyle:{}\n}]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>the name of data item.</p>\n"},"value":{"type":["number"],"description":"<p>data value.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of , <code class=\"codespan\">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"<p>The label configuration of a single data item.</p>\n","properties":{"show":{"type":["boolean"],"description":"","default":false},"position":{"type":["string"],"description":"<p>Label position.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left side of funnel chart. The corresponding trapezoid would be related to through <a href=\"#series-funnel.labelLine\">visual guide line</a>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p> Right side of funnel chart. The corresponding trapezoid would be related to through <a href=\"#series-funnel.labelLine\">visual guide line</a>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p>  Inside the trapezoid of funnel chart.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;insideRight&#39;</code></p>\n<p>  Right inside the trapezoid of funnel chart.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;insideLeft&#39;</code></p>\n<p>  Left inside the trapezoid of funnel chart.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;leftTop&#39;</code></p>\n<p>  Top-left of funnel chart.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;leftBottom&#39;</code></p>\n<p>  Bottom-left of funnel chart.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;rightTop&#39;</code></p>\n<p>  Top-right side of funnel chart.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;rightBottom&#39;</code></p>\n<p>  Bottom-right side of funnel chart.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;inner&#39;</code> equals to <code class=\"codespan\">&#39;inside&#39;</code>.</p>\n</li>\n<li><code class=\"codespan\">&#39;center&#39;</code> equals to <code class=\"codespan\">&#39;inside&#39;</code>.</li>\n</ul>\n","default":"'outside'"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"labelLine":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show visual guide line.</p>\n"},"length":{"type":["number"],"description":"<p>The length of the first part from visual guide line.</p>\n"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"","default":false},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"labelLine":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show visual guide line.</p>\n"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-funnel.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-funnel.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-funnel.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li>Assign coordinate according to container with <a href=\"#series-funnel.markPoint.data.x\">x</a>, <a href=\"#series-funnel.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["Object"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-funnel.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class=\"codespan\">symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li>Assign coordinate according to container with <a href=\"#series-funnel.markLine.data.0.x\">x</a>, <a href=\"#series-funnel.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<pre><code>data: [\n    [\n        {\n            name: &#39;Mark line between two points&#39;,\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'starting point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'ending point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code class=\"codespan\">data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li>Specify the coordinate in screen coordinate system using <a href=\"#series-funnel.markArea.data.0.x\">x</a>, <a href=\"#series-funnel.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code class=\"codespan\">5</code>), or percent (e.g., the value is <code class=\"codespan\">&#39;35%&#39;</code>).</li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n    [\n        {\n            name: &#39;Mark area in two screen points&#39;,\n            x: 100,\n            y: 100\n        }, {\n            x: &#39;90%&#39;,\n            y: &#39;10%&#39;\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'start'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'end'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong>Gauge chart</strong></p>\n<p><strong>Example: </strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=gauge-car&reset=1&edit=1\" width=\"600\" height=\"500\"><iframe />\n\n\n","properties":{"type":{"type":["string"],"description":"","default":"'gauge'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n\n"},"radius":{"type":["number","string"],"description":"<p>The radius of gauge chart. It can be a percentage value of the smaller of container half width and half height, also can be an absolute value.</p>\n","default":"'75%'"},"legendHoverLink":{"type":["boolean"],"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n","default":true},"startAngle":{"type":["number"],"description":"<p>The start angle of gauge chart. The direct right side of <a href=\"#series-gauge.center\">circle center</a> is <code class=\"codespan\">0</code> degree, the right above it is <code class=\"codespan\">90</code> degree, the direct left side of it is <code class=\"codespan\">180</code> degree.</p>\n","default":225},"endAngle":{"type":["number"],"description":"<p>The end angle of gauge chart.</p>\n","default":-45},"clockwise":{"type":["boolean"],"description":"<p>Whether the scale in gauge chart increases clockwise.</p>\n","default":true},"data":{"type":["Array"],"description":"<p>Data array of  series, which can be a single data value, like:</p>\n<pre><code class=\"lang-js\">[12, 34, 56, 10, 23]\n</code></pre>\n<p>Or, if need extra dimensions for components like <a href=\"#visualMap\">visualMap</a> to map to graphic attributes like color, it can also be in the form of array. For example:</p>\n<pre><code class=\"lang-js\">[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]\n</code></pre>\n<p>In this case, we can assgin the second value in each array item to <a href=\"#visualMap\">visualMap</a> component.</p>\n<p>More likely, we need to assign name to each data item, in which case each item should be an object:</p>\n<pre><code class=\"lang-js\">[{\n    // name of date item\n    name: &#39;data1&#39;,\n    // value of date item is 8\n    value: 10\n}, {\n    name: &#39;data2&#39;,\n    value: 20\n}]\n</code></pre>\n<p>Each data item can be further customized:</p>\n<pre><code class=\"lang-js\">[{\n    name: &#39;data1&#39;,\n    value: 10\n}, {\n    // name of data item\n    name: &#39;data2&#39;,\n    value : 56,\n    // user-defined label format that only useful for this data item\n    label: {},\n    // user-defined special itemStyle that only useful for this data item\n    itemStyle:{}\n}]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Data name.</p>\n"},"value":{"type":["number"],"description":"<p>Data value.</p>\n"}}}},"min":{"type":["number"],"description":"<p>The minimum data value which map to <a href=\"#series-gauge.minAngle\">minAngle</a>.</p>\n","default":0},"max":{"type":["number"],"description":"<p>The maximum data value which map to  <a href=\"#series-gauge.maxAngle\">maxAngle</a>.</p>\n","default":100},"splitNumber":{"type":["number"],"description":"<p>The number of split segments of gauge chart scale.</p>\n","default":10},"axisLine":{"type":["Object"],"description":"<p>The related configuration about the axis line of gauge chart.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the axis line of gauge chart.</p>\n","default":true},"lineStyle":{"type":["Object"],"description":"<p>The style of the axis line of gauge chart.</p>\n","properties":{"color":{"type":["Array"],"description":"<p>The axis line of gauge chart can be divided to several segments in different colors. The end position and color of each segment can be expressed by an array.</p>\n<p>Default value:</p>\n<pre><code class=\"lang-js\">[[0.2, &#39;#91c7ae&#39;], [0.8, &#39;#63869e&#39;], [1, &#39;#c23531&#39;]]\n</code></pre>\n"},"width":{"type":["number"],"description":"<p>The width of axis line.</p>\n","default":30},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"splitLine":{"type":["Object"],"description":"<p>The style of split line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the split line.</p>\n","default":true},"length":{"type":["number","string"],"description":"<p>The length of split line, can be a pecentage value relative to radius.</p>\n","default":30},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#eee"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":2},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"axisTick":{"type":["Object"],"description":"<p>The tick line style.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the scale.</p>\n","default":true},"splitNumber":{"type":["number"],"description":"<p>The split scale number between split line.</p>\n","default":5},"length":{"type":["number","string"],"description":"<p>The length of tick line, can be a pecentage value relative to radius.</p>\n","default":8},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#eee"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"axisLabel":{"type":["Object"],"description":"<p>Axis tick label.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the label.</p>\n","default":true},"distance":{"type":["number"],"description":"<p>The distance between the label and tick line.</p>\n","default":5},"formatter":{"type":["string","Function"],"description":"<p>The content formatter of scale label, which supports both string template and callback function.\nExample:</p>\n<pre><code class=\"lang-js\">// use string template. the template variable {value} represent the default label text\nformatter: &#39;{value} kg&#39;\n\n// use function callback. the function parameters are scale values.\nformatter: function (value) {\n    return value + &#39;km/h&#39;;\n}\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"pointer":{"type":["Object"],"description":"<p>Gauge chart pointer.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the pointer.</p>\n","default":true},"length":{"type":["string","number"],"description":"<p>The length of pointer which could be absolute value and also the percentage relative to <a href=\"#series-gauge.radius\">radius</a>.</p>\n","default":"'80%'"},"width":{"type":["number"],"description":"<p>The width of pointer.</p>\n","default":8}}},"itemStyle":{"type":["Object"],"description":"<p>The style of gauge chart.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>The color of pointer. Defaults to use <a href=\"#series-gauge.axisLine.lineStyle.color\">the color of section</a> where the numerical value belongs to.</p>\n","default":"'auto'"},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"title":{"type":["Object"],"description":"<p>The title of gauge chart.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the title.</p>\n","default":true},"offsetCenter":{"type":["Array"],"description":"<p>The offset position relative to the center of gauge chart. The first item of array is the horizontal offset; the second item of array is the vertical offset. It could be absolute value and also the percentage relative to the radius of gauge chart.</p>\n","default":"[0, '-40%']"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#333'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":15},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"detail":{"type":["Object"],"description":"<p>The detail about gauge chart which is used to show data.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the details.</p>\n","default":true},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"formatter":{"type":["Function","string"],"description":"<p>Formatter is used to format detail, which supports string template and callback function.</p>\n<pre><code class=\"lang-js\">formatter: function (value) {\n    return value.toFixed(0);\n}\n</code></pre>\n"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"offsetCenter":{"type":["Array"],"description":"<p>The offset position relative to the center of gauge chart. The first item of array is the horizontal offset; the second item of array is the vertical offset. It could be absolute value and also the percentage relative to the radius of gauge chart.</p>\n","default":"[0, '40%']"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'auto'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":15},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n\n","default":0}}},"color":{"type":["Color"],"description":"<p>The text color. Defaults to use <a href=\"#series-gauge.axisLine.lineStyle.color\">the color of section</a> where the numerical value belongs to.</p>\n","default":"'auto'"}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-gauge.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-gauge.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-gauge.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li>Assign coordinate according to container with <a href=\"#series-gauge.markPoint.data.x\">x</a>, <a href=\"#series-gauge.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["Object"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-gauge.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class=\"codespan\">symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li>Assign coordinate according to container with <a href=\"#series-gauge.markLine.data.0.x\">x</a>, <a href=\"#series-gauge.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<pre><code>data: [\n    [\n        {\n            name: &#39;Mark line between two points&#39;,\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'starting point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'ending point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code class=\"codespan\">data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li>Specify the coordinate in screen coordinate system using <a href=\"#series-gauge.markArea.data.0.x\">x</a>, <a href=\"#series-gauge.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code class=\"codespan\">5</code>), or percent (e.g., the value is <code class=\"codespan\">&#39;35%&#39;</code>).</li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n    [\n        {\n            name: &#39;Mark area in two screen points&#39;,\n            x: 100,\n            y: 100\n        }, {\n            x: &#39;90%&#39;,\n            y: &#39;10%&#39;\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'start'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'end'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong>pictorial bar chart</strong></p>\n<p>Pictorial bar chart is a type of bar chart that customized glyph (like images, <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a>) can be used instead of rectangular bar. This kind of chart is usually used in infographic.</p>\n<p>Pictorial bar chart can only be used in <a href=\"#grid\">rectangular coordinate</a> with at least 1 category axis.</p>\n<p><strong>Example:</strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=pictorialBar-hill&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n<p><strong>Layout</strong></p>\n<p>Basically <code class=\"codespan\">pictoialBar</code> is a type of bar chart, which follows the bar chart layout. In <code class=\"codespan\">pictorialBar</code>, each bar is named as <code class=\"codespan\">reference bar</code>, which does not be shown, but only be used as a reference for layout of pictorial graphic elements. Each pictorial graphic element is positioned with respect to its <code class=\"codespan\">reference bar</code> according to the setting of <a href=\"#series-pictorialBar.symbolPosition\">symbolPosition</a>、<a href=\"#series-pictorialBar.symbolOffset\">symbolOffset</a>.</p>\n<p>See the example below:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-position&reset=1&edit=1\" width=\"800\" height=\"600\"><iframe />\n\n\n<p><a href=\"#series-pictorialBar.symbolSize\">symbolSize</a> is used to specify the size of graphic elements.</p>\n<p>See the example below:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-symbolSize&reset=1&edit=1\" width=\"800\" height=\"600\"><iframe />\n\n\n\n\n<p><strong>Graphic types</strong></p>\n<p><a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> can be</p>\n<p>Graphic elements can be set as &#39;repeat&#39; or not by <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a>.</p>\n<ul>\n<li>If set as <code class=\"codespan\">false</code> (default), a single graphic element is used to represent a data item.</li>\n<li>If set as <code class=\"codespan\">true</code>, a group of repeat graphic elements are used to represent a data item.</li>\n</ul>\n<p>See the example below:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeat&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n<p>Each graphic element can be basic shape (like <code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, ...), or <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a>, or image. See <a href=\"#series-pictorialBar.symbolType\">symbolType</a>.</p>\n<p>See the example below:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-graphicType&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n<p><a href=\"#series-pictorialBar.symbolClip\">symbolClip</a> can be used to clip graphic elements.</p>\n<p>See the example below:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-clip&reset=1&edit=1\" width=\"800\" height=\"600\"><iframe />\n\n\n\n","properties":{"type":{"type":["string"],"description":"","default":"'pictorialBar'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"legendHoverLink":{"type":["boolean"],"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n","default":true},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;cartesian2d&#39;</code></p>\n<p>  Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-pictorialBar.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-pictorialBar.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n","default":"'cartesian2d'"},"xAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#xAxis\">x axis</a> to combine with, which is  useful for multiple x axes in one chart.</p>\n","default":0},"yAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#yAxis\">y axis</a> to combine with, which is  useful for multiple y axes in one chart.</p>\n","default":0},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code class=\"codespan\">cursor</code> property in <code class=\"codespan\">CSS</code>.</p>\n","default":"'pointer'"},"label":{"type":["Object"],"description":"<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of , <code class=\"codespan\">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"barWidth":{"type":["number","string"],"description":"<p>The width of the bar. Adaptive when not specified.</p>\n<p>Can be an absolute value like <code class=\"codespan\">40</code> or a percent value like <code class=\"codespan\">&#39;60%&#39;</code>. The percent is based on the calculated category width.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code class=\"codespan\">&#39;bar&#39;</code> series. This attribute should be set on the last <code class=\"codespan\">&#39;bar&#39;</code> series in the coodinate system, then it will be adopted by all <code class=\"codespan\">&#39;bar&#39;</code> series in the coordinate system.</p>\n","default":null},"barMaxWidth":{"type":["number","string"],"description":"<p>The maximum width of the bar.</p>\n<p>Has higer priority than <a href=\"#series-bar.barWidth\">barWidth</a>.</p>\n<p>Can be an absolute value like <code class=\"codespan\">40</code> or a percent value like <code class=\"codespan\">&#39;60%&#39;</code>. The percent is based on the calculated category width.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code class=\"codespan\">&#39;bar&#39;</code> series. This attribute should be set on the last <code class=\"codespan\">&#39;bar&#39;</code> series in the coodinate system, then it will be adopted by all <code class=\"codespan\">&#39;bar&#39;</code> series in the coordinate system.</p>\n","default":null},"barMinWidth":{"type":["number","string"],"description":"<p>The minimum width of the bar. In cartesian the default value is <code class=\"codespan\">1</code>, otherwise the default value if <code class=\"codespan\">null</code>.</p>\n<p>Has higer priority than <a href=\"#series-bar.barWidth\">barWidth</a>.</p>\n<p>Can be an absolute value like <code class=\"codespan\">40</code> or a percent value like <code class=\"codespan\">&#39;60%&#39;</code>. The percent is based on the calculated category width.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code class=\"codespan\">&#39;bar&#39;</code> series. This attribute should be set on the last <code class=\"codespan\">&#39;bar&#39;</code> series in the coodinate system, then it will be adopted by all <code class=\"codespan\">&#39;bar&#39;</code> series in the coordinate system.</p>\n"},"barMinHeight":{"type":["number"],"description":"<p>The minimum width of bar. It could be used to avoid the following situation: the interaction would be affected when the value of some data item is too small.</p>\n","default":0},"barGap":{"type":["string"],"description":"<p>The gap between bars between different series, is a percent value like <code class=\"codespan\">&#39;30%&#39;</code>, which means <code class=\"codespan\">30%</code> of the bar width.</p>\n<p>Set barGap as <code class=\"codespan\">&#39;-100%&#39;</code> can overlap bars that belong to different series, which is useful when making a series of bar be background.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code class=\"codespan\">&#39;bar&#39;</code> series. This attribute should be set on the last <code class=\"codespan\">&#39;bar&#39;</code> series in the coodinate system, then it will be adopted by all <code class=\"codespan\">&#39;bar&#39;</code> series in the coordinate system.</p>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/barGrid-barGap&reset=1&edit=1\" width=\"600\" height=\"400\"><iframe />\n\n\n","default":"-100%"},"barCategoryGap":{"type":["string"],"description":"<p>The bar gap of a single series, defaults to be <code class=\"codespan\">20%</code> of the category gap, can be set as a fixed value.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code class=\"codespan\">&#39;bar&#39;</code> series. This attribute should be set on the last <code class=\"codespan\">&#39;bar&#39;</code> series in the coodinate system, then it will be adopted by all <code class=\"codespan\">&#39;bar&#39;</code> series in the coordinate system.</p>\n","default":"'20%'"},"symbol":{"type":["string"],"description":"<p>Specify the type of graphic elements.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>Example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-graphicType&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbol\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbol\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbol: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbol: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbol: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n","default":"'circle'"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size.</p>\n<p>It can be set as a array, which means [width, height]. For example, <code class=\"codespan\">[20, 10]</code> means width <code class=\"codespan\">20</code> and height <code class=\"codespan\">10</code>. It can also be set as a single number, like <code class=\"codespan\">10</code>, which is equivalent to <code class=\"codespan\">[10, 10]</code>.</p>\n<p>Absolute value can be used (like <code class=\"codespan\">10</code>), or percent value can be used (like <code class=\"codespan\">&#39;120%&#39;</code>, <code class=\"codespan\">[&#39;55%&#39;, 23]</code>).</p>\n<p>When percent value is used, final size of the graphic element is calculated based on its <a href=\"#series-pictorialBar\">reference bar</a>.</p>\n<p>For example, there is a reference bar based on x axis (that is, it is a vertical bar), and <a href=\"#series-pictorialBar.symbolSize\">symbolSize</a> is set as <code class=\"codespan\">[&#39;30%&#39;, &#39;50%&#39;]</code>, the final size of its graphic elements is:</p>\n<ul>\n<li>width: <code class=\"codespan\">&lt;width of reference bar&gt; * 30%</code>.</li>\n<li>height:<ul>\n<li>If <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used: <code class=\"codespan\">&lt;height of reference bar&gt; * 50%</code>.</li>\n<li>If <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is not used: <code class=\"codespan\">&lt;height of reference bar&gt; * 50%</code>.</li>\n</ul>\n</li>\n</ul>\n<p>Analogously, the case that based on y axis can be obtained by exchanging them.</p>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-symbolSize&reset=1&edit=1\" width=\"800\" height=\"600\"><iframe />\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolSize\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolSize\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolSize: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolSize: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolSize: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n","default":"['100%', '100%']"},"symbolPosition":{"type":["string"],"description":"<p>Specify the location of the graphic elements. Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code>: The edge of graphic element inscribes with the start of the reference bar.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code>: The edge of graphic element inscribes with the end of the reference bar.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: The graphic element is at the center of the reference bar.</li>\n</ul>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-position&reset=1&edit=1\" width=\"800\" height=\"600\"><iframe />\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolPosition\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolPosition\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolPosition: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolPosition: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolPosition: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n","default":"'start'"},"symbolOffset":{"type":["Array"],"description":"<p>Specify the offset of graphic element according to its original position. Adopting <code class=\"codespan\">symbolOffset</code> is the final step in layout, which enables adjustment of graphic element position.</p>\n<p>A absolute value can be set (like <code class=\"codespan\">10</code>), or a percent value can be set (like <code class=\"codespan\">&#39;120%&#39;</code>、<code class=\"codespan\">[&#39;55%&#39;, 23]</code>), which is based on its <a href=\"#series-pictorialBar.symbolSize\">symbolSize</a>.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;-50%&#39;]</code> means the graphic element will be adjusted upward half of the size of itself.</p>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-position&reset=1&edit=1\" width=\"800\" height=\"600\"><iframe />\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolOffset\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolOffset\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolOffset: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolOffset: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolOffset: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n","default":"[0, 0]"},"symbolRotate":{"type":["number"],"description":"<p>The degree of the rotation of a graphic element.</p>\n<p>Notice, <code class=\"codespan\">symbolRotate</code> will not affect the position of the graphic element, but just rotating by its center.</p>\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolRotate\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolRotate\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolRotate: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolRotate: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolRotate: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n"},"symbolRepeat":{"type":["boolean","number","string"],"description":"<p>Whether to repeat a graphic element. Optional values:</p>\n<ul>\n<li><code class=\"codespan\">false</code>/<code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code>: Do not repeat, that is, each graphic element represents a data item.</li>\n<li><code class=\"codespan\">true</code>: Repeat, that is, a group of repeated graphic elements represent a data item. The repeat times is calculated according to <a href=\"#series-pictorialBar.data\">data</a>.</li>\n<li>a number: Repeat, that is a group of repeated graphic elements represent a data item. The repeat times is always the given number.</li>\n<li><code class=\"codespan\">&#39;fixed&#39;</code>: Repeat, that is a group of repeated graphic elements represent a data item. The repeat times is calcuated according to <a href=\"#series-pictorialBar.symbolBoundingData\">symbolBoundingData</a>, that is, the repeat times has nothing to do with <a href=\"#series-pictorialBar.data\">data</a>. The setting is useful when graphic elements are used as background.</li>\n</ul>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeat&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolRepeat\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolRepeat\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolRepeat: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolRepeat: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolRepeat: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n"},"symbolRepeatDirection":{"type":["string"],"description":"<p>When <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used, <code class=\"codespan\">symbolRepeatDirection</code> specifies the render order of the repeated graphic elements. The setting is useful in these cases below:</p>\n<ul>\n<li><p>If <a href=\"#series-pictorialBar.symbolMargin\">symbolMargin</a> is set as a negative value, repeated elements will overlap with each other. <code class=\"codespan\">symbolRepeatDirection</code> can be used to specify the order of overlap.</p>\n</li>\n<li><p>If <a href=\"#series-pictorialBar.animationDelay\">animationDelay</a> or <a href=\"#series-pictorialBar.animationDelayUpdate\">animationDelayUpdate</a> is used, <code class=\"codespan\">symbolRepeatDirection</code> specifies the order of index.</p>\n</li>\n</ul>\n<p>Optional values can be <code class=\"codespan\">&#39;start&#39;</code> and <code class=\"codespan\">&#39;end&#39;</code>.</p>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeatDirection&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolRepeatDirection\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolRepeatDirection\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolRepeatDirection: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolRepeatDirection: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolRepeatDirection: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n","default":"'start'"},"symbolMargin":{"type":["number","string"],"description":"<p>Specify margin of both sides of a graphic element. (&quot;both sides&quot; means the two sides in the direction of its value axis). It works only when <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used.</p>\n<p>Absolute value can be used (like <code class=\"codespan\">20</code>), or percent value can be used (like <code class=\"codespan\">&#39;-30%&#39;</code>), which is based on its <a href=\"#series-pictorialBar.symbolSize\">symbolSize</a>.</p>\n<p><code class=\"codespan\">symbolMargin</code> can be positive value or negative value, which enables overlap of graphic elements when <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used.</p>\n<p>A <code class=\"codespan\">&quot;!&quot;</code> can be appended on the end of the value, like <code class=\"codespan\">&quot;30%!&quot;</code> or <code class=\"codespan\">25!</code>, which means a extra blank will be added on the both ends, otherwise the graphic elements on both ends will reach the boundary by default.</p>\n<p>Notice:</p>\n<ul>\n<li>When <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is <code class=\"codespan\">true</code>/<code class=\"codespan\">&#39;fixed&#39;</code>:\n  The given <code class=\"codespan\">symbolMargin</code> is just a reference value. The final gap of graphic elements will be calculated according to <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a>, <code class=\"codespan\">symbolMargin</code> and <a href=\"#series-pictorialBar.symbolBoundingData\">symbolBoundingData</a>.</li>\n<li>When <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is set as a number:\n  <code class=\"codespan\">symbolMargin</code> does not work any more.</li>\n</ul>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeatLayout&reset=1&edit=1\" width=\"800\" height=\"600\"><iframe />\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolMargin\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolMargin\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolMargin: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolMargin: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolMargin: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n"},"symbolClip":{"type":["boolean"],"description":"<p>Whether to clip graphic elements.</p>\n<ul>\n<li><code class=\"codespan\">false</code>/null/undefined: The whole graphic elements represent the size of value.</li>\n<li><code class=\"codespan\">true</code>: The clipped graphic elements reperent the size of value.</li>\n</ul>\n<p><code class=\"codespan\">symbolClip</code> is usually used in this case: both &quot;amount value&quot; and &quot;current value&quot; should be displayed. In this case, tow series can be used. One for background, using complete graphic elements, while another for current value, using clipped graphic elements.</p>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-clip&reset=1&edit=1\" width=\"800\" height=\"600\"><iframe />\n\n\n<p>Notice, in the example above,</p>\n<ul>\n<li>The same <a href=\"#series.pictorialBar.symbolBoundingData\">symbolBoundingData</a> is used in &quot;background series&quot; and &quot;current value seires&quot;, which makes their graphic elements are the same size.</li>\n<li>A bigger <a href=\"#series.pictorialBar.z\">z</a> is set on &quot;current value series&quot;, which makes it is over &quot;background series&quot;.</li>\n</ul>\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolClip\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolClip\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolClip: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolClip: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolClip: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n","default":false},"symbolBoundingData":{"type":["number"],"description":"<p>Defines a bounding area availble for the graphic elements. This setting gives a data, which will then be translated to a coordinate on the coordinate system. The coordinate specifies the bounding. Namely, if <code class=\"codespan\">symbolBoundingData</code> is set, the final size (or layout) of the graphic elements depend on the <code class=\"codespan\">symbolBoundingData</code>.</p>\n<p>When reference bar is horizontal, <code class=\"codespan\">symbolBoundingData</code> is coresponding to x axis, while reference bar is vertical, <code class=\"codespan\">symbolBoundingData</code> is coresponding to y axis.</p>\n<p>Rule:</p>\n<ul>\n<li><p>If <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is not used:</p>\n<p>  <code class=\"codespan\">symbolBoundingData</code> is the same as the size of reference bar by default. The size of the graphic element is detemined by <code class=\"codespan\">symbolBoundingData</code>. For example, if reference bar is vertical, its data is <code class=\"codespan\">24</code>, <code class=\"codespan\">symbolSize</code> is set as <code class=\"codespan\">[30, &#39;50%&#39;]</code>, <code class=\"codespan\">symbolBoundingData</code> is set as <code class=\"codespan\">124</code>, the final size of the graphic element will be <code class=\"codespan\">124 * 50% = 62</code>. If <code class=\"codespan\">symbolBoundingData</code> is not set, the final size will be <code class=\"codespan\">24 * 50% = 12</code>.</p>\n</li>\n<li><p>If <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used:</p>\n<p>  <code class=\"codespan\">symbolBoundingData</code> is the extreme value of the coordinate system. <code class=\"codespan\">symbolBoundingData</code> defines a bounding area, where repeated graphic elements layout according to <a href=\"#series-pictorialBar.symbolMargin\">symbolMargin</a> and <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> and <a href=\"#series-pictorialBar.symbolSize\">symbolSize</a>. Both these settings determine the gap size of the repeated graphic elements.</p>\n</li>\n</ul>\n<p><code class=\"codespan\">symbolBoundingData</code> is usually used in these cases:</p>\n<ul>\n<li><p>When <a href=\"#series-pictorialBar.symbolClip\">symbolCilp</a> is used:</p>\n<p>  And a series is used to display &quot;amont value&quot;, while another series is used to display &quot;current value&quot;. <code class=\"codespan\">symbolBoundingData</code> can be used to ensure that the graphic elements of these two series are at the same size.</p>\n</li>\n</ul>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-clip&reset=1&edit=1\" width=\"800\" height=\"600\"><iframe />\n\n\n<ul>\n<li><p>When <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used:</p>\n<p>  <code class=\"codespan\">symbolBoundingData</code> can be use to ensure the gaps of the elements in different bars are the same. Of cource, you can do not set <code class=\"codespan\">symbolBoundingData</code>, whose default value is a stable value (extreme value of the coordinate system).</p>\n</li>\n</ul>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeatLayout&reset=1&edit=1\" width=\"800\" height=\"600\"><iframe />\n\n\n<p><br>\n<code class=\"codespan\">symbolBoundingData</code> can also be an array, such as <code class=\"codespan\">[-40, 60]</code>, which specifies both negative and positive symbolBoundingData.</p>\n<p>Check this example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-symbolBoundingDataArray&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolBoundingData\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolBoundingData\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolBoundingData: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolBoundingData: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolBoundingData: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n"},"symbolPatternSize":{"type":["number"],"description":"<p>Image can be used as the pattern of graphic elements.</p>\n<pre><code class=\"lang-js\">var textureImg = new Image();\ntextureImg.src = &#39;data:image/jpeg;base64,...&#39;; // dataURI\n// Or\n// textureImg.src = &#39;http://xxx.xxx.xxx/xx.png&#39;; // URL\n...\nitemStyle: {\n    color: {\n        image: textureImg,\n        repeat: &#39;repeat&#39;\n    }\n}\n</code></pre>\n<p><code class=\"codespan\">symbolPatternSize</code> specifies the size of pattern image. For example, if <code class=\"codespan\">symbolPatternSize</code> is <code class=\"codespan\">400</code>, the pattern image will be displayed at the size of <code class=\"codespan\">400px * 400px</code>.</p>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-patternSize&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolPatternSize\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolPatternSize\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolPatternSize: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolPatternSize: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolPatternSize: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n","default":400},"hoverAnimation":{"type":["boolean"],"description":"<p>Whether to enable hover animation.</p>\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.hoverAnimation\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.hoverAnimation\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    hoverAnimation: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        hoverAnimation: ... // Only affect this data item.\n    }, {\n        value: 56\n        hoverAnimation: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n","default":false,"properties":{"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Specify the delay time before animation start. Callback function can be used, where different delay time can be used on different element.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (dataIndex, params) {\n    return params.index * 30;\n}\n// Or inverse:\nanimationDelay: function (dataIndex, params) {\n    return (params.count - 1 - params.index) * 30;\n}\n</code></pre>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeatDirection&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n","default":0},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Specify the delay time before update animation. Callback function can be used, where different delay time can be used on different element.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (dataIndex, params) {\n    return params.index * 30;\n}\n// Or inverse:\nanimationDelay: function (dataIndex, params) {\n    return (params.count - 1 - params.index) * 30;\n}\n</code></pre>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeatDirection&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","default":0}}},"dimensions":{"type":["Array"],"description":"<p><code class=\"codespan\">dimensions</code> can be used to define dimension info for <code class=\"codespan\">series.data</code> or <code class=\"codespan\">dataset.source</code>.</p>\n<p>Notice: if <a href=\"#dataset\">dataset</a> is used, we can provide dimension names in the first column/row of <a href=\"#dataset.source\">dataset.source</a>, and not need to specify <code class=\"codespan\">dimensions</code> here. But if <code class=\"codespan\">dimensions</code> is specified here, echarts will not retrieve dimension names from the first row/column of <code class=\"codespan\">dataset.source</code> any more.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\n    ]\n}\n</code></pre>\n<p>Each data item of <code class=\"codespan\">dimensions</code> can be:</p>\n<ul>\n<li><code class=\"codespan\">string</code>, for example, <code class=\"codespan\">&#39;someName&#39;</code>, which equals to <code class=\"codespan\">{name: &#39;someName&#39;}</code>.</li>\n<li><code class=\"codespan\">Object</code>, where the attributes can be:<ul>\n<li>name: <code class=\"codespan\">string</code>.</li>\n<li>type: <code class=\"codespan\">string</code>, supports:<ul>\n<li><code class=\"codespan\">number</code></li>\n<li><code class=\"codespan\">float</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array\" target=\"_blank\">Float64Array</a></li>\n<li><code class=\"codespan\">int</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array\" target=\"_blank\">Int32Array</a></li>\n<li><code class=\"codespan\">ordinal</code>, discrete value, which represents string generally.</li>\n<li><code class=\"codespan\">time</code>, time value, see <a href=\"#series.data\">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code class=\"codespan\">string</code>, generally used in tooltip for dimension display. If not specified, use <code class=\"codespan\">name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code class=\"codespan\">dimensions</code> is specified, the default <code class=\"codespan\">tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code class=\"codespan\">tooltip</code> will displayed only value horizontally.</p>\n"},"encode":{"type":["Object"],"description":"<p>Define what is encoded to for each dimension of <code class=\"codespan\">data</code>. For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n</code></pre>\n<p>When <a href=\"#series.dimensions\">dimensions</a> is used to defined name for a certain dimension, <code class=\"codespan\">encode</code> can refer the name directly. For example:</p>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<p>The basic structure of <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code> or some special reserved names like &quot;tooltip&quot;, &quot;itemName&quot; etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code class=\"codespan\">encode</code> listed as follows:</p>\n<pre><code class=\"lang-js\">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension &quot;product&quot; and &quot;score&quot; in the tooltip.\n    tooltip: [&#39;product&#39;, &#39;score&#39;]\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // &#39;pie&#39;, &#39;funnel&#39;, where data item name can be displayed in legend.\n    itemName: 3\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension &quot;score&quot; to the X axis.\n    x: [1, 5, &#39;score&#39;],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like &#39;pie&#39;, &#39;funnel&#39; etc.:\nencode: {\n    value: 3\n}\n</code></pre>\n<p>This is an <a href=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a> for <code class=\"codespan\">encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code class=\"codespan\">encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href=\"#dataZoom\">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class=\"lang-js\">var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            return {\n                type: &#39;circle&#39;,\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: &#39;blue&#39;\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n</code></pre>\n"},"data":{"type":["Array"],"description":"<p>Data array of series, which can be in the following forms:</p>\n<p>Notice, if no <code class=\"codespan\">data</code> specified in series, and there is <a href=\"#dataset\">dataset</a> in option, series will use the first <a href=\"#dataset\">dataset</a> as its datasource. If <code class=\"codespan\">data</code> has been specified, <a href=\"#dataset\">dataset</a> will not used.</p>\n<p><code class=\"codespan\">series.datasetIndex</code> can be used to specify other <a href=\"#dataset\">dataset</a>.</p>\n<p>Basically, data is represented by a two-dimension array, like the example below, where each column is named as a &quot;dimension&quot;.</p>\n<pre><code class=\"lang-js\">series: [{\n    data: [\n        // dimX   dimY   other dimensions ...\n        [  3.4,    4.5,   15,   43],\n        [  4.2,    2.3,   20,   91],\n        [  10.8,   9.5,   30,   18],\n        [  7.2,    8.8,   18,   57]\n    ]\n}]\n</code></pre>\n<ul>\n<li>In <a href=\"#grid\">cartesian (grid)</a>, &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href=\"#xAxis\">xAxis</a> and <a href=\"#yAxis\">yAxis</a> respectively.</li>\n<li>In <a href=\"#polar\">polar</a> &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href=\"#radiusAxis\">radiusAxis</a> 和 <a href=\"#anbleAxis\">angleAxis</a> respectively.</li>\n<li>Other dimensions are optional, which can be used in other places. For example:<ul>\n<li><a href=\"#visualMap\">visualMap</a> can map one or more dimensions to visual (color, symbol size ...).</li>\n<li><a href=\"#series.symbolSize\">series.symbolSize</a> can be set as a callback function, where symbol size can be calculated by values of a certain dimension.</li>\n<li>Values in other dimensions can be shown by <a href=\"#tooltip.formatter\">tooltip.formatter</a> or <a href=\"#series.label.formatter\">series.label.formatter</a>.</li>\n</ul>\n</li>\n</ul>\n<p>Especially, when there is one and only one category axis (axis.type is <code class=\"codespan\">&#39;category&#39;</code>), data can be simply be represented by a one-dimension array, like:</p>\n<pre><code class=\"lang-js\">xAxis: {\n    data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;]\n},\nseries: [{\n    // Each item corresponds to each item in xAxis.data.\n    data: [23,  44,  55,  19]\n    // In fact, it is the simplification of the format below:\n    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n</code></pre>\n<p><br>\n<strong>Relationship between &quot;value&quot; and <a href=\"#xAxis.type\">axis.type</a></strong></p>\n<ul>\n<li><p>When a dimension corresponds to a value axis (axis.type is <code class=\"codespan\">&#39;value&#39;</code> or <code class=\"codespan\">&#39;log&#39;</code>):</p>\n<p>  The value can be a <code class=\"codespan\">number</code> (like <code class=\"codespan\">12</code>) (can also be a number in a <code class=\"codespan\">string</code> format, like <code class=\"codespan\">&#39;12&#39;</code>).</p>\n</li>\n<li><p>When a dimension corresponds to a category axis (axis.type is <code class=\"codespan\">&#39;category&#39;</code>):</p>\n<p>  The value should be the ordinal of the axis.data (based on <code class=\"codespan\">0</code>), the string value of the axis.data. For example:</p>\n<pre><code class=\"lang-js\">  xAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;]\n  },\n  yAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;, &#39;p&#39;, &#39;q&#39;]\n  },\n  series: [{\n      data: [\n          // xAxis      yAxis\n          [  0,           0,    2  ], // This point is located at xAxis: &#39;Monday&#39;, yAxis: &#39;a&#39;.\n          [  &#39;Thursday&#39;,  2,    1  ], // This point is located at xAxis: &#39;Thursday&#39;, yAxis: &#39;m&#39;.\n          [  2,          &#39;p&#39;,   2  ], // This point is located at xAxis: &#39;Wednesday&#39;, yAxis: &#39;p&#39;.\n          [  3,           3,    5  ]\n      ]\n  }]\n</code></pre>\n<p>  There is an example of double category axes: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-punchCard\" target=\"_blank\">Github Punchcard</a>.</p>\n</li>\n<li><p>When a dimension corresponds to a time axis (type is <code class=\"codespan\">&#39;time&#39;</code>), the value can be:</p>\n<ul>\n<li>a timestamp, like <code class=\"codespan\">1484141700832</code>, which represents a UTC time.</li>\n<li>a date string, in one of the formats below:<ul>\n<li>a subset of <a href=\"http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15\" target=\"_blank\">ISO 8601</a>, only including (all of these are treated as local time unless timezone is specified, which is consistent with <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>):<ul>\n<li>only part of year/month/date/time are specified: <code class=\"codespan\">&#39;2012-03&#39;</code>, <code class=\"codespan\">&#39;2012-03-01&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 05&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 05:06&#39;</code>.</li>\n<li>separated by <code class=\"codespan\">&quot;T&quot;</code> or a space: <code class=\"codespan\">&#39;2012-03-01T12:22:33.123&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 12:22:33.123&#39;</code>.</li>\n<li>timezone specified: <code class=\"codespan\">&#39;2012-03-01T12:22:33Z&#39;</code>, <code class=\"codespan\">&#39;2012-03-01T12:22:33+8000&#39;</code>, <code class=\"codespan\">&#39;2012-03-01T12:22:33-05:00&#39;</code>.</li>\n</ul>\n</li>\n<li>other date string format (all of these are treated as local time):\n<code class=\"codespan\">&#39;2012&#39;</code>, <code class=\"codespan\">&#39;2012-3-1&#39;</code>, <code class=\"codespan\">&#39;2012/3/1&#39;</code>, <code class=\"codespan\">&#39;2012/03/01&#39;</code>,\n<code class=\"codespan\">&#39;2009/6/12 2:00&#39;</code>, <code class=\"codespan\">&#39;2009/6/12 2:05:08&#39;</code>, <code class=\"codespan\">&#39;2009/6/12 2:05:08.123&#39;</code>.</li>\n</ul>\n</li>\n<li>a JavaScript Date instance created by user:<ul>\n<li>Caution, when using a data string to create a Date instance, <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">browser differences and inconsistencies</a> should be considered.</li>\n<li>For example: In chrome, <code class=\"codespan\">new Date(&#39;2012-01-01&#39;)</code> is treated as a Jan 1st 2012 in UTC, while <code class=\"codespan\">new Date(&#39;2012-1-1&#39;)</code> and <code class=\"codespan\">new Date(&#39;2012/01/01&#39;)</code> are treated as Jan 1st 2012 in local timezone. In safari <code class=\"codespan\">new Date(&#39;2012-1-1&#39;)</code> is not supported.</li>\n<li>So if you intent to perform <code class=\"codespan\">new Date(dateString)</code>, it is strongly recommended to use a time parse library (e.g., <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>), or use <code class=\"codespan\">echarts.number.parseDate</code>, or check <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">this</a>.</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<strong>Customize a data item:</strong></p>\n<p>When needing to customize a data item, it can be set as an object, where property <code class=\"codespan\">value</code> reprensent real value. For example:</p>\n<pre><code class=\"lang-js\">[\n    12,\n    24,\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    33\n]\n// Or\n[\n    [12, 332],\n    [24, 32],\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    [33, 31]\n]\n</code></pre>\n<p><br>\n<strong>Empty value:</strong></p>\n<p><code class=\"codespan\">&#39;-&#39;</code> or <code class=\"codespan\">null</code> or <code class=\"codespan\">undefined</code> or <code class=\"codespan\">NaN</code> can be used to describe that a data item does not exist (ps:<em>not exist</em> does not means its value is <code class=\"codespan\">0</code>).</p>\n<p>For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.</p>\n<p><br><br></p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>The name of data item.</p>\n"},"value":{"type":["number"],"description":"<p>The value of a single data item.</p>\n"},"symbol":{"type":["string"],"description":"<p>Specify the type of graphic elements.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>Example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-graphicType&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbol\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbol\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbol: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbol: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbol: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n","default":"'circle'"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size.</p>\n<p>It can be set as a array, which means [width, height]. For example, <code class=\"codespan\">[20, 10]</code> means width <code class=\"codespan\">20</code> and height <code class=\"codespan\">10</code>. It can also be set as a single number, like <code class=\"codespan\">10</code>, which is equivalent to <code class=\"codespan\">[10, 10]</code>.</p>\n<p>Absolute value can be used (like <code class=\"codespan\">10</code>), or percent value can be used (like <code class=\"codespan\">&#39;120%&#39;</code>, <code class=\"codespan\">[&#39;55%&#39;, 23]</code>).</p>\n<p>When percent value is used, final size of the graphic element is calculated based on its <a href=\"#series-pictorialBar\">reference bar</a>.</p>\n<p>For example, there is a reference bar based on x axis (that is, it is a vertical bar), and <a href=\"#series-pictorialBar.symbolSize\">symbolSize</a> is set as <code class=\"codespan\">[&#39;30%&#39;, &#39;50%&#39;]</code>, the final size of its graphic elements is:</p>\n<ul>\n<li>width: <code class=\"codespan\">&lt;width of reference bar&gt; * 30%</code>.</li>\n<li>height:<ul>\n<li>If <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used: <code class=\"codespan\">&lt;height of reference bar&gt; * 50%</code>.</li>\n<li>If <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is not used: <code class=\"codespan\">&lt;height of reference bar&gt; * 50%</code>.</li>\n</ul>\n</li>\n</ul>\n<p>Analogously, the case that based on y axis can be obtained by exchanging them.</p>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-symbolSize&reset=1&edit=1\" width=\"800\" height=\"600\"><iframe />\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolSize\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolSize\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolSize: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolSize: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolSize: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n","default":"['100%', '100%']"},"symbolPosition":{"type":["string"],"description":"<p>Specify the location of the graphic elements. Optional values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code>: The edge of graphic element inscribes with the start of the reference bar.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code>: The edge of graphic element inscribes with the end of the reference bar.</li>\n<li><code class=\"codespan\">&#39;center&#39;</code>: The graphic element is at the center of the reference bar.</li>\n</ul>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-position&reset=1&edit=1\" width=\"800\" height=\"600\"><iframe />\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolPosition\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolPosition\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolPosition: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolPosition: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolPosition: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n","default":"'start'"},"symbolOffset":{"type":["Array"],"description":"<p>Specify the offset of graphic element according to its original position. Adopting <code class=\"codespan\">symbolOffset</code> is the final step in layout, which enables adjustment of graphic element position.</p>\n<p>A absolute value can be set (like <code class=\"codespan\">10</code>), or a percent value can be set (like <code class=\"codespan\">&#39;120%&#39;</code>、<code class=\"codespan\">[&#39;55%&#39;, 23]</code>), which is based on its <a href=\"#series-pictorialBar.symbolSize\">symbolSize</a>.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;-50%&#39;]</code> means the graphic element will be adjusted upward half of the size of itself.</p>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-position&reset=1&edit=1\" width=\"800\" height=\"600\"><iframe />\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolOffset\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolOffset\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolOffset: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolOffset: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolOffset: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n","default":"[0, 0]"},"symbolRotate":{"type":["number"],"description":"<p>The degree of the rotation of a graphic element.</p>\n<p>Notice, <code class=\"codespan\">symbolRotate</code> will not affect the position of the graphic element, but just rotating by its center.</p>\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolRotate\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolRotate\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolRotate: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolRotate: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolRotate: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n"},"symbolRepeat":{"type":["boolean","number","string"],"description":"<p>Whether to repeat a graphic element. Optional values:</p>\n<ul>\n<li><code class=\"codespan\">false</code>/<code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code>: Do not repeat, that is, each graphic element represents a data item.</li>\n<li><code class=\"codespan\">true</code>: Repeat, that is, a group of repeated graphic elements represent a data item. The repeat times is calculated according to <a href=\"#series-pictorialBar.data\">data</a>.</li>\n<li>a number: Repeat, that is a group of repeated graphic elements represent a data item. The repeat times is always the given number.</li>\n<li><code class=\"codespan\">&#39;fixed&#39;</code>: Repeat, that is a group of repeated graphic elements represent a data item. The repeat times is calcuated according to <a href=\"#series-pictorialBar.symbolBoundingData\">symbolBoundingData</a>, that is, the repeat times has nothing to do with <a href=\"#series-pictorialBar.data\">data</a>. The setting is useful when graphic elements are used as background.</li>\n</ul>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeat&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolRepeat\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolRepeat\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolRepeat: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolRepeat: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolRepeat: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n"},"symbolRepeatDirection":{"type":["string"],"description":"<p>When <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used, <code class=\"codespan\">symbolRepeatDirection</code> specifies the render order of the repeated graphic elements. The setting is useful in these cases below:</p>\n<ul>\n<li><p>If <a href=\"#series-pictorialBar.symbolMargin\">symbolMargin</a> is set as a negative value, repeated elements will overlap with each other. <code class=\"codespan\">symbolRepeatDirection</code> can be used to specify the order of overlap.</p>\n</li>\n<li><p>If <a href=\"#series-pictorialBar.animationDelay\">animationDelay</a> or <a href=\"#series-pictorialBar.animationDelayUpdate\">animationDelayUpdate</a> is used, <code class=\"codespan\">symbolRepeatDirection</code> specifies the order of index.</p>\n</li>\n</ul>\n<p>Optional values can be <code class=\"codespan\">&#39;start&#39;</code> and <code class=\"codespan\">&#39;end&#39;</code>.</p>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeatDirection&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolRepeatDirection\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolRepeatDirection\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolRepeatDirection: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolRepeatDirection: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolRepeatDirection: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n","default":"'start'"},"symbolMargin":{"type":["number","string"],"description":"<p>Specify margin of both sides of a graphic element. (&quot;both sides&quot; means the two sides in the direction of its value axis). It works only when <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used.</p>\n<p>Absolute value can be used (like <code class=\"codespan\">20</code>), or percent value can be used (like <code class=\"codespan\">&#39;-30%&#39;</code>), which is based on its <a href=\"#series-pictorialBar.symbolSize\">symbolSize</a>.</p>\n<p><code class=\"codespan\">symbolMargin</code> can be positive value or negative value, which enables overlap of graphic elements when <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used.</p>\n<p>A <code class=\"codespan\">&quot;!&quot;</code> can be appended on the end of the value, like <code class=\"codespan\">&quot;30%!&quot;</code> or <code class=\"codespan\">25!</code>, which means a extra blank will be added on the both ends, otherwise the graphic elements on both ends will reach the boundary by default.</p>\n<p>Notice:</p>\n<ul>\n<li>When <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is <code class=\"codespan\">true</code>/<code class=\"codespan\">&#39;fixed&#39;</code>:\n  The given <code class=\"codespan\">symbolMargin</code> is just a reference value. The final gap of graphic elements will be calculated according to <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a>, <code class=\"codespan\">symbolMargin</code> and <a href=\"#series-pictorialBar.symbolBoundingData\">symbolBoundingData</a>.</li>\n<li>When <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is set as a number:\n  <code class=\"codespan\">symbolMargin</code> does not work any more.</li>\n</ul>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeatLayout&reset=1&edit=1\" width=\"800\" height=\"600\"><iframe />\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolMargin\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolMargin\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolMargin: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolMargin: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolMargin: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n"},"symbolClip":{"type":["boolean"],"description":"<p>Whether to clip graphic elements.</p>\n<ul>\n<li><code class=\"codespan\">false</code>/null/undefined: The whole graphic elements represent the size of value.</li>\n<li><code class=\"codespan\">true</code>: The clipped graphic elements reperent the size of value.</li>\n</ul>\n<p><code class=\"codespan\">symbolClip</code> is usually used in this case: both &quot;amount value&quot; and &quot;current value&quot; should be displayed. In this case, tow series can be used. One for background, using complete graphic elements, while another for current value, using clipped graphic elements.</p>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-clip&reset=1&edit=1\" width=\"800\" height=\"600\"><iframe />\n\n\n<p>Notice, in the example above,</p>\n<ul>\n<li>The same <a href=\"#series.pictorialBar.symbolBoundingData\">symbolBoundingData</a> is used in &quot;background series&quot; and &quot;current value seires&quot;, which makes their graphic elements are the same size.</li>\n<li>A bigger <a href=\"#series.pictorialBar.z\">z</a> is set on &quot;current value series&quot;, which makes it is over &quot;background series&quot;.</li>\n</ul>\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolClip\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolClip\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolClip: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolClip: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolClip: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n","default":false},"symbolBoundingData":{"type":["number"],"description":"<p>Defines a bounding area availble for the graphic elements. This setting gives a data, which will then be translated to a coordinate on the coordinate system. The coordinate specifies the bounding. Namely, if <code class=\"codespan\">symbolBoundingData</code> is set, the final size (or layout) of the graphic elements depend on the <code class=\"codespan\">symbolBoundingData</code>.</p>\n<p>When reference bar is horizontal, <code class=\"codespan\">symbolBoundingData</code> is coresponding to x axis, while reference bar is vertical, <code class=\"codespan\">symbolBoundingData</code> is coresponding to y axis.</p>\n<p>Rule:</p>\n<ul>\n<li><p>If <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is not used:</p>\n<p>  <code class=\"codespan\">symbolBoundingData</code> is the same as the size of reference bar by default. The size of the graphic element is detemined by <code class=\"codespan\">symbolBoundingData</code>. For example, if reference bar is vertical, its data is <code class=\"codespan\">24</code>, <code class=\"codespan\">symbolSize</code> is set as <code class=\"codespan\">[30, &#39;50%&#39;]</code>, <code class=\"codespan\">symbolBoundingData</code> is set as <code class=\"codespan\">124</code>, the final size of the graphic element will be <code class=\"codespan\">124 * 50% = 62</code>. If <code class=\"codespan\">symbolBoundingData</code> is not set, the final size will be <code class=\"codespan\">24 * 50% = 12</code>.</p>\n</li>\n<li><p>If <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used:</p>\n<p>  <code class=\"codespan\">symbolBoundingData</code> is the extreme value of the coordinate system. <code class=\"codespan\">symbolBoundingData</code> defines a bounding area, where repeated graphic elements layout according to <a href=\"#series-pictorialBar.symbolMargin\">symbolMargin</a> and <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> and <a href=\"#series-pictorialBar.symbolSize\">symbolSize</a>. Both these settings determine the gap size of the repeated graphic elements.</p>\n</li>\n</ul>\n<p><code class=\"codespan\">symbolBoundingData</code> is usually used in these cases:</p>\n<ul>\n<li><p>When <a href=\"#series-pictorialBar.symbolClip\">symbolCilp</a> is used:</p>\n<p>  And a series is used to display &quot;amont value&quot;, while another series is used to display &quot;current value&quot;. <code class=\"codespan\">symbolBoundingData</code> can be used to ensure that the graphic elements of these two series are at the same size.</p>\n</li>\n</ul>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-clip&reset=1&edit=1\" width=\"800\" height=\"600\"><iframe />\n\n\n<ul>\n<li><p>When <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used:</p>\n<p>  <code class=\"codespan\">symbolBoundingData</code> can be use to ensure the gaps of the elements in different bars are the same. Of cource, you can do not set <code class=\"codespan\">symbolBoundingData</code>, whose default value is a stable value (extreme value of the coordinate system).</p>\n</li>\n</ul>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeatLayout&reset=1&edit=1\" width=\"800\" height=\"600\"><iframe />\n\n\n<p><br>\n<code class=\"codespan\">symbolBoundingData</code> can also be an array, such as <code class=\"codespan\">[-40, 60]</code>, which specifies both negative and positive symbolBoundingData.</p>\n<p>Check this example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-symbolBoundingDataArray&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolBoundingData\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolBoundingData\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolBoundingData: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolBoundingData: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolBoundingData: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n"},"symbolPatternSize":{"type":["number"],"description":"<p>Image can be used as the pattern of graphic elements.</p>\n<pre><code class=\"lang-js\">var textureImg = new Image();\ntextureImg.src = &#39;data:image/jpeg;base64,...&#39;; // dataURI\n// Or\n// textureImg.src = &#39;http://xxx.xxx.xxx/xx.png&#39;; // URL\n...\nitemStyle: {\n    color: {\n        image: textureImg,\n        repeat: &#39;repeat&#39;\n    }\n}\n</code></pre>\n<p><code class=\"codespan\">symbolPatternSize</code> specifies the size of pattern image. For example, if <code class=\"codespan\">symbolPatternSize</code> is <code class=\"codespan\">400</code>, the pattern image will be displayed at the size of <code class=\"codespan\">400px * 400px</code>.</p>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-patternSize&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolPatternSize\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolPatternSize\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    symbolPatternSize: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolPatternSize: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolPatternSize: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n","default":400},"z":{"type":["number"],"description":"<p>Specify the relationship of overlap between graphic elements. A bigger value means higher.</p>\n"},"hoverAnimation":{"type":["boolean"],"description":"<p>Whether to enable hover animation.</p>\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.hoverAnimation\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.hoverAnimation\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n    hoverAnimation: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        hoverAnimation: ... // Only affect this data item.\n    }, {\n        value: 56\n        hoverAnimation: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n","default":false},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Specify the delay time before animation start. Callback function can be used, where different delay time can be used on different element.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (dataIndex, params) {\n    return params.index * 30;\n}\n// Or inverse:\nanimationDelay: function (dataIndex, params) {\n    return (params.count - 1 - params.index) * 30;\n}\n</code></pre>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeatDirection&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n","default":0},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Specify the delay time before update animation. Callback function can be used, where different delay time can be used on different element.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (dataIndex, params) {\n    return params.index * 30;\n}\n// Or inverse:\nanimationDelay: function (dataIndex, params) {\n    return (params.count - 1 - params.index) * 30;\n}\n</code></pre>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeatDirection&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","default":0},"label":{"type":["Object"],"description":"<p>The style setting of the text label in a single bar.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"inside"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-pictorialBar.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-pictorialBar.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number","Function"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-pictorialBar.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-pictorialBar.markPoint.data.x\">x</a>, <a href=\"#series-pictorialBar.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-pictorialBar.markPoint.data.coord\">coord</a> attribute, in which <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-pictorialBar.markPoint.data.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-pictorialBar.markPoint.data.valueIndex\">valueIndex</a> or <a href=\"#series-pictorialBar.markPoint.data.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n    {\n        name: &#39;maximum&#39;,\n        type: &#39;max&#39;\n    }, \n    {\n        name: &#39;coordinate&#39;,\n        coord: [10, 20]\n    }, {\n        name: &#39;fixed x position&#39;,\n        yAxis: 10,\n        x: &#39;90%&#39;\n    }, \n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Available when using <a href=\"#series-pictorialBar.markPoint.data.type\">type</a> it is used to assign maximum value and minimum value in dimensions, it could be <code class=\"codespan\">0</code> (xAxis, radiusAxis), <code class=\"codespan\">1</code> (yAxis, angleAxis), and use the first value axis dimension by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-pictorialBar.markPoint.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of mark point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>mark point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of mark point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of mark point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["Object"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-pictorialBar.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class=\"codespan\">symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-pictorialBar.markLine.data.0.x\">x</a>, <a href=\"#series-pictorialBar.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-pictorialBar.markLine.data.0.coord\">coord</a> attribute, in which <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-pictorialBar.markLine.data.0.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-pictorialBar.markLine.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-pictorialBar.markLine.data.0.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n<li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code class=\"codespan\">xAxis</code> or <code class=\"codespan\">yAxis</code>. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a> for example.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p>You may also set the type of mark line through <code class=\"codespan\">type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code class=\"codespan\">valueIndex</code>.</p>\n<pre><code>data: [\n    {\n        name: &#39;average line&#39;,\n        // &#39;average&#39;, &#39;min&#39;, and &#39;max&#39; are supported\n        type: &#39;average&#39;\n    },\n    {\n        name: &#39;Horizontal line with Y value at 100&#39;,\n        yAxis: 100\n    },\n    [\n        {\n            // Use the same name with starting and ending point\n            name: &#39;Minimum to Maximum&#39;,\n            type: &#39;min&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n    [\n        {\n            name: &#39;Markline between two points&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [{\n        // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n        yAxis: &#39;max&#39;,\n        x: &#39;90%&#39;\n    }, {\n        type: &#39;max&#39;\n    }],\n    [\n        {\n            name: &#39;Mark line between two points&#39;,\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n<li><code class=\"codespan\">&#39;median&#39;</code> median value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-pictorialBar.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-pictorialBar.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'starting point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> minimum value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> maximum value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n<li><code class=\"codespan\">&#39;median&#39;</code> median value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-pictorialBar.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class=\"codespan\">0</code> (for xAxis, or radiusAxis), or <code class=\"codespan\">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-pictorialBar.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class=\"codespan\">x</code>, or <code class=\"codespan\">angle</code> for line charts, or <code class=\"codespan\">open</code>, or <code class=\"codespan\">close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class=\"codespan\">x</code>, and <code class=\"codespan\">y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code class=\"codespan\">radius</code>, and <code class=\"codespan\">angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code class=\"codespan\">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class=\"codespan\">number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code class=\"codespan\">string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code class=\"codespan\">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'ending point'"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since version 4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}: the value of a dimension named</code>&#39;xxx&#39;<code class=\"codespan\">, for example,</code>{@product}<code class=\"codespan\">refers the value of</code>&#39;product&#39;` dimension.</li>\n<li><code class=\"codespan\">{@[n]}: the value of a dimension at the index of</code>n<code class=\"codespan\">, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code class=\"codespan\">data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li><p>Specify the coordinate in screen coordinate system using <a href=\"#series-pictorialBar.markArea.data.0.x\">x</a>, <a href=\"#series-pictorialBar.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code class=\"codespan\">5</code>), or percent (e.g., the value is <code class=\"codespan\">&#39;35%&#39;</code>).</p>\n</li>\n<li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using\n<a href=\"#series-pictorialBar.markArea.data.0.coord\">coord</a>, which can be also set as <code class=\"codespan\">&#39;min&#39;</code>, <code class=\"codespan\">&#39;max&#39;</code>, <code class=\"codespan\">&#39;average&#39;</code> (e.g, <code class=\"codespan\">coord: [23, &#39;min&#39;]</code>, or <code class=\"codespan\">coord: [&#39;average&#39;, &#39;max&#39;]</code>).</p>\n</li>\n</ol>\n<ol start=\"3\">\n<li>Locate the point on the min value or max value of <code class=\"codespan\">series.data</code> using <a href=\"#series-pictorialBar.markArea.data.0.type\">type</a>, where <a href=\"#series-pictorialBar.markArea.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-pictorialBar.markPoint.data.0.valueDim\">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</li>\n<li>If in cartesian, you can only specify <code class=\"codespan\">xAxis</code> or <code class=\"codespan\">yAxis</code> to define a mark area based on only X or Y axis, see sample <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a></li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n\n    [\n        {\n            name: &#39;From average to max&#39;,\n            type: &#39;average&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n\n    [\n        {\n            name: &#39;Mark area between two points in data coordiantes&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [\n        {\n            name: &#39;From 60 to 80&#39;,\n            yAxis: 60\n        },\n        {\n            yAxis: 80\n        }\n    ], [\n        {\n            name: &#39;Mark area covers all data&#39;\n            coord: [&#39;min&#39;, &#39;min&#39;]\n        },\n        {\n            coord: [&#39;max&#39;, &#39;max&#39;]\n        }\n    ],\n    [\n        {\n            name: &#39;Mark area in two screen points&#39;,\n            x: 100,\n            y: 100\n        }, {\n            x: &#39;90%&#39;,\n            y: &#39;10%&#39;\n        }\n    ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> max value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> min value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-pictorialBar.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-pictorialBar.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'start'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class=\"codespan\">&#39;min&#39;</code> max value.</li>\n<li><code class=\"codespan\">&#39;max&#39;</code> min value.</li>\n<li><code class=\"codespan\">&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-pictorialBar.markArea.data.type\">type</a> used.\nThe value can be <code class=\"codespan\">0</code> (means xAxis, radiusAxis) or <code class=\"codespan\">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-pictorialBar.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class=\"codespan\">x</code>, <code class=\"codespan\">angle</code> in line chart, and <code class=\"codespan\">open</code>, <code class=\"codespan\">close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code> on <a href=\"#grid\">cartesian</a>, or <code class=\"codespan\">radius</code>, <code class=\"codespan\">angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"name":{"type":["string"],"description":"<p>Name of the marker, which will display as a label.</p>\n","default":"'end'"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in pictorial bar chart.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in pictorial bar chart, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut","properties":{"animationDelay":{"type":["number","Function"],"description":"<p>Specify the delay time before animation start. Callback function can be used, where different delay time can be used on different element.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (dataIndex, params) {\n    return params.index * 30;\n}\n// Or inverse:\nanimationDelay: function (dataIndex, params) {\n    return (params.count - 1 - params.index) * 30;\n}\n</code></pre>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeatDirection&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n","default":0},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Specify the delay time before update animation. Callback function can be used, where different delay time can be used on different element.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (dataIndex, params) {\n    return params.index * 30;\n}\n// Or inverse:\nanimationDelay: function (dataIndex, params) {\n    return (params.count - 1 - params.index) * 30;\n}\n</code></pre>\n<p>For example:</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeatDirection&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n\n\n\n\n\n\n\n\n\n","default":0}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong> Theme river </strong></p>\n<p>It is a special flow graph which is mainly used to present the changes of an event or theme during a period.</p>\n<p><strong>Sample: </strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=themeRiver-lastfm&edit=1&reset=1\" width=\"700\" height=\"580\"><iframe />\n\n\n\n<p><br>\n<strong>visual encoding: </strong></p>\n<p>The ribbon-shape river branches in different colors in theme river encode variable events or themes. The width of river branches encode the value of the original dataset.</p>\n<p>What&#39;s more, the time attribute of the orinigal dataset would map to a single time axis.</p>\n","properties":{"type":{"type":["string"],"description":"","default":"'themeRiver'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between thmemRiver component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, or <code class=\"codespan\">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"5%"},"top":{"type":["string","number"],"description":"<p>Distance between thmemRiver component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>; and it can also be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, or <code class=\"codespan\">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n","default":"5%"},"right":{"type":["string","number"],"description":"<p>Distance between thmemRiver component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n","default":"5%"},"bottom":{"type":["string","number"],"description":"<p>Distance between thmemRiver component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n","default":"5%"},"width":{"type":["string","number"],"description":"<p>Width of thmemRiver component. </p>\n","default":null},"height":{"type":["string","number"],"description":"<p>Height of thmemRiver component. </p>\n<p><strong> Notes: </strong>\nThe positional information of the whole theme river view reuses the positional information of a single time axis, which are left, top, right and bottom.</p>\n","default":null},"coordinateSystem":{"type":["string"],"description":"<p>coordinate. The theme river adopts sinle time axis.</p>\n","default":"\"single\""},"boundaryGap":{"type":["Array"],"description":"<p>The boundary gap of the direction orthogonal with coordinate axis in diagram, which is set to adjust the diagram position, keeping it on the screen center instead of the upside or downside of the screen.</p>\n","default":"[\"10%\", \"10%\"]"},"singleAxisIndex":{"type":["number"],"description":"<p>The index of single time axis, which defaults to be 0 because it contains only one axis.</p>\n","default":0},"label":{"type":["Object"],"description":"<p><code class=\"codespan\">label</code> describes style of text labels with which each ribbon-shape river branch corresponds in theme river.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'left'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'#000'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":11},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>style of each ribbon-shape river branch in theme river.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-js\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'left'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'#000'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":11},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>&quot;Rich text styles&quot; can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n    // Styles defined in &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<style_name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fragment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fragment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","default":0},"shadowColor":{"type":["Color"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":20},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","default":"'rgba(0,0,0,0.8)'"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<pre><code class=\"lang-js\">data: [\n    [&quot;2015/11/09&quot;,10,&quot;DQ&quot;],\n    [&quot;2015/11/10&quot;,10,&quot;DQ&quot;],\n    [&quot;2015/11/11&quot;,10,&quot;DQ&quot;],\n    [&quot;2015/11/08&quot;,10,&quot;SS&quot;],\n    [&quot;2015/11/09&quot;,10,&quot;SS&quot;],\n    [&quot;2015/11/10&quot;,10,&quot;SS&quot;],\n    [&quot;2015/11/11&quot;,10,&quot;SS&quot;],\n    [&quot;2015/11/12&quot;,10,&quot;SS&quot;],\n    [&quot;2015/11/13&quot;,10,&quot;QG&quot;],\n    [&quot;2015/11/08&quot;,10,&quot;QG&quot;],\n    [&quot;2015/11/11&quot;,10,&quot;QG&quot;],\n    [&quot;2015/11/13&quot;,10,&quot;QG&quot;],\n]\n</code></pre>\n<p><strong>data specification: </strong></p>\n<p>As what is shown above, the data format of theme river is double dimensional array. Each item of the inner array consists of the time attribute , the value at a time point and the name of an event or theme. It needs to be noticed that you should provide an event or theme with a complete time quantum as main river. Other events and themes are based on the main river. The default value of time point should be set as 0. That is to say other events or themes are included in the main river. Once they are beyond the main river, the layout would be wrong. That is because a baseline should be calculated to draw each event as ribbon shape when the whole diagram layout is calculated. As the example above, the event &quot;SS&quot; is a main river. After dispose, we would complete these 3 default time points with the format of [&quot;2015/11/08&quot;,0,&quot;DQ&quot;], [&quot;2015/11/12&quot;,0,&quot;DQ&quot;], [&quot;2015/11/13&quot;,0,&quot;DQ&quot;], making it align with the main river. From what is mentioned, we could set default value on any position of a complete time period.</p>\n","items":{"type":"Object","properties":{"date":{"type":["string"],"description":"<p>the time attribute of time and theme.</p>\n"},"value":{"type":["number"],"description":"<p>the value of an event or theme at a time point.</p>\n"},"name":{"type":["string"],"description":"<p>the name of an event or theme.</p>\n"}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong>custom series</strong></p>\n<p><code class=\"codespan\">custom series</code> supports customizing graphic elements, and then generate more types of charts.</p>\n<p>echarts manages the creation, deletion, animation and interaction with other components (like <a href=\"#dataZoom\">dataZoom</a>、<a href=\"#visualMap\">visualMap</a>), which frees developers from handling those issue themselves.</p>\n<p><strong>For example, a &quot;x-range&quot; chart is made by custom sereis:</strong></p>\n<iframe  data-src=\"https://echarts.apache.org/examples/zh/view.html?c=custom-profile&reset=1&edit=1\" width=\"800\" height=\"400\"><iframe />\n\n\n<p><strong><a href=\"https://echarts.apache.org/examples/en/index.html#chart-type-custom\" target=\"_blank\">More samples of custom series</a></strong></p>\n<p><strong><a href=\"tutorial.html#Custom%20Series\" target=\"_blank\">A tutotial of custom series</a></strong></p>\n<p><br>\n<strong>Customize the render logic (in renderItem method)</strong></p>\n<p><code class=\"codespan\">custom series</code> requires developers to write a render logic by themselves. This render logic is called <a href=\"#series-custom.renderItem\">renderItem</a>.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">var option = {\n    ...,\n    series: [{\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            var categoryIndex = api.value(0);\n            var start = api.coord([api.value(1), categoryIndex]);\n            var end = api.coord([api.value(2), categoryIndex]);\n            var height = api.size([0, 1])[1] * 0.6;\n\n            var rectShape = echarts.graphic.clipRectByRect({\n                x: start[0],\n                y: start[1] - height / 2,\n                width: end[0] - start[0],\n                height: height\n            }, {\n                x: params.coordSys.x,\n                y: params.coordSys.y,\n                width: params.coordSys.width,\n                height: params.coordSys.height\n            });\n\n            return rectShape &amp;&amp; {\n                type: &#39;rect&#39;,\n                shape: rectShape,\n                style: api.style()\n            };\n        },\n        data: data\n    }]\n}\n</code></pre>\n<p><a href=\"#series-custom.renderItem\">renderItem</a> will be called on each data item.</p>\n<p><a href=\"#series-custom.renderItem\">renderItem</a> provides two parameters:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.arguments.params\">params</a>: provides info about the current series and data and coordinate system.</li>\n<li><a href=\"#series-custom.renderItem.arguments.api\">api</a>: includes some methods.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem\">renderItem</a> method should returns graphic elements definitions.See <a href=\"#series-custom.renderItem.return\">renderItem.return</a>.</p>\n<p>Generally, the main process of <a href=\"#series-custom.renderItem\">renderItem</a> is that retrieve value from data and convert them to graphic elements on the current coordinate system. Two methods in <a href=\"#series-custom.renderItem.arguments.api\">renderItem.arguments.api</a> are always used in this procedure:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.arguments.api.value\">api.value(...)</a> is used to retrieve value from data. For example, <code class=\"codespan\">api.value(0)</code> retrieve the value of the first dimension in the current data item.</li>\n<li><a href=\"#series-custom.renderItem.arguments.api.coord\">api.coord(...)</a> is used to convert data to coordinate. For example, <code class=\"codespan\">var point = api.coord([api.value(0), api.value(1)])</code> converet the data to the point on the current coordinate system.</li>\n</ul>\n<p>Sometimes <a href=\"#series-custom.renderItem.arguments.api.size\">api.size(...)</a> method is needed, which calculates the size on the coordinate system by a given data range.</p>\n<p>Moreover, <a href=\"#series-custom.renderItem.arguments.api.style\">api.style(...)</a> method can be used to set style. It provides not only the style settings specified in <a href=\"#series-custom.itemStyle\">series.itemStyle</a>, but also the result of visual mapping. This method can also be called like <code class=\"codespan\">api.style({fill: &#39;green&#39;, stroke: &#39;yellow&#39;})</code> to override those style settings.</p>\n<p><br>\n<strong>Dimension mapping (by encode and dimension option)</strong></p>\n<p>In most cases, <a href=\"#series-custom.encode\">series.encode</a> needs to be specified when using <code class=\"codespan\">custom series</code> series, which indicate the mapping of dimensions, and then echarts can render appropriate axis by the extent of those data.</p>\n<p><code class=\"codespan\">encode.tooltip</code> and <code class=\"codespan\">encode.label</code> can also be specified to define the content of default <code class=\"codespan\">tooltip</code> and <code class=\"codespan\">label</code>.\n<a href=\"#series-custom.dimensions\">series.dimensions</a> can also be specified to defined names of each dimensions, which will be displayed in tooltip.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;custom&#39;,\n    renderItem: function () {\n        ...\n    },\n    encode: {\n        x: [2, 4, 3],\n        y: 1,\n        label: 0,\n        tooltip: [2, 4, 3]\n    }\n}\n</code></pre>\n<p><br>\n<strong>Controlled by dataZoom</strong></p>\n<p>When use <code class=\"codespan\">custom series</code> with <a href=\"#dataZoom\">dataZoom</a>, <a href=\"#dataZoom.filterMode\">dataZoom.filterMode</a> usually be set as <code class=\"codespan\">&#39;weakFilter&#39;</code>, which prevent <code class=\"codespan\">dataItem</code> from being filtered when only part of its dimensions are out of the current data window.</p>\n<p><br>\n<br>\n<strong>Difference between <code class=\"codespan\">dataIndex</code> and <code class=\"codespan\">dataIndexInside</code></strong></p>\n<ul>\n<li><code class=\"codespan\">dataIndex</code> is the index of a <code class=\"codespan\">dataItem</code> in the original data.</li>\n<li><code class=\"codespan\">dataIndexInside</code> is the index of a <code class=\"codespan\">dataItem</code> in the current data window (see <a href=\"#dataZoom\">dataZoom</a>.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.arguments.api\">renderItem.arguments.api</a> uses <code class=\"codespan\">dataIndexInside</code> as the input parameter but not <code class=\"codespan\">dataIndex</code>, because conversion from <code class=\"codespan\">dataIndex</code> to <code class=\"codespan\">dataIndexInside</code> is time-consuming.</p>\n<p><br>\n<strong>Event listener</strong></p>\n<pre><code class=\"lang-js\">chart.setOption({\n    // ...\n    series: {\n        type: &#39;custom&#39;,\n        renderItem: function () {\n            // ...\n            return {\n                type: &#39;group&#39;,\n                children: [{\n                    type: &#39;circle&#39;\n                    // ...\n                }, {\n                    type: &#39;circle&#39;,\n                    name: &#39;aaa&#39;,\n                    // User specified info, available\n                    // in event handler.\n                    info: 12345,\n                    // ...\n                }]\n            };\n        }\n    }\n});\nchart.on(&#39;click&#39;, {element: &#39;aaa&#39;}, function (params) {\n    // When the element with name &#39;aaa&#39; clicked,\n    // this method called.\n    console.log(params.info);\n});\n</code></pre>\n","properties":{"type":{"type":["string"],"description":"","default":"'custom'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"legendHoverLink":{"type":["boolean"],"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n","default":true},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">null</code> or <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>  No coordinate.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">&#39;cartesian2d&#39;</code></p>\n<p>  Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-custom.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-custom.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">&#39;polar&#39;</code></p>\n<p>  Use polar coordinates, with <a href=\"#series-custom.polarIndex\">polarIndex</a> to assign the corresponding polar coordinate component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">&#39;geo&#39;</code></p>\n<p>  Use geographic coordinate, with <a href=\"#series-custom.geoIndex\">geoIndex</a> to assign the corresponding geographic coordinate components.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">&#39;none&#39;</code></p>\n<p>  Do not use coordinate system.</p>\n</li>\n</ul>\n","default":"'cartesian2d'"},"xAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#xAxis\">x axis</a> to combine with, which is  useful for multiple x axes in one chart.</p>\n","default":0},"yAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#yAxis\">y axis</a> to combine with, which is  useful for multiple y axes in one chart.</p>\n","default":0},"polarIndex":{"type":["number"],"description":"<p>Index of <a href=\"#polar\">polar coordinate</a> to combine with, which is useful for multiple polar axes in one chart.</p>\n","default":0},"geoIndex":{"type":["number"],"description":"<p>Index of <a href=\"#geo\">geographic coordinate</a> to combine with, which is useful for multiple geographic axes in one chart.</p>\n","default":0},"calendarIndex":{"type":["number"],"description":"<p>Index of <a href=\"#calendar\">calendar coordinates</a> to combine with, which is useful for multiple calendar coordinates in one chart.</p>\n","default":0},"renderItem":{"type":["Function"],"description":"<p><code class=\"codespan\">custom series</code> requires developers to write a render logic by themselves. This render logic is called <a href=\"#series-custom.renderItem\">renderItem</a>.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">var option = {\n    ...,\n    series: [{\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            var categoryIndex = api.value(0);\n            var start = api.coord([api.value(1), categoryIndex]);\n            var end = api.coord([api.value(2), categoryIndex]);\n            var height = api.size([0, 1])[1] * 0.6;\n\n            var rectShape = echarts.graphic.clipRectByRect({\n                x: start[0],\n                y: start[1] - height / 2,\n                width: end[0] - start[0],\n                height: height\n            }, {\n                x: params.coordSys.x,\n                y: params.coordSys.y,\n                width: params.coordSys.width,\n                height: params.coordSys.height\n            });\n\n            return rectShape &amp;&amp; {\n                type: &#39;rect&#39;,\n                shape: rectShape,\n                style: api.style()\n            };\n        },\n        data: data\n    }]\n}\n</code></pre>\n<p><a href=\"#series-custom.renderItem\">renderItem</a> will be called on each data item.</p>\n<p><a href=\"#series-custom.renderItem\">renderItem</a> provides two parameters:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.arguments.params\">params</a>: provides info about the current series and data and coordinate system.</li>\n<li><a href=\"#series-custom.renderItem.arguments.api\">api</a>: includes some methods.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem\">renderItem</a> method should returns graphic elements definitions.See <a href=\"#series-custom.renderItem.return\">renderItem.return</a>.</p>\n<p>Generally, the main process of <a href=\"#series-custom.renderItem\">renderItem</a> is that retrieve value from data and convert them to graphic elements on the current coordinate system. Two methods in <a href=\"#series-custom.renderItem.arguments.api\">renderItem.arguments.api</a> are always used in this procedure:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.arguments.api.value\">api.value(...)</a> is used to retrieve value from data. For example, <code class=\"codespan\">api.value(0)</code> retrieve the value of the first dimension in the current data item.</li>\n<li><a href=\"#series-custom.renderItem.arguments.api.coord\">api.coord(...)</a> is used to convert data to coordinate. For example, <code class=\"codespan\">var point = api.coord([api.value(0), api.value(1)])</code> converet the data to the point on the current coordinate system.</li>\n</ul>\n<p>Sometimes <a href=\"#series-custom.renderItem.arguments.api.size\">api.size(...)</a> method is needed, which calculates the size on the coordinate system by a given data range.</p>\n<p>Moreover, <a href=\"#series-custom.renderItem.arguments.api.style\">api.style(...)</a> method can be used to set style. It provides not only the style settings specified in <a href=\"#series-custom.itemStyle\">series.itemStyle</a>, but also the result of visual mapping. This method can also be called like <code class=\"codespan\">api.style({fill: &#39;green&#39;, stroke: &#39;yellow&#39;})</code> to override those style settings.</p>\n","properties":{"arguments":{"type":["*"],"description":"<p>Parameters of <code class=\"codespan\">renderItem</code>.</p>\n","properties":{"params":{"type":["Object"],"description":"<p>The first parameter of <code class=\"codespan\">renderItem</code>, including:</p>\n<pre><code class=\"lang-js\">{\n    context: // {string} An object that developers can store something temporarily here. Life cycle: current round of rendering.\n    seriesId: // {string} The id of this series.\n    seriesName: // {string} The name of this series.\n    seriesIndex: // {number} The index of this series.\n    dataIndex: // {number} The index of this data item.\n    dataIndexInside: // {number} The index of this data item in the current data window (see dataZoom).\n    dataInsideLength: // {number} The count of data in the current data window (see dataZoom).\n    actionType: // {string} The type of action that trigger this render.\n    coordSys: // coordSys is variable by different types of coordinate systems:\n    coordSys: {\n        type: &#39;cartesian2d&#39;,\n        x: // {number} x of grid rect\n        y: // {number} y of grid rect\n        width: // {number} width of grid rect\n        height: // {number} height of grid rect\n    },\n    coordSys: {\n        type: &#39;calendar&#39;,\n        x: // {number} x of calendar rect\n        y: // {number} y of calendar rect\n        width: // {number} width of calendar rect\n        height: // {number} height of calendar rect\n        cellWidth: // {number} calendar cellWidth\n        cellHeight: // {number} calendar cellHeight\n        rangeInfo: {\n            start: // date start of calendar.\n            end: // date end of calendar.\n            weeks: // number of weeks in calendar.\n            dayCount: // day count in calendar.\n        }\n    },\n    coordSys: {\n        type: &#39;geo&#39;,\n        x: // {number} x of geo rect\n        y: // {number} y of geo rect\n        width: // {number} width of geo rect\n        height: // {number} height of geo rect\n        zoom: // {number} zoom ratio, 1 if no zoom, 0.5 means shrink to 50%.\n    },\n    coordSys: {\n        type: &#39;polar&#39;,\n        cx: // {number} x of polar center.\n        cy: // {number} y of polar center.\n        r: // {number} outer radius of polar.\n        r0: // {number} inner radius of polar.\n    },\n    coordSys: {\n        type: &#39;singleAxis&#39;,\n        x: // {number} x of singleAxis rect\n        y: // {number} y of singleAxis rect\n        width: // {number} width of singleAxis rect\n        height: // {number} height of singleAxis rect\n    }\n}\n</code></pre>\n<p>Difference between <code class=\"codespan\">dataIndex</code> and <code class=\"codespan\">dataIndexInside</code>:</p>\n<ul>\n<li><code class=\"codespan\">dataIndex</code> is the index of a <code class=\"codespan\">dataItem</code> in the original data.</li>\n<li><code class=\"codespan\">dataIndexInside</code> is the index of a <code class=\"codespan\">dataItem</code> in the current data window (see <a href=\"#dataZoom\">dataZoom</a>.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.arguments.api\">renderItem.arguments.api</a> uses <code class=\"codespan\">dataIndexInside</code> as the input parameter but not <code class=\"codespan\">dataIndex</code>, because conversion from <code class=\"codespan\">dataIndex</code> to <code class=\"codespan\">dataIndexInside</code> is time-consuming.</p>\n"},"api":{"type":["Object"],"description":"<p>The second parameter of <code class=\"codespan\">renderItem</code>.</p>\n","properties":{"value":{"type":["Function"],"description":"<p>Get value on the given dimension.</p>\n<pre><code>@param {number} dimension The given dimension. (index from 0).\n@param {number} [dataIndexInside] In most cases it is not necessary.\n@return {number} The value.\n</code></pre>"},"coord":{"type":["Function"],"description":"<p>Convert data to coordinate.</p>\n<pre><code>@param {Array.&lt;number&gt;} data.\n@return {Array.&lt;number&gt;} Point on canvas, at least includes [x, y].\n        In polar, it also contains:\n        polar: [x, y, radius, angle]\n</code></pre>"},"size":{"type":["Function"],"description":"<p>Get the size by the given data range.</p>\n<p>For example, in <code class=\"codespan\">cartesian2d</code>, suppose calling <code class=\"codespan\">api.size([2, 4])</code> returns <code class=\"codespan\">[12.4, 55]</code>. It represents that on x axis, data range <code class=\"codespan\">2</code> corresponds to size <code class=\"codespan\">12.4</code>, and on y axis data range <code class=\"codespan\">4</code> corresponds to size <code class=\"codespan\">55</code>.</p>\n<p>In some coordinate systems (for example, polar) or when log axis is used, the size is different in different point. So the second parameter is necessary to calculate size on the given point.</p>\n<pre><code>@param {Array.&lt;number&gt;} dataSize Data range.\n@param {Array.&lt;number&gt;} dataItem The point where the size will be calculated.\n@return {Array.&lt;number&gt;} The size.\n</code></pre>"},"style":{"type":["Function"],"description":"<p>The method obtains style info defined in <a href=\"#series-custom.itemStyle\">series.itemStyle</a>, and visual info obtained by visual mapping, and return them. Those returned info can be assigned to <code class=\"codespan\">style</code> attribute of graphic element definition directly. Developers can also override style info by calling this method like this: <code class=\"codespan\">api.style({fill: &#39;green&#39;, stroke: &#39;yellow&#39;})</code>.</p>\n<pre><code>@param {Object} [extra] Extra style info.\n@param {number} [dataIndexInside] In most cases, this parameter is not necessary.\n@return {Object} Style info, which can be assigned to `style` attribute of graphic element definition directly.\n</code></pre>"},"styleEmphasis":{"type":["Function"],"description":"<p>The method obtains style info defined in <a href=\"#series-custom.itemStyle.emphasis\">series.itemStyle.emphasis</a>, and visual info obtained by visual mapping, and return them. Those returned info can be assigned to <code class=\"codespan\">style</code> attribute of graphic element definition directly. Developers can also override style info by calling this method like this: <code class=\"codespan\">api.style({fill: &#39;green&#39;, stroke: &#39;yellow&#39;})</code>.</p>\n<pre><code>@param {Object} [extra] Extra style info.\n@param {number} [dataIndexInside] In most cases, this parameter is not necessary.\n@return {Object} Style info, which can be assigned to `style` attribute of graphic element definition directly.\n</code></pre>"},"visual":{"type":["Function"],"description":"<p>Get the visual info. It is rarely be used.</p>\n<pre><code>@param {string} visualType &#39;color&#39;, &#39;symbol&#39;, &#39;symbolSize&#39;, ...\n@param {number} [dataIndexInside] In most cases, this parameter is not necessary.\n@return {string|number} The value of visual.\n</code></pre>"},"barLayout":{"type":["Function"],"description":"<p>When <code class=\"codespan\">barLayout</code> is needed, (for example, when attaching some extra graphic elements to bar chart), this method can be used to obtain bar layout info.</p>\n<p>See a <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=custom-bar-trend\" target=\"_blank\">sample</a>.</p>\n<pre><code>@param {Object} opt\n@param {number} opt.count How many bars in each group.\n@param {number|string} [opt.barWidth] Width of a bar.\n        Can be an absolute value like `40` or a percent value like `&#39;60%&#39;`.\n        The percent is based on the calculated category width.\n@param {number|string} [opt.barMaxWidth] Max width of a bar.\n        Can be an absolute value like `40` or a percent value like `&#39;60%&#39;`.\n        The percent is based on the calculated category width.\n        Has higer priority than `opt.barWidth`.\n@param {number|string} [opt.barMinWidth] Min width of a bar.\n        Can be an absolute value like `40` or a percent value like `&#39;60%&#39;`.\n        The percent is based on the calculated category width.\n        Has higer priority than `opt.barWidth`.\n@param {number} [opt.barGap] Gap of bars in a group.\n@param {number} [opt.barCategoryGap] Gap of groups.\n@return {Array.&lt;Object&gt;} [{\n        width: {number} Width of a bar.\n        offset: {number} Offset of a bar, based on the left most edge.\n        offsetCenter: {number} bar Offset of a bar, based on the center of the bar.\n    }, ...]\n</code></pre>"},"currentSeriesIndices":{"type":["Function"],"description":"<p>Obtain the current series index. Notice that the <code class=\"codespan\">currentSeriesIndex</code> is different from <code class=\"codespan\">seriesIndex</code> when legend is used to filter some series.</p>\n<pre><code>@return {number}\n</code></pre>"},"font":{"type":["Function"],"description":"<p>Obtain font string, which can be used on style setting directly.</p>\n<pre><code>@param {Object} opt\n@param {string} [opt.fontStyle]\n@param {number} [opt.fontWeight]\n@param {number} [opt.fontSize]\n@param {string} [opt.fontFamily]\n@return {string} font string.\n</code></pre>"},"getWidth":{"type":["Function"],"description":"<pre><code>@return {number} Width of echarts containter.\n</code></pre>"},"getHeight":{"type":["Function"],"description":"<pre><code>@return {number} Height of echarts container.\n</code></pre>"},"getZr":{"type":["Function"],"description":"<pre><code>@return {module:zrender} zrender instance.\n</code></pre>"},"getDevicePixelRatio":{"type":["Function"],"description":"<pre><code>@return {number} The current devicePixelRatio.\n</code></pre>"}}}}},"return":{"type":["Object"],"description":"<p><code class=\"codespan\">renderItem</code> should returns graphic element definitions. Each graphic element is an object. See <a href=\"#graphic.elements\">graphic</a> for detailed info. (But width\\height\\top\\bottom is not supported here)</p>\n<p>If nothing should be rendered in this data item, just returns nothing.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">// Returns a rectangular.\n{\n    type: &#39;rect&#39;,\n    shape: {\n        x: x, y: y, width: width, height: height\n    },\n    style: api.style()\n}\n</code></pre>\n<pre><code class=\"lang-js\">// Returns a group of elements.\n{\n    type: &#39;group&#39;,\n    // If diffChildrenByName is set as `true`, `child.name` will be used\n    // to diff children, which improves animation transition but degrade\n    // performance. The default value is `false`.\n    // diffChildrenByName: true,\n    children: [{\n        type: &#39;circle&#39;,\n        shape: {\n            cx: cx, cy: cy, r: r\n        },\n        style: api.style()\n    }, {\n        type: &#39;line&#39;,\n        shape: {\n            x1: x1, y1: y1, x2: x2, y2: y2\n        },\n        style: api.style()\n    }]\n}\n</code></pre>\n"},"return_group":{"type":["Object"],"description":"<p><code class=\"codespan\">group</code> is the only type that can contain children, so that a group of elements can be positioned and transformed together.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"group"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>.</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"width":{"type":["number"],"description":"<p>Specify width of this <code class=\"codespan\">group</code>.</p>\n<p>This width is only used for the positioning of its children.</p>\n<p>When width is <code class=\"codespan\">0</code>, children can also be positioned according to its parent using <code class=\"codespan\">left: &#39;center&#39;</code>.</p>\n","default":0},"height":{"type":["number"],"description":"<p>Specify height of this <code class=\"codespan\">group</code>.</p>\n<p>This height is only used for the positioning of its children.</p>\n<p>When height is <code class=\"codespan\">0</code>, children can also be positioned according to its parent using <code class=\"codespan\">top: &#39;middle&#39;</code>.</p>\n","default":0},"diffChildrenByName":{"type":["boolean"],"description":"<p>In <a href=\"#series-custom\">custom series</a>, when <code class=\"codespan\">diffChildrenByName</code> is set as <code class=\"codespan\">true</code>, for each <a href=\"#series-custom.renderItem.return_group\">group</a> returned from <a href=\"#series-custom.renderItem\">renderItem</a>, &quot;diff&quot; will be performed to its <a href=\"#series-custom.renderItem.return_group.children\">children</a> according to the <a href=\"#series-custom.renderItem.return_polygon.name\">name</a> attribute of each graphic elements. Here &quot;diff&quot; means that map the coming graphic elements to the existing graphic elements when repainting according to <code class=\"codespan\">name</code>, which enables the transition animation if data is modified.</p>\n<p>But notice that the operation is performance consuming, do not use it for large data amount.</p>\n","default":false},"children":{"type":["Array"],"description":"<p>A list of children, each item is a declaration of an element.</p>\n"},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}},"return_path":{"type":["Object"],"description":"<p>Use <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> to describe a path. Can be used to draw icons or any other shapes fitting the specified size by auto transforming.</p>\n<p>See examples:\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=custom-calendar-icon\" target=\"_blank\">icons</a> and <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=custom-gantt-flight\" target=\"_blank\">shapes</a>.</p>\n<p>About width/height, cover/contain, see\n<a href=\"#series-custom.renderItem.return_path.shape.layout\">layout</a>.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"path"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>.</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"pathData":{"type":["string"],"description":"<p><a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a>.</p>\n<p>For example, <code class=\"codespan\">&#39;M0,0 L0,-20 L30,-20 C42,-20 38,-1 50,-1 L70,-1 L70,0 Z&#39;</code>.</p>\n<p>If <a href=\"#series-custom.renderItem.return_path.shape.width\">width</a>, <a href=\"#series-custom.renderItem.return_path.shape.height\">height</a>, <a href=\"#series-custom.renderItem.return_path.shape.x\">x</a> and <a href=\"#series-custom.renderItem.return_path.shape.y\">y</a> specified, <code class=\"codespan\">pathData</code> will be transformed to fit the defined rect. If they are not specified, do not do that.</p>\n<p><a href=\"#series-custom.renderItem.return_path.shape.layout\">layout</a> can be used to specify the transform strategy.</p>\n<p>See examples:\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=custom-calendar-icon\" target=\"_blank\">icons</a> and <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=custom-gantt-flight\" target=\"_blank\">shapes</a>.</p>\n"},"d":{"type":["string"],"description":"<p>Alias of <a href=\"#series-custom.renderItem.return_path.shape.pathData\">pathData</a>.</p>\n"},"layout":{"type":["string"],"description":"<p>If <a href=\"#series-custom.renderItem.return_path.shape.width\">width</a>, <a href=\"#series-custom.renderItem.return_path.shape.height\">height</a>, <a href=\"#series-custom.renderItem.return_path.shape.x\">x</a> and <a href=\"#series-custom.renderItem.return_path.shape.y\">y</a> specified, <code class=\"codespan\">pathData</code> will be transformed to fit the defined rect.</p>\n<p><code class=\"codespan\">layout</code> can be used to specify the transform strategy.</p>\n<p>Optional value:</p>\n<ul>\n<li><code class=\"codespan\">&#39;center&#39;</code>: Keep aspect ratio, put the path in the center of the rect, expand as far as possible but never overflow.</li>\n<li><code class=\"codespan\">&#39;cover&#39;</code>: Transform the path according to the aspect ratio of the rect, fill the rect and do not overflow.</li>\n</ul>\n","default":"'center'"},"x":{"type":["number"],"description":"<p>The x value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"y":{"type":["numbr"],"description":"<p>The y value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"width":{"type":["number"],"description":"<p>The width of the shape of the element.</p>\n","default":0},"height":{"type":["numbr"],"description":"<p>The height of the shape of the element.</p>\n","default":0}}},"style":{"type":["Object"],"description":"<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}},"return_image":{"type":["Object"],"description":"","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"image"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>.</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"style":{"type":["Object"],"description":"","properties":{"image":{"type":["string"],"description":"<p>Specify contant of the image, can be a URL, or <a href=\"https://tools.ietf.org/html/rfc2397\" target=\"_blank\">dataURI</a>.</p>\n"},"x":{"type":["number"],"description":"<p>The x value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"y":{"type":["numbr"],"description":"<p>The y value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"width":{"type":["number"],"description":"<p>The width of the shape of the element.</p>\n","default":0},"height":{"type":["numbr"],"description":"<p>The height of the shape of the element.</p>\n<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","default":0},"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}},"return_text":{"type":["Object"],"description":"<p>Text block.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"text"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>.</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"style":{"type":["Object"],"description":"","properties":{"text":{"type":["string"],"description":"<p>Text content. <code class=\"codespan\">\\n</code> can be used as a line break.</p>\n","default":"''"},"x":{"type":["number"],"description":"<p>The x value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"y":{"type":["numbr"],"description":"<p>The y value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"font":{"type":["string"],"description":"<p>Font size, font type, font weight, font color, follow the form of <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font\" target=\"_blank\">css font</a>.</p>\n<p>For example:</p>\n<pre><code>// size | family\nfont: &#39;2em &quot;STHeiti&quot;, sans-serif&#39;\n\n// style | weight | size | family\nfont: &#39;italic bolder 16px cursive&#39;\n\n// weight | size | family\nfont: &#39;bolder 2em &quot;Microsoft YaHei&quot;, sans-serif&#39;\n</code></pre>"},"textAlign":{"type":["string"],"description":"<p>Text horizontal alignment. Optional values: <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, <code class=\"codespan\">&#39;right&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;left&#39;</code> means the left side of the text block is specified by the <a href=\"#series-custom.renderItem.return_text.style.x\">style.x</a>, while <code class=\"codespan\">&#39;right&#39;</code> means the right side of the text block is specified by <a href=\"#series-custom.renderItem.return_text.style.y\">style.y</a>.</p>\n","default":"'left'"},"textVerticalAlign":{"type":["string"],"description":"<p>Text vertical alignment. Optional values: <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n"},"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}},"return_rect":{"type":["Object"],"description":"<p>Rectangle element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"rect"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>.</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"x":{"type":["number"],"description":"<p>The x value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"y":{"type":["numbr"],"description":"<p>The y value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"width":{"type":["number"],"description":"<p>The width of the shape of the element.</p>\n","default":0},"height":{"type":["numbr"],"description":"<p>The height of the shape of the element.</p>\n","default":0},"r":{"type":["Array"],"description":"<p>Specify border radius of the rectangular here. Generally, <code class=\"codespan\">r</code> should be <code class=\"codespan\">[topLeftRadius, topRightRadius, BottomRightRadius, bottomLeftRadius]</code>, where each item is a number.</p>\n<p>Abbreviation is enabled, for example:</p>\n<ul>\n<li><code class=\"codespan\">r</code>: <code class=\"codespan\">1</code>         means <code class=\"codespan\">[1, 1, 1, 1]</code></li>\n<li><code class=\"codespan\">r</code>: <code class=\"codespan\">[1]</code>       means <code class=\"codespan\">[1, 1, 1, 1]</code></li>\n<li><code class=\"codespan\">r</code>: <code class=\"codespan\">[1, 2]</code>    means <code class=\"codespan\">[1, 2, 1, 2]</code></li>\n<li><code class=\"codespan\">r</code>: <code class=\"codespan\">[1, 2, 3]</code> means <code class=\"codespan\">[1, 2, 3, 2]</code></li>\n</ul>\n"}}},"style":{"type":["Object"],"description":"<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}},"return_circle":{"type":["Object"],"description":"<p>Circle element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"circle"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>.</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"cx":{"type":["number"],"description":"<p>The x value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"cy":{"type":["numbr"],"description":"<p>The y value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"r":{"type":["number"],"description":"<p>Outside radius.</p>\n","default":0}}},"style":{"type":["Object"],"description":"<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}},"return_ring":{"type":["Object"],"description":"<p>Ring element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"ring"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>.</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"cx":{"type":["number"],"description":"<p>The x value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"cy":{"type":["numbr"],"description":"<p>The y value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"r":{"type":["number"],"description":"<p>Outside radius.</p>\n","default":0},"r0":{"type":["number"],"description":"<p>Inside radius.</p>\n","default":0}}},"style":{"type":["Object"],"description":"<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}},"return_sector":{"type":["Object"],"description":"<p>Sector element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"sector"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>.</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"cx":{"type":["number"],"description":"<p>The x value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"cy":{"type":["numbr"],"description":"<p>The y value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"r":{"type":["number"],"description":"<p>Outside radius.</p>\n","default":0},"r0":{"type":["number"],"description":"<p>Inside radius.</p>\n","default":0},"startAngle":{"type":["number"],"description":"<p>start angle, in radian.</p>\n","default":0},"endAngle":{"type":["number"],"description":"<p>end anble, in radian.</p>\n","default":"Math.PI * 2"},"clockwise":{"type":["boolean"],"description":"<p>Whether draw clockwise.</p>\n","default":true}}},"style":{"type":["Object"],"description":"<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}},"return_arc":{"type":["Object"],"description":"<p>Arc element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"arc"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>.</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"cx":{"type":["number"],"description":"<p>The x value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"cy":{"type":["numbr"],"description":"<p>The y value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"r":{"type":["number"],"description":"<p>Outside radius.</p>\n","default":0},"r0":{"type":["number"],"description":"<p>Inside radius.</p>\n","default":0},"startAngle":{"type":["number"],"description":"<p>start angle, in radian.</p>\n","default":0},"endAngle":{"type":["number"],"description":"<p>end anble, in radian.</p>\n","default":"Math.PI * 2"},"clockwise":{"type":["boolean"],"description":"<p>Whether draw clockwise.</p>\n","default":true}}},"style":{"type":["Object"],"description":"<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":null},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":"\"#000\""},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":1},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}},"return_polygon":{"type":["Object"],"description":"<p>Polygon element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"polygon"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>.</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"points":{"type":["Array"],"description":"<p>A list of points, which defines the shape, like <code class=\"codespan\">[[22, 44], [44, 55], [11, 44], ...]</code>.</p>\n"},"smooth":{"type":["number","string"],"description":"<p>Whether smooth the line.</p>\n<ul>\n<li>If the value is number, bezier interpolation is used, and the value specified the level of smooth, which is in the range of <code class=\"codespan\">[0, 1]</code>.</li>\n<li>If the value is <code class=\"codespan\">&#39;spline&#39;</code>, Catmull-Rom spline interpolation is used.</li>\n</ul>\n","default":"undefined"},"smoothConstraint":{"type":["boolean"],"description":"<p>Whether prevent the smooth process cause the line out of the bounding box.</p>\n<p>Only works when <code class=\"codespan\">smooth</code> is <code class=\"codespan\">number</code> (bezier smooth).</p>\n","default":false}}},"style":{"type":["Object"],"description":"<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}},"return_polyline":{"type":["Object"],"description":"<p>Polyline element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"polyline"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>.</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"points":{"type":["Array"],"description":"<p>A list of points, which defines the shape, like <code class=\"codespan\">[[22, 44], [44, 55], [11, 44], ...]</code>.</p>\n"},"smooth":{"type":["number","string"],"description":"<p>Whether smooth the line.</p>\n<ul>\n<li>If the value is number, bezier interpolation is used, and the value specified the level of smooth, which is in the range of <code class=\"codespan\">[0, 1]</code>.</li>\n<li>If the value is <code class=\"codespan\">&#39;spline&#39;</code>, Catmull-Rom spline interpolation is used.</li>\n</ul>\n","default":"undefined"},"smoothConstraint":{"type":["boolean"],"description":"<p>Whether prevent the smooth process cause the line out of the bounding box.</p>\n<p>Only works when <code class=\"codespan\">smooth</code> is <code class=\"codespan\">number</code> (bezier smooth).</p>\n","default":false}}},"style":{"type":["Object"],"description":"<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":null},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":"\"#000\""},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":5},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}},"return_line":{"type":["Object"],"description":"<p>Line element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"line"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>.</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"x1":{"type":["number"],"description":"<p>x value of the start point.</p>\n","default":0},"y1":{"type":["number"],"description":"<p>y value of the start point.</p>\n","default":0},"x2":{"type":["number"],"description":"<p>x value of the end point.</p>\n","default":0},"y2":{"type":["number"],"description":"<p>y value of the end point.</p>\n","default":0},"percent":{"type":["number"],"description":"<p>Specify the percentage of drawing, useful in animation.</p>\n<p>Value range: [0, 1].</p>\n","default":1}}},"style":{"type":["Object"],"description":"<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":null},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":"\"#000\""},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":5},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}},"return_bezierCurve":{"type":["Object"],"description":"<p>Quadratic bezier curve or cubic bezier curve.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"bezierCurve"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code class=\"codespan\">2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code class=\"codespan\">[horizontal translate offset, vertical translate offset]</code>, <code class=\"codespan\">[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code class=\"codespan\">0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code class=\"codespan\">[horizontal scale factor, vertical scale factor]</code>, <code class=\"codespan\">[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code class=\"codespan\">[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code class=\"codespan\">[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code class=\"codespan\">rotation</code>, then, <code class=\"codespan\">scale</code>, finally, <code class=\"codespan\">position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>.</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"x1":{"type":["number"],"description":"<p>x value of the start point.</p>\n","default":0},"y1":{"type":["number"],"description":"<p>y value of the start point.</p>\n","default":0},"x2":{"type":["number"],"description":"<p>x value of the end point.</p>\n","default":0},"y2":{"type":["number"],"description":"<p>y value of the end point.</p>\n","default":0},"cpx1":{"type":["number"],"description":"<p>x of control point.</p>\n","default":0},"cpy1":{"type":["number"],"description":"<p>y of control point.</p>\n","default":0},"cpx2":{"type":["number"],"description":"<p>x of the second control point. If specified, cubic bezier is used.</p>\n<p>If both <code class=\"codespan\">cpx2</code> and <code class=\"codespan\">cpy2</code> are not set, quatratic bezier is used.</p>\n","default":null},"cpy2":{"type":["number"],"description":"<p>y of the second control point. If specified, cubic bezier is used.</p>\n<p>If both <code class=\"codespan\">cpx2</code> and <code class=\"codespan\">cpy2</code> are not set, quatratic bezier is used.</p>\n","default":null},"percent":{"type":["number"],"description":"<p>Specify the percentage of drawing, useful in animation.</p>\n<p>Value range: [0, 1].</p>\n","default":1}}},"style":{"type":["Object"],"description":"<p>More attributes in <code class=\"codespan\">style</code> (for example, <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code class=\"codespan\">style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class=\"codespan\">style</code> of graphic elements is derived from <code class=\"codespan\">zrender</code>, which may be different from the attribute names in <code class=\"codespan\">echarts label</code>, <code class=\"codespan\">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> =&gt; <code class=\"codespan\">style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> =&gt; <code class=\"codespan\">style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> =&gt; <code class=\"codespan\">style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> =&gt; <code class=\"codespan\">style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}}}},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of , <code class=\"codespan\">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color.  Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"dimensions":{"type":["Array"],"description":"<p><code class=\"codespan\">dimensions</code> can be used to define dimension info for <code class=\"codespan\">series.data</code> or <code class=\"codespan\">dataset.source</code>.</p>\n<p>Notice: if <a href=\"#dataset\">dataset</a> is used, we can provide dimension names in the first column/row of <a href=\"#dataset.source\">dataset.source</a>, and not need to specify <code class=\"codespan\">dimensions</code> here. But if <code class=\"codespan\">dimensions</code> is specified here, echarts will not retrieve dimension names from the first row/column of <code class=\"codespan\">dataset.source</code> any more.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\n    ]\n}\n</code></pre>\n<p>Each data item of <code class=\"codespan\">dimensions</code> can be:</p>\n<ul>\n<li><code class=\"codespan\">string</code>, for example, <code class=\"codespan\">&#39;someName&#39;</code>, which equals to <code class=\"codespan\">{name: &#39;someName&#39;}</code>.</li>\n<li><code class=\"codespan\">Object</code>, where the attributes can be:<ul>\n<li>name: <code class=\"codespan\">string</code>.</li>\n<li>type: <code class=\"codespan\">string</code>, supports:<ul>\n<li><code class=\"codespan\">number</code></li>\n<li><code class=\"codespan\">float</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array\" target=\"_blank\">Float64Array</a></li>\n<li><code class=\"codespan\">int</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array\" target=\"_blank\">Int32Array</a></li>\n<li><code class=\"codespan\">ordinal</code>, discrete value, which represents string generally.</li>\n<li><code class=\"codespan\">time</code>, time value, see <a href=\"#series.data\">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code class=\"codespan\">string</code>, generally used in tooltip for dimension display. If not specified, use <code class=\"codespan\">name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code class=\"codespan\">dimensions</code> is specified, the default <code class=\"codespan\">tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code class=\"codespan\">tooltip</code> will displayed only value horizontally.</p>\n"},"encode":{"type":["Object"],"description":"<p>Define what is encoded to for each dimension of <code class=\"codespan\">data</code>. For example:</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n</code></pre>\n<p>When <a href=\"#series.dimensions\">dimensions</a> is used to defined name for a certain dimension, <code class=\"codespan\">encode</code> can refer the name directly. For example:</p>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<p>The basic structure of <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, <code class=\"codespan\">&#39;radius&#39;</code>, <code class=\"codespan\">&#39;angle&#39;</code> or some special reserved names like &quot;tooltip&quot;, &quot;itemName&quot; etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code class=\"codespan\">encode</code> listed as follows:</p>\n<pre><code class=\"lang-js\">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension &quot;product&quot; and &quot;score&quot; in the tooltip.\n    tooltip: [&#39;product&#39;, &#39;score&#39;]\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // &#39;pie&#39;, &#39;funnel&#39;, where data item name can be displayed in legend.\n    itemName: 3\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension &quot;score&quot; to the X axis.\n    x: [1, 5, &#39;score&#39;],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like &#39;pie&#39;, &#39;funnel&#39; etc.:\nencode: {\n    value: 3\n}\n</code></pre>\n<p>This is an <a href=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a> for <code class=\"codespan\">encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code class=\"codespan\">encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href=\"#dataZoom\">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class=\"lang-js\">var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            return {\n                type: &#39;circle&#39;,\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: &#39;blue&#39;\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n</code></pre>\n"},"seriesLayoutBy":{"type":["string"],"description":"<p>When <a href=\"#dataset\">dataset</a> is used, <code class=\"codespan\">seriesLayoutBy</code> specifies whether the column or the row of <code class=\"codespan\">dataset</code> is mapped to the series, namely, the series is &quot;layout&quot; on columns or rows. Optional values:</p>\n<ul>\n<li>&#39;column&#39;: by default, the columns of <code class=\"codespan\">dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>&#39;row&#39;:the rows of <code class=\"codespan\">dataset</code> are mapped to the series. In this case, each row represents a dimension.</li>\n</ul>\n<p>Check this <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=dataset-series-layout-by\" target=\"_blank\">example</a>.</p>\n","default":"'column'"},"datasetIndex":{"type":["number"],"description":"<p>If <a href=\"#series.data\">series.data</a> is not specified, and <a href=\"#dataset\">dataset</a> exists, the series will use <code class=\"codespan\">dataset</code>. <code class=\"codespan\">datasetIndex</code> specifies which dataset will be used.</p>\n","default":0},"data":{"type":["Array"],"description":"<p>Data array of series, which can be in the following forms:</p>\n<p>Notice, if no <code class=\"codespan\">data</code> specified in series, and there is <a href=\"#dataset\">dataset</a> in option, series will use the first <a href=\"#dataset\">dataset</a> as its datasource. If <code class=\"codespan\">data</code> has been specified, <a href=\"#dataset\">dataset</a> will not used.</p>\n<p><code class=\"codespan\">series.datasetIndex</code> can be used to specify other <a href=\"#dataset\">dataset</a>.</p>\n<p>Basically, data is represented by a two-dimension array, like the example below, where each column is named as a &quot;dimension&quot;.</p>\n<pre><code class=\"lang-js\">series: [{\n    data: [\n        // dimX   dimY   other dimensions ...\n        [  3.4,    4.5,   15,   43],\n        [  4.2,    2.3,   20,   91],\n        [  10.8,   9.5,   30,   18],\n        [  7.2,    8.8,   18,   57]\n    ]\n}]\n</code></pre>\n<ul>\n<li>In <a href=\"#grid\">cartesian (grid)</a>, &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href=\"#xAxis\">xAxis</a> and <a href=\"#yAxis\">yAxis</a> respectively.</li>\n<li>In <a href=\"#polar\">polar</a> &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href=\"#radiusAxis\">radiusAxis</a> 和 <a href=\"#anbleAxis\">angleAxis</a> respectively.</li>\n<li>Other dimensions are optional, which can be used in other places. For example:<ul>\n<li><a href=\"#visualMap\">visualMap</a> can map one or more dimensions to visual (color, symbol size ...).</li>\n<li><a href=\"#series.symbolSize\">series.symbolSize</a> can be set as a callback function, where symbol size can be calculated by values of a certain dimension.</li>\n<li>Values in other dimensions can be shown by <a href=\"#tooltip.formatter\">tooltip.formatter</a> or <a href=\"#series.label.formatter\">series.label.formatter</a>.</li>\n</ul>\n</li>\n</ul>\n<p>Especially, when there is one and only one category axis (axis.type is <code class=\"codespan\">&#39;category&#39;</code>), data can be simply be represented by a one-dimension array, like:</p>\n<pre><code class=\"lang-js\">xAxis: {\n    data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;]\n},\nseries: [{\n    // Each item corresponds to each item in xAxis.data.\n    data: [23,  44,  55,  19]\n    // In fact, it is the simplification of the format below:\n    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n</code></pre>\n<p><br>\n<strong>Relationship between &quot;value&quot; and <a href=\"#xAxis.type\">axis.type</a></strong></p>\n<ul>\n<li><p>When a dimension corresponds to a value axis (axis.type is <code class=\"codespan\">&#39;value&#39;</code> or <code class=\"codespan\">&#39;log&#39;</code>):</p>\n<p>  The value can be a <code class=\"codespan\">number</code> (like <code class=\"codespan\">12</code>) (can also be a number in a <code class=\"codespan\">string</code> format, like <code class=\"codespan\">&#39;12&#39;</code>).</p>\n</li>\n<li><p>When a dimension corresponds to a category axis (axis.type is <code class=\"codespan\">&#39;category&#39;</code>):</p>\n<p>  The value should be the ordinal of the axis.data (based on <code class=\"codespan\">0</code>), the string value of the axis.data. For example:</p>\n<pre><code class=\"lang-js\">  xAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;]\n  },\n  yAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;, &#39;p&#39;, &#39;q&#39;]\n  },\n  series: [{\n      data: [\n          // xAxis      yAxis\n          [  0,           0,    2  ], // This point is located at xAxis: &#39;Monday&#39;, yAxis: &#39;a&#39;.\n          [  &#39;Thursday&#39;,  2,    1  ], // This point is located at xAxis: &#39;Thursday&#39;, yAxis: &#39;m&#39;.\n          [  2,          &#39;p&#39;,   2  ], // This point is located at xAxis: &#39;Wednesday&#39;, yAxis: &#39;p&#39;.\n          [  3,           3,    5  ]\n      ]\n  }]\n</code></pre>\n<p>  There is an example of double category axes: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-punchCard\" target=\"_blank\">Github Punchcard</a>.</p>\n</li>\n<li><p>When a dimension corresponds to a time axis (type is <code class=\"codespan\">&#39;time&#39;</code>), the value can be:</p>\n<ul>\n<li>a timestamp, like <code class=\"codespan\">1484141700832</code>, which represents a UTC time.</li>\n<li>a date string, in one of the formats below:<ul>\n<li>a subset of <a href=\"http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15\" target=\"_blank\">ISO 8601</a>, only including (all of these are treated as local time unless timezone is specified, which is consistent with <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>):<ul>\n<li>only part of year/month/date/time are specified: <code class=\"codespan\">&#39;2012-03&#39;</code>, <code class=\"codespan\">&#39;2012-03-01&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 05&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 05:06&#39;</code>.</li>\n<li>separated by <code class=\"codespan\">&quot;T&quot;</code> or a space: <code class=\"codespan\">&#39;2012-03-01T12:22:33.123&#39;</code>, <code class=\"codespan\">&#39;2012-03-01 12:22:33.123&#39;</code>.</li>\n<li>timezone specified: <code class=\"codespan\">&#39;2012-03-01T12:22:33Z&#39;</code>, <code class=\"codespan\">&#39;2012-03-01T12:22:33+8000&#39;</code>, <code class=\"codespan\">&#39;2012-03-01T12:22:33-05:00&#39;</code>.</li>\n</ul>\n</li>\n<li>other date string format (all of these are treated as local time):\n<code class=\"codespan\">&#39;2012&#39;</code>, <code class=\"codespan\">&#39;2012-3-1&#39;</code>, <code class=\"codespan\">&#39;2012/3/1&#39;</code>, <code class=\"codespan\">&#39;2012/03/01&#39;</code>,\n<code class=\"codespan\">&#39;2009/6/12 2:00&#39;</code>, <code class=\"codespan\">&#39;2009/6/12 2:05:08&#39;</code>, <code class=\"codespan\">&#39;2009/6/12 2:05:08.123&#39;</code>.</li>\n</ul>\n</li>\n<li>a JavaScript Date instance created by user:<ul>\n<li>Caution, when using a data string to create a Date instance, <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">browser differences and inconsistencies</a> should be considered.</li>\n<li>For example: In chrome, <code class=\"codespan\">new Date(&#39;2012-01-01&#39;)</code> is treated as a Jan 1st 2012 in UTC, while <code class=\"codespan\">new Date(&#39;2012-1-1&#39;)</code> and <code class=\"codespan\">new Date(&#39;2012/01/01&#39;)</code> are treated as Jan 1st 2012 in local timezone. In safari <code class=\"codespan\">new Date(&#39;2012-1-1&#39;)</code> is not supported.</li>\n<li>So if you intent to perform <code class=\"codespan\">new Date(dateString)</code>, it is strongly recommended to use a time parse library (e.g., <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>), or use <code class=\"codespan\">echarts.number.parseDate</code>, or check <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">this</a>.</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<strong>Customize a data item:</strong></p>\n<p>When needing to customize a data item, it can be set as an object, where property <code class=\"codespan\">value</code> reprensent real value. For example:</p>\n<pre><code class=\"lang-js\">[\n    12,\n    24,\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    33\n]\n// Or\n[\n    [12, 332],\n    [24, 32],\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    [33, 31]\n]\n</code></pre>\n<p><br>\n<strong>Empty value:</strong></p>\n<p><code class=\"codespan\">&#39;-&#39;</code> or <code class=\"codespan\">null</code> or <code class=\"codespan\">undefined</code> or <code class=\"codespan\">NaN</code> can be used to describe that a data item does not exist (ps:<em>not exist</em> does not means its value is <code class=\"codespan\">0</code>).</p>\n<p>For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.</p>\n<p><br><br></p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Name of data item.</p>\n"},"value":{"type":["number"],"description":"<p>Value of data item.</p>\n"},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, or <code class=\"codespan\">&#39;dotted&#39;</code>. <code class=\"codespan\">&#39;solid&#39;</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice:</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"clip":{"type":["boolean"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.4.0</code></p>\n</blockquote>\n<p>If clip the overflow on the coordinate system. Clip results varies between series:</p>\n<ul>\n<li>Scatter:Ignore the symbols exceeds the coordinate system. Not clip the elements.</li>\n<li>Bar:Clip all the overflowed. With bar width kept.</li>\n<li>Line:Clip the overflowed line.</li>\n<li>Lines: Clip all the overflowed.</li>\n<li>Candlestick: Ignore the elements exceeds the coordinate system.</li>\n<li>Custom: Clip all the olverflowed.</li>\n</ul>\n<p>All these series have default value <code class=\"codespan\">true</code> except custom series. Set it to <code class=\"codespan\">false</code> if you don&#39;t want to clip.</p>\n","default":false},"zlevel":{"type":["number"],"description":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in custom series.</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code class=\"codespan\">z</code> value of all graphical elements in custom series, which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n","default":2},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-js\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-js\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-js\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice:</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}]},"properties":{}},"color":{"type":["Array"],"description":"<p>The color list of palette. If no color is set in series, the colors would be adopted sequentially and circularly from this list as the colors of series.</p>\n<p>Defaults:</p>\n<pre><code class=\"lang-js\">[&#39;#c23531&#39;,&#39;#2f4554&#39;, &#39;#61a0a8&#39;, &#39;#d48265&#39;, &#39;#91c7ae&#39;,&#39;#749f83&#39;,  &#39;#ca8622&#39;, &#39;#bda29a&#39;,&#39;#6e7074&#39;, &#39;#546570&#39;, &#39;#c4ccd3&#39;]\n</code></pre>\n","properties":{}},"backgroundColor":{"type":["Color"],"description":"<p>Background color. Defaults to have no background.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class=\"codespan\">&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    global: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","properties":{}},"textStyle":{"type":["Object"],"description":"<p>Global font style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size.</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">&#39;100%&#39;</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textBorderColor":{"type":["Color"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["Color"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true,"properties":{}},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000,"properties":{}},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":1000,"properties":{}},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut","properties":{}},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0,"properties":{}},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","default":300,"properties":{}},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut","properties":{}},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0,"properties":{}},"blendMode":{"type":["string"],"description":"<p>Sets the type of compositing operation to apply when drawing a new shape. See the different type: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation\" target=\"_blank\">https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation</a>.</p>\n<p>The default is <code class=\"codespan\">&#39;source-over&#39;</code>. Support settings for each series.</p>\n<p><code class=\"codespan\">&#39;lighter&#39;</code> is also a common type of compositing operation. In this mode, the area where the number of graphics is concentrated is superimposed into a high-brightness color (white). It often used to highlight the effect of the area. See example <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=lines-airline\" target=\"_blank\">Global airline</a></p>\n","default":"'source-over'","properties":{}},"hoverLayerThreshold":{"type":["number"],"description":"<p>When the number of element of the whole chart is larger than <code class=\"codespan\">hoverLayerThreshold</code>, a seperate hover layer is used to render hovered elements.</p>\n<p>The seperate hover layer is used to avoid re-painting the whole canvas when hovering on elements. Instead, the hovered elements are rendered in a seperate layer so that other elements don&#39;t have to be rendered again.</p>\n<p>ECharts 2 use seperate layer for all cases. But it brings some problems like the hovered elements may not covering everything else correctly, or translucent elements may not overlay correctly to each other. And it brings extra member cost due to the extra canvas and may bring burden on mobile devices. So since ECharts 3, the hover layer is not used by default. Only when the element amount is large enough will the hover layer used.</p>\n","default":3000,"properties":{}},"useUTC":{"type":["boolean"],"description":"<p>Whether to use UTC in display.</p>\n<ul>\n<li><code class=\"codespan\">true</code>: When <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;time&#39;</code>, ticks is determined according to UTC, and <code class=\"codespan\">axisLabel</code> and <code class=\"codespan\">tooltip</code> use UTC by default.</li>\n<li><code class=\"codespan\">false</code>: When <code class=\"codespan\">axis.type</code> is <code class=\"codespan\">&#39;time&#39;</code>, ticks is determined according to local time, and <code class=\"codespan\">axisLabel</code> and <code class=\"codespan\">tooltip</code> use local time by default.</li>\n</ul>\n<p>The default value of <code class=\"codespan\">useUTC</code> is false, for sake of considering:</p>\n<ul>\n<li>In many cases, labels should be displayed in local time (whether the time is stored in server in local time or UTC).</li>\n<li>If user uses time string (like &#39;2012-01-02&#39;) in data, it usually means local time if time zone is not specified. Time should be displayed in its original time zone by default.</li>\n</ul>\n<p>Notice: the setting only affects &quot;display time&quot;, not &quot;parse time&quot;.\nFor how time value (like <code class=\"codespan\">1491339540396</code>, <code class=\"codespan\">&#39;2013-01-04&#39;</code>, ...) is parsed in echarts, see <a href=\"#series-line.data\">the time part in date</a>.</p>\n","default":false,"properties":{}}}}}
\ No newline at end of file
diff --git a/en/download-extension.html b/en/download-extension.html
index e3522ea..96d34ae 100644
--- a/en/download-extension.html
+++ b/en/download-extension.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'en';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -7,7 +7,7 @@
     document.head.insertBefore(el, document.getElementById('font-hack'));
 }
 </script><title>Download Extensions - Apache ECharts (incubating)</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><h1>Download Extensions</h1><p>Download extensions and enhance what ECharts can do.</p><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div><div id="extension" class="page-content container"><div class="nav-container"><ul class="nav nav-tabs"><li class="active"><a href="#chart-type" data-toggle="tab">Charts and Components</a></li><li><a href="#functional" data-toggle="tab">Enhancement</a></li><li><a href="#framework" data-toggle="tab">Frameworks</a></li><li><a href="#language" data-toggle="tab">Languages</a></li></ul></div><div class="tab-content"><div id="chart-type" class="tab-pane active"><div class="row"><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-gl" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/gl.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-gl" class="extension-name">ECharts GL</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/pissang" class="extension-author-name">沈毅</a></div><div class="extension-desc">ECharts-GL provides 3D plots, globe visualization and WebGL acceleration.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-wordcloud" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/word-cloud.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-wordcloud" class="extension-name">字符云</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/pissang" class="extension-author-name">沈毅</a></div><div class="extension-desc">Cloud charts can layout text into different sizes and colors. You can also use images as masks.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-liquidfill" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/liquidfill.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-liquidfill" class="extension-name">水球图</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/Ovilia" class="extension-author-name">羡辙</a></div><div class="extension-desc">The liquid-fill chart is a chart suitable for presenting a single percentage of data, supporting multiple water waves and animations.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts/tree/master/extension/bmap" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/bmap.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts/tree/master/extension/bmap" class="extension-name">百度地图</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/pissang" class="extension-author-name">沈毅</a></div><div class="extension-desc">With Baidu map extension, you can display scatter charts, line charts, heatmaps and so on.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/wandergis/arcgis-echarts3" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/arcgis.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/wandergis/arcgis-echarts3" class="extension-name">ArcGIS 地图</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/wandergis" class="extension-author-name">wandergis</a></div><div class="extension-desc">A combination of ArcGIS maps and ECharts supports ECharts 2 and ECharts 3.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/wandergis/leaflet-echarts3" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/leaflet.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/wandergis/leaflet-echarts3" class="extension-name">Leaflet 地图</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/wandergis" class="extension-author-name">wandergis</a></div><div class="extension-desc">A combination of Leaflet Map and ECharts supports ECharts 2 and ECharts 3.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/gnijuohz/echarts-leaflet" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/leaflet-2.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/gnijuohz/echarts-leaflet" class="extension-name">echarts-leaflet</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/gnijuohz" class="extension-author-name">gnijuohz</a></div><div class="extension-desc">ECharts extension for visualizing data on leaftlet.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/lzxue/echartsLayer" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/mapbox.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/lzxue/echartsLayer" class="extension-name">Mapbox 地图</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/lzxue" class="extension-author-name">lzxue</a></div><div class="extension-desc">A combination of Mapbox maps and ECharts.</div></div></div></div></div></div><div id="functional" class="tab-pane"><div class="row"><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-graph-modularity" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/modularity.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-graph-modularity" class="extension-name">图的模块化</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/pissang" class="extension-author-name">沈毅</a></div><div class="extension-desc">The plugin can perform community detection on the ECharts Graph and divide the vertices in the graph into subsets.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-stat" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/stat.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-stat" class="extension-name">统计工具</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/deqingli" class="extension-author-name">李德清</a></div><div class="extension-desc">The statistical extension is a tool for data analysis.</div></div></div></div></div></div><div id="framework" class="tab-pane"><div class="row"><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/wangshijun/angular-echarts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/wangshijun/angular-echarts" class="extension-name">angular-echarts</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/wangshijun" class="extension-author-name">wangshijun</a></div><div class="extension-desc">AngularJs bindings for Baidu ECharts.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/bornkiller/echarts-ng" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/bornkiller/echarts-ng" class="extension-name">echarts-ng</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/bornkiller" class="extension-author-name">bornkiller</a></div><div class="extension-desc">Encapsulate ECharts as an instruction using Angular.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/liekkas/ng-echarts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/liekkas/ng-echarts" class="extension-name">ng-echarts</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/liekkas" class="extension-author-name">liekkas</a></div><div class="extension-desc">AngularJs version ECharts, supports the latest ECharts3.x.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/Justineo/vue-echarts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/Justineo/vue-echarts" class="extension-name">vue-echarts</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/Justineo" class="extension-author-name">Justineo</a></div><div class="extension-desc">ECharts component for Vue.js.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/panteng/vue-echarts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/panteng/vue-echarts" class="extension-name">vue-echarts</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/panteng" class="extension-author-name">panteng</a></div><div class="extension-desc">A custom directive for using Echarts in Vue.js apps.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/PUGE/echarts-middleware" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/PUGE/echarts-middleware" class="extension-name">echarts-middleware</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/PUGE" class="extension-author-name">PUGE</a></div><div class="extension-desc">Use ECharts elegantly and efficiently with Vue.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/hustcc/echarts-for-react" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/hustcc/echarts-for-react" class="extension-name">echarts-for-react</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/hustcc" class="extension-author-name">hustcc</a></div><div class="extension-desc">A simple ECharts react package.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/somonus/react-echarts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/somonus/react-echarts" class="extension-name">react-echarts</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/somonus" class="extension-author-name">somonus</a></div><div class="extension-desc">ECharts + react.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/liekkas/re-echarts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/liekkas/re-echarts" class="extension-name">re-echarts</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/liekkas" class="extension-author-name">liekkas</a></div><div class="extension-desc">ECharts + react.</div></div></div></div></div></div><div id="language" class="tab-pane"><div class="row"><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/pyecharts/pyecharts/" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/pyecharts/pyecharts/" class="extension-name">pyecharts</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/chenjiandongx" class="extension-author-name">chenjiandongx</a><a href="https://github.com/chfw" class="extension-author-name">chfw</a><a href="https://github.com/kinegratii" class="extension-author-name">kinegratii</a></div><div class="extension-desc">Python Echarts Plotting Library.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/yufeiminds/echarts-python" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/yufeiminds/echarts-python" class="extension-name">echarts-python</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/yufeiminds" class="extension-author-name">yufeiminds</a></div><div class="extension-desc">Generate Echarts options with Python.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/napjon/krisk" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/napjon/krisk" class="extension-name">krisk</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/napjon" class="extension-author-name">napjon</a></div><div class="extension-desc">Krisk bring Echarts to Python, and helpful tools for statistical interactive visualization.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/taiyun/recharts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/taiyun/recharts" class="extension-name">recharts</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/taiyun" class="extension-author-name">taiyun</a></div><div class="extension-desc">recharts provides the R language interface of ECharts.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/yihui/recharts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/yihui/recharts" class="extension-name">recharts</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/yihui" class="extension-author-name">yihui</a></div><div class="extension-desc">An R Interface to ECharts.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/XD-DENG/ECharts2Shiny" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/XD-DENG/ECharts2Shiny" class="extension-name">ECharts2Shiny</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/XD-DENG" class="extension-author-name">XD-DENG</a></div><div class="extension-desc">To insert interactive charts from ECharts into R Shiny applications.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/randyzwitch/ECharts.jl" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/randyzwitch/ECharts.jl" class="extension-name">ECharts.jl</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/randyzwitch" class="extension-author-name">randyzwitch</a></div><div class="extension-desc">Julia package for the ECharts 3 visualization library.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/slamdata/purescript-echarts/" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/slamdata/purescript-echarts/" class="extension-name">purescript-echarts</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/slamdata" class="extension-author-name">slamdata</a></div><div class="extension-desc">Purescript bindings for Echarts library.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/Pluto-Y/iOS-Echarts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/Pluto-Y/iOS-Echarts" class="extension-name">iOS-Echarts</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/Pluto-Y/" class="extension-author-name">Pluto-Y</a></div><div class="extension-desc">This is a highly custom chart control for iOS and Mac apps, which build with ECharts 2.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/abel533/ECharts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/abel533/ECharts" class="extension-name">ECharts-Java</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/abel533" class="extension-author-name">abel533</a></div><div class="extension-desc">This is a Java version of the ECharts2.x version that implements the Java objects corresponding to the JSON structure in all ECharts.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/idoku/EChartsSDK" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/idoku/EChartsSDK" class="extension-name">EChartsSDK</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/idoku" class="extension-author-name">idoku</a></div><div class="extension-desc">ECharts .NET class library, ported from ECharts Java class library.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/hisune/Echarts-PHP" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/hisune/Echarts-PHP" class="extension-name">Echarts-PHP</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/hisune" class="extension-author-name">hisune</a></div><div class="extension-desc">A PHP library that works as a wrapper for Echarts.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/entronad/flutter_echarts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/entronad/flutter_echarts" class="extension-name">flutter_echarts</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/entronad" class="extension-author-name">entronad</a></div><div class="extension-desc">A Flutter widget to use Echarts in a reactive way.</div></div></div></div></div></div></div></div><div id="submit-extension"><div class="container"><h3>Submit your ECharts extension</h3><p>We will get in touch with you as soon as possible, and the extensions you make will be available to ECharts users on this page.</p><p>Thank you again for your support and contribution to ECharts!</p><a href="mailto:dev@echarts.apache.com" class="btn btn-main btn-thirdary"><img src="https://echarts.apache.org/en/images/btn-email.png?_v_=20200710_1"><span>Send Email</span></a></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1597861067124"></script><script type="text/javascript">document.getElementById('nav-download').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><h1>Download Extensions</h1><p>Download extensions and enhance what ECharts can do.</p><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div><div id="extension" class="page-content container"><div class="nav-container"><ul class="nav nav-tabs"><li class="active"><a href="#chart-type" data-toggle="tab">Charts and Components</a></li><li><a href="#functional" data-toggle="tab">Enhancement</a></li><li><a href="#framework" data-toggle="tab">Frameworks</a></li><li><a href="#language" data-toggle="tab">Languages</a></li></ul></div><div class="tab-content"><div id="chart-type" class="tab-pane active"><div class="row"><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-gl" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/gl.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-gl" class="extension-name">ECharts GL</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/pissang" class="extension-author-name">沈毅</a></div><div class="extension-desc">ECharts-GL provides 3D plots, globe visualization and WebGL acceleration.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-wordcloud" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/word-cloud.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-wordcloud" class="extension-name">字符云</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/pissang" class="extension-author-name">沈毅</a></div><div class="extension-desc">Cloud charts can layout text into different sizes and colors. You can also use images as masks.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-liquidfill" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/liquidfill.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-liquidfill" class="extension-name">水球图</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/Ovilia" class="extension-author-name">羡辙</a></div><div class="extension-desc">The liquid-fill chart is a chart suitable for presenting a single percentage of data, supporting multiple water waves and animations.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts/tree/master/extension/bmap" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/bmap.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts/tree/master/extension/bmap" class="extension-name">百度地图</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/pissang" class="extension-author-name">沈毅</a></div><div class="extension-desc">With Baidu map extension, you can display scatter charts, line charts, heatmaps and so on.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/wandergis/arcgis-echarts3" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/arcgis.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/wandergis/arcgis-echarts3" class="extension-name">ArcGIS 地图</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/wandergis" class="extension-author-name">wandergis</a></div><div class="extension-desc">A combination of ArcGIS maps and ECharts supports ECharts 2 and ECharts 3.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/wandergis/leaflet-echarts3" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/leaflet.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/wandergis/leaflet-echarts3" class="extension-name">Leaflet 地图</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/wandergis" class="extension-author-name">wandergis</a></div><div class="extension-desc">A combination of Leaflet Map and ECharts supports ECharts 2 and ECharts 3.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/gnijuohz/echarts-leaflet" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/leaflet-2.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/gnijuohz/echarts-leaflet" class="extension-name">echarts-leaflet</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/gnijuohz" class="extension-author-name">gnijuohz</a></div><div class="extension-desc">ECharts extension for visualizing data on leaftlet.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/lzxue/echartsLayer" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/mapbox.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/lzxue/echartsLayer" class="extension-name">Mapbox 地图</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/lzxue" class="extension-author-name">lzxue</a></div><div class="extension-desc">A combination of Mapbox maps and ECharts.</div></div></div></div></div></div><div id="functional" class="tab-pane"><div class="row"><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-graph-modularity" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/modularity.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-graph-modularity" class="extension-name">图的模块化</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/pissang" class="extension-author-name">沈毅</a></div><div class="extension-desc">The plugin can perform community detection on the ECharts Graph and divide the vertices in the graph into subsets.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-stat" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/stat.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-stat" class="extension-name">统计工具</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/deqingli" class="extension-author-name">李德清</a></div><div class="extension-desc">The statistical extension is a tool for data analysis.</div></div></div></div></div></div><div id="framework" class="tab-pane"><div class="row"><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/wangshijun/angular-echarts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/wangshijun/angular-echarts" class="extension-name">angular-echarts</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/wangshijun" class="extension-author-name">wangshijun</a></div><div class="extension-desc">AngularJs bindings for Baidu ECharts.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/bornkiller/echarts-ng" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/bornkiller/echarts-ng" class="extension-name">echarts-ng</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/bornkiller" class="extension-author-name">bornkiller</a></div><div class="extension-desc">Encapsulate ECharts as an instruction using Angular.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/liekkas/ng-echarts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/liekkas/ng-echarts" class="extension-name">ng-echarts</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/liekkas" class="extension-author-name">liekkas</a></div><div class="extension-desc">AngularJs version ECharts, supports the latest ECharts3.x.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/Justineo/vue-echarts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/Justineo/vue-echarts" class="extension-name">vue-echarts</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/Justineo" class="extension-author-name">Justineo</a></div><div class="extension-desc">ECharts component for Vue.js.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/panteng/vue-echarts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/panteng/vue-echarts" class="extension-name">vue-echarts</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/panteng" class="extension-author-name">panteng</a></div><div class="extension-desc">A custom directive for using Echarts in Vue.js apps.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/PUGE/echarts-middleware" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/PUGE/echarts-middleware" class="extension-name">echarts-middleware</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/PUGE" class="extension-author-name">PUGE</a></div><div class="extension-desc">Use ECharts elegantly and efficiently with Vue.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/hustcc/echarts-for-react" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/hustcc/echarts-for-react" class="extension-name">echarts-for-react</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/hustcc" class="extension-author-name">hustcc</a></div><div class="extension-desc">A simple ECharts react package.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/somonus/react-echarts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/somonus/react-echarts" class="extension-name">react-echarts</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/somonus" class="extension-author-name">somonus</a></div><div class="extension-desc">ECharts + react.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/liekkas/re-echarts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/liekkas/re-echarts" class="extension-name">re-echarts</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/liekkas" class="extension-author-name">liekkas</a></div><div class="extension-desc">ECharts + react.</div></div></div></div></div></div><div id="language" class="tab-pane"><div class="row"><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/pyecharts/pyecharts/" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/pyecharts/pyecharts/" class="extension-name">pyecharts</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/chenjiandongx" class="extension-author-name">chenjiandongx</a><a href="https://github.com/chfw" class="extension-author-name">chfw</a><a href="https://github.com/kinegratii" class="extension-author-name">kinegratii</a></div><div class="extension-desc">Python Echarts Plotting Library.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/yufeiminds/echarts-python" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/yufeiminds/echarts-python" class="extension-name">echarts-python</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/yufeiminds" class="extension-author-name">yufeiminds</a></div><div class="extension-desc">Generate Echarts options with Python.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/napjon/krisk" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/napjon/krisk" class="extension-name">krisk</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/napjon" class="extension-author-name">napjon</a></div><div class="extension-desc">Krisk bring Echarts to Python, and helpful tools for statistical interactive visualization.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/taiyun/recharts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/taiyun/recharts" class="extension-name">recharts</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/taiyun" class="extension-author-name">taiyun</a></div><div class="extension-desc">recharts provides the R language interface of ECharts.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/yihui/recharts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/yihui/recharts" class="extension-name">recharts</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/yihui" class="extension-author-name">yihui</a></div><div class="extension-desc">An R Interface to ECharts.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/XD-DENG/ECharts2Shiny" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/XD-DENG/ECharts2Shiny" class="extension-name">ECharts2Shiny</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/XD-DENG" class="extension-author-name">XD-DENG</a></div><div class="extension-desc">To insert interactive charts from ECharts into R Shiny applications.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/randyzwitch/ECharts.jl" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/randyzwitch/ECharts.jl" class="extension-name">ECharts.jl</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/randyzwitch" class="extension-author-name">randyzwitch</a></div><div class="extension-desc">Julia package for the ECharts 3 visualization library.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/slamdata/purescript-echarts/" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/slamdata/purescript-echarts/" class="extension-name">purescript-echarts</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/slamdata" class="extension-author-name">slamdata</a></div><div class="extension-desc">Purescript bindings for Echarts library.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/Pluto-Y/iOS-Echarts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/Pluto-Y/iOS-Echarts" class="extension-name">iOS-Echarts</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/Pluto-Y/" class="extension-author-name">Pluto-Y</a></div><div class="extension-desc">This is a highly custom chart control for iOS and Mac apps, which build with ECharts 2.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/abel533/ECharts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/abel533/ECharts" class="extension-name">ECharts-Java</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/abel533" class="extension-author-name">abel533</a></div><div class="extension-desc">This is a Java version of the ECharts2.x version that implements the Java objects corresponding to the JSON structure in all ECharts.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/idoku/EChartsSDK" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/idoku/EChartsSDK" class="extension-name">EChartsSDK</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/idoku" class="extension-author-name">idoku</a></div><div class="extension-desc">ECharts .NET class library, ported from ECharts Java class library.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/hisune/Echarts-PHP" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/hisune/Echarts-PHP" class="extension-name">Echarts-PHP</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/hisune" class="extension-author-name">hisune</a></div><div class="extension-desc">A PHP library that works as a wrapper for Echarts.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/entronad/flutter_echarts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/entronad/flutter_echarts" class="extension-name">flutter_echarts</a><div class="extension-author"><span>Contributors:</span><a href="https://github.com/entronad" class="extension-author-name">entronad</a></div><div class="extension-desc">A Flutter widget to use Echarts in a reactive way.</div></div></div></div></div></div></div></div><div id="submit-extension"><div class="container"><h3>Submit your ECharts extension</h3><p>We will get in touch with you as soon as possible, and the extensions you make will be available to ECharts users on this page.</p><p>Thank you again for your support and contribution to ECharts!</p><a href="mailto:dev@echarts.apache.com" class="btn btn-main btn-thirdary"><img src="https://echarts.apache.org/en/images/btn-email.png?_v_=20200710_1"><span>Send Email</span></a></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1598523334942"></script><script type="text/javascript">document.getElementById('nav-download').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
 
diff --git a/en/download-map.html b/en/download-map.html
index 573e93b..06378f2 100644
--- a/en/download-map.html
+++ b/en/download-map.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'en';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -8,7 +8,7 @@
 }
 </script><title>Download Maps - Apache ECharts (incubating)</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
 <!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><h1>Download Maps</h1><p>ECharts doesn't provide with Map data to download now.</p><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div><div style="text-align: left; min-height: 300px; margin-top: 30px;" class="page-content container"><p>ECharts doesn't come with Map data. To create Map charts, it is advised to use Baidu Map or other third party maps for the underlying map. Here is an example of <a href="https://echarts.apache.org/examples/en/editor.html?c=map-polygon">ECharts with Baidu Map</a>.</p><p>Please check <a href="./download-extension.html">Download Extension</a> page for other map extensions.</p></div><script type="text/javascript">document.getElementById('nav-download').className = 'active';
-</script><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1597861067124"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+</script><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1598523334942"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
 
diff --git a/en/download-theme.html b/en/download-theme.html
index c10f3fe..9b1980e 100644
--- a/en/download-theme.html
+++ b/en/download-theme.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'en';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -17,7 +17,7 @@
     ...
 });
 &lt;/script&gt;
-</pre></div></div></section><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1597861067124"></script><script src="https://cdn.jsdelivr.net/npm/code-prettify@0.1.0/src/prettify.min.js"></script><script src="https://cdn.jsdelivr.net/npm/code-prettify@0.1.0/src/lang-css.js"></script><script>document.getElementById('nav-download').className = 'active';
+</pre></div></div></section><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1598523334942"></script><script src="https://cdn.jsdelivr.net/npm/code-prettify@0.1.0/src/prettify.min.js"></script><script src="https://cdn.jsdelivr.net/npm/code-prettify@0.1.0/src/lang-css.js"></script><script>document.getElementById('nav-download').className = 'active';
 
 $('pre').addClass('prettyprint');
 prettyPrint();
diff --git a/en/download.html b/en/download.html
index b764b95..c57616a 100644
--- a/en/download.html
+++ b/en/download.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'en';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -16,7 +16,7 @@
     font-weight: normal;
 }
 */
-</style><nav 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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><h1>Download</h1><p>Free to choose to download different versions, different topics, the map data you need. You can be customized according to your needs.</p><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div><div id="download-main" class="page-content container"><div class="d-section-version d-section"><h3 class="first">Option 1: Install from downloaded source code or binary</h3><table id="download-table" class="table"><tr><th>Version</th><th>Release Date</th><th>Download Source from a Mirror</th><th>Dist files on GitHub</th></tr></table><div class="checksum"><p><strong>Note:</strong> when downloading from a mirror please check the <a href="https://www.apache.org/dev/release-signing#sha-checksum">SHA-512</a> and verify the <a href="https://www.apache.org/dev/release-signing#openpgp">OpenPGP</a> compatible signature from the main <a href="https://www.apache.org">Apache site</a>. Links are provided above (next to the release download link). This <a href="https://www.apache.org/dist/incubator/echarts/KEYS">KEYS</a> file contains the public keys used for signing release. It is recommended that (when possible) a <a href="https://www.apache.org/dev/release-signing#web-of-trust">web of trust</a> is used to confirm the identity of these keys.</p><h4>To verify ECharts releases using GPG:</h4><ol><li>Download the release apache-echarts-X.Y.Z-incubating-src.zip from a mirror site.</li><li>Download the checksum apache-echarts-X.Y.Z-incubating-src.zip.asc from <a href="https://www.apache.org/dist/incubator/echarts/">Apache</a>.</li><li>Download the <a href="https://www.apache.org/dist/incubator/echarts/KEYS">ECharts KEYS</a> file.</li><li>gpg –import KEYS</li><li>gpg –verify apache-echarts-X.Y.Z-incubating-src.zip.asc</li></ol><h4>To perform a quick check using SHA-512:</h4><ol><li>Download the release apache-echarts-X.Y.Z-incubating-src.zip from a mirror site.</li><li>Download the checksum apache-echarts-X.Y.Z-incubating-src.zip.512 from <a href="https://www.apache.org/dist/incubator/echarts/">Apache</a>.</li><li>shasum -a 512 apache-echarts-X.Y.Z-incubating-src.zip</li></ol><h4>License</h4><p>Apache ECharts (incubating) is licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a>.</p></div><h3>Option 2: Install from npm</h3><p><code>npm install echarts</code></p><h3>Option 3: Custom Build</h3><a href="builder.html" class="btn btn-main btn-thirdary more-btn">Customize</a><p>Choose the features you want and build the file online.</p><h3>After downloading...</h3><p><a href="./tutorial.html">Get Started</a></p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1597861067124"></script><script src="https://echarts.apache.org/en/js/download.js?_v_=1597861067124"></script><script type="text/javascript">document.getElementById('nav-download').className = 'active';
+</style><nav 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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><h1>Download</h1><p>Free to choose to download different versions, different topics, the map data you need. You can be customized according to your needs.</p><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div><div id="download-main" class="page-content container"><div class="d-section-version d-section"><h3 class="first">Option 1: Install from downloaded source code or binary</h3><table id="download-table" class="table"><tr><th>Version</th><th>Release Date</th><th>Download Source from a Mirror</th><th>Dist files on GitHub</th></tr></table><div class="checksum"><p><strong>Note:</strong> when downloading from a mirror please check the <a href="https://www.apache.org/dev/release-signing#sha-checksum">SHA-512</a> and verify the <a href="https://www.apache.org/dev/release-signing#openpgp">OpenPGP</a> compatible signature from the main <a href="https://www.apache.org">Apache site</a>. Links are provided above (next to the release download link). This <a href="https://www.apache.org/dist/incubator/echarts/KEYS">KEYS</a> file contains the public keys used for signing release. It is recommended that (when possible) a <a href="https://www.apache.org/dev/release-signing#web-of-trust">web of trust</a> is used to confirm the identity of these keys.</p><h4>To verify ECharts releases using GPG:</h4><ol><li>Download the release apache-echarts-X.Y.Z-incubating-src.zip from a mirror site.</li><li>Download the checksum apache-echarts-X.Y.Z-incubating-src.zip.asc from <a href="https://www.apache.org/dist/incubator/echarts/">Apache</a>.</li><li>Download the <a href="https://www.apache.org/dist/incubator/echarts/KEYS">ECharts KEYS</a> file.</li><li>gpg –import KEYS</li><li>gpg –verify apache-echarts-X.Y.Z-incubating-src.zip.asc</li></ol><h4>To perform a quick check using SHA-512:</h4><ol><li>Download the release apache-echarts-X.Y.Z-incubating-src.zip from a mirror site.</li><li>Download the checksum apache-echarts-X.Y.Z-incubating-src.zip.512 from <a href="https://www.apache.org/dist/incubator/echarts/">Apache</a>.</li><li>shasum -a 512 apache-echarts-X.Y.Z-incubating-src.zip</li></ol><h4>License</h4><p>Apache ECharts (incubating) is licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a>.</p></div><h3>Option 2: Install from npm</h3><p><code>npm install echarts</code></p><h3>Option 3: Custom Build</h3><a href="builder.html" class="btn btn-main btn-thirdary more-btn">Customize</a><p>Choose the features you want and build the file online.</p><h3>After downloading...</h3><p><a href="./tutorial.html">Get Started</a></p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1598523334942"></script><script src="https://echarts.apache.org/en/js/download.js?_v_=1598523334942"></script><script type="text/javascript">document.getElementById('nav-download').className = 'active';
 
 //- var list = [
 //-         {
diff --git a/en/faq.html b/en/faq.html
index 2fe94be..26ebbe6 100644
--- a/en/faq.html
+++ b/en/faq.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'en';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -9,7 +9,7 @@
 </script><title>FAQ - Apache ECharts (incubating)</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
 <!--[if (gt IE 8)|!(IE)]><body class="FAQ - Apache ECharts (incubating)"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><div class="container"><h1>FAQ</h1><p>Frequently asked questions</p><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div></div><div id="faq-page" class="page-content single-page"><div class="page-nav"><h4>Topics</h4><ul></ul></div><div class="page-detail"><h2 id="ask-questions">General Questions</h2><h3>What to do if you have technical problem?</h3><p>1)It is recommended that you read the navigation on the left side of the <a href="https://echarts.apache.org/en/option.html">option manual</a> before you ask questions. In the option manual, you can find out what configuration items does ECharts have. And you can find under the relevant components whether there are configuration items that can implement the functions you need.</p><p>2)Browse FAQ questions on this page.</p><p>3)Create a simple example to reproduce your problem on  <a href="https://gallery.echartsjs.com/editor.html">ECharts Gallery</a>. If you can't use the code to describe the requirements, you can try to provide a design draft or draw a sketch.</p><p>4)Paste the link when you ask questions on <a href="https://stackoverflow.com">stackoverflow</a>, <a href="https://www.oschina.net/question/tag/echarts">OSCHINA</a> or <a href="https://segmentfault.com/t/echarts">segmentfault.com</a> and etc. Plaes attach the example link.</p><h3>Is ECharts free to use?</h3><p>Yes, ECharts is open-sourced under <a href="./license.html">Apache License 2.0</a>.</p><h2 id="axis">Axis</h2><h3>What should I do if the axis label don`t have enough space?</h3><p>You can use <a href="https://echarts.apache.org/en/option.html#xAxis.interval">interval</a> to control how many labels are displayed,  set it to <code>0</code> to display all labels.</p><p>Or you can set <a href="https://echarts.apache.org/en/option.html#yAxis.axisLabel.rotate">axisLabel.rotate</a> to rotate the label a certain angle.</p><h3>Why does it not work when you want to put the axis on the right side?</h3><p>You need to set <a href="https://echarts.apache.org/en/option.html#yAxis.axisLine.onZero">onZero</a> to <code>false</code>.</p><h3>How do I force the first / last label of the axis to be displayed?</h3><p>Both <a href="https://echarts.apache.org/en/option.html#xAxis.axisLabel.showMinLabel">axisLabel.showMinLabel</a> and <a href="https://echarts.apache.org/en/option.html#xAxis.axisLabel.showMaxLabel">axisLabel.showMaxLabel</a> are supported since ECharts version 3.5.2. It can be used to control whether the first / last tags are forced to display.</p><p>If you can't update the version, please refer to this <a href="https://gallery.echartsjs.com/editor.html?c=xry06afSje">example</a> to achieve the same effect.</p><h2 id="legend">legend</h2><h3>What should I do if the legend area overlapped on the chart?</h3><p>You can set the <a href="https://echarts.apache.org/en/option.html#grid">grid</a> to control the position of the chart area. For example, Set a larger <code>grid.top</code> to move drawing area down.</p><p>We are planning to make the layout smarter in the future versions.</p><h2 id="line-chart">line-chart</h2><h3>The ticks on the coordinate axis seems different with the data?</h3><p>Check if you set the <code>stack</code>. You should remove it if you don't want to make a stack line chart.</p><h2 id="bar-chart">bar-chart</h2><h3>Why does the y-axis scale disappear when the values are small?</h3><p>Version 3.5 of ECharts has been fixed this issue.</p><h2 id="map-chart">map-chart</h2><h3>Province names overlap on the chart. How to modify the location of the names?</h3><p>You can modify the <code>cp</code> coordinates of the corresponding province in the map file (JS or JSON), or modify the map data that has been loaded by <code>echarts.getMap('china')</code>.</p><p>For more details, please refer to <a href="https://github.com/apache/incubator-echarts/issues/4379#issuecomment-257765948">GitHub</a>.</p><h3>Where can I download maps from other countries?</h3><p>Map information for other countries can be downloaded from <a href="https://github.com/echarts-maps/echarts-countries-js">here</a>.</p><h3>How can I get the zoom event of a map?</h3><p>First, you need to set the series's <a href="https://echarts.apache.org/en/option.html#series-map.roam">roam</a> to <code>true</code> and then listen for the <code>'georoam'</code> event. Such as:</p><pre><code>myChart.on('georoam', function (params) {
    console.log(params);
-});</code></pre><p>Please refer to <a href="https://gallery.echartsjs.com/editor.html?c=xHyqn_rQ6g">this example</a>.</p><h3>How to make my custom map?</h3><p>The ECharts map is <a href="https://github.com/apache/incubator-echarts/blob/8eeb7e5abe207d0536c62ce1f4ddecc6adfdf85e/src/util/mapData/rawData/encode.js">additionally encoded</a> from original coordinates. You can use the <a href="https://github.com/giscafer/mapshaper-plus">mapshaper-plus tool</a> to upload a custom geojson file and then generate a map file that can be used in Echarts.</p><h2 id="baidu-map">baidu-map</h2><h3>How to use ECharts with Baidu map?</h3><ol><li>Include <code>echarts.js</code>, <code>bmap.js</code> and <code>https://api.map.baidu.com/api?v=2.0&ak=Here is the access key you obtained on the Baidu development platform</code>.</li><li>Set <code>bmap</code> in <code>option</code>,You can refer to this <a href="https://echarts.apache.org/examples/en/editor.html?c=effectScatter-bmap">example</a>.</li><li>If you need to get a Baidu map instance, you can use <code>chart.getModel().getComponent('bmap').getBMap()</code>,and then make do settings based on <a href="https://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html">Baidu Maps API</a> .</li></ol><p>There are more examples about Baidu maps on <a href="https://gallery.echartsjs.com/explore.html#components=bmap~sort=rank~timeframe=all~author=all">ECharts Gallery</a> , which can be used as a reference.</p><h2 id="gauge-chart">gauge-chart</h2><h3>How to set the dashboard color?</h3><p>You can use <a href="https://echarts.apache.org/en/option.html#series-gauge.axisLine.lineStyle.color">axisLine.lineStyle.color</a>.</p><h2 id="event">Event processing</h2><h3>How do I get events such as chart clicks?</h3><p>Pelease read <a href="https://echarts.apache.org/en/tutorial.html#Events%20and%20Actions%20in%20ECharts"> official website tutorial</a>. The types of events supported by ECharts can be found in the <a href="https://echarts.apache.org/en/api.html#events">related API</a>.</p><h2 id="others">others</h2><h3>Why is the chart not displayed?</h3><p>You can check the following situations:</p><ul><li>Whether <code>echarts.js</code> is loaded normally.</li><li>Whether<code>echarts</code>  variable exists.</li><li>Whether the DOM container has a width or height when calling <code>echarts.init</code>.</li></ul><h3>Where can I learn ECharts?</h3><p>The official website is the best learning platform. In addition, learning other people's work on the <a href="https://gallery.echartsjs.com">ECharts Gallery</a> is also a good choice.</p><p>ECharts related projects and resources can be found at <a href="https://github.com/ecomfe/awesome-echarts">awesome-echarts</a>.</p><footer class="inner-footer"><div class="container"><div class="row"><div class="col-md-8"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-4"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1597861067124"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+});</code></pre><p>Please refer to <a href="https://gallery.echartsjs.com/editor.html?c=xHyqn_rQ6g">this example</a>.</p><h3>How to make my custom map?</h3><p>The ECharts map is <a href="https://github.com/apache/incubator-echarts/blob/8eeb7e5abe207d0536c62ce1f4ddecc6adfdf85e/src/util/mapData/rawData/encode.js">additionally encoded</a> from original coordinates. You can use the <a href="https://github.com/giscafer/mapshaper-plus">mapshaper-plus tool</a> to upload a custom geojson file and then generate a map file that can be used in Echarts.</p><h2 id="baidu-map">baidu-map</h2><h3>How to use ECharts with Baidu map?</h3><ol><li>Include <code>echarts.js</code>, <code>bmap.js</code> and <code>https://api.map.baidu.com/api?v=2.0&ak=Here is the access key you obtained on the Baidu development platform</code>.</li><li>Set <code>bmap</code> in <code>option</code>,You can refer to this <a href="https://echarts.apache.org/examples/en/editor.html?c=effectScatter-bmap">example</a>.</li><li>If you need to get a Baidu map instance, you can use <code>chart.getModel().getComponent('bmap').getBMap()</code>,and then make do settings based on <a href="https://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html">Baidu Maps API</a> .</li></ol><p>There are more examples about Baidu maps on <a href="https://gallery.echartsjs.com/explore.html#components=bmap~sort=rank~timeframe=all~author=all">ECharts Gallery</a> , which can be used as a reference.</p><h2 id="gauge-chart">gauge-chart</h2><h3>How to set the dashboard color?</h3><p>You can use <a href="https://echarts.apache.org/en/option.html#series-gauge.axisLine.lineStyle.color">axisLine.lineStyle.color</a>.</p><h2 id="event">Event processing</h2><h3>How do I get events such as chart clicks?</h3><p>Pelease read <a href="https://echarts.apache.org/en/tutorial.html#Events%20and%20Actions%20in%20ECharts"> official website tutorial</a>. The types of events supported by ECharts can be found in the <a href="https://echarts.apache.org/en/api.html#events">related API</a>.</p><h2 id="others">others</h2><h3>Why is the chart not displayed?</h3><p>You can check the following situations:</p><ul><li>Whether <code>echarts.js</code> is loaded normally.</li><li>Whether<code>echarts</code>  variable exists.</li><li>Whether the DOM container has a width or height when calling <code>echarts.init</code>.</li></ul><h3>Where can I learn ECharts?</h3><p>The official website is the best learning platform. In addition, learning other people's work on the <a href="https://gallery.echartsjs.com">ECharts Gallery</a> is also a good choice.</p><p>ECharts related projects and resources can be found at <a href="https://github.com/ecomfe/awesome-echarts">awesome-echarts</a>.</p><footer class="inner-footer"><div class="container"><div class="row"><div class="col-md-8"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-4"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1598523334942"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
 
diff --git a/en/feature.html b/en/feature.html
index a1d3dc1..8c89762 100644
--- a/en/feature.html
+++ b/en/feature.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'en';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -7,7 +7,7 @@
     document.head.insertBefore(el, document.getElementById('font-hack'));
 }
 </script><title>Features - Apache ECharts (incubating)</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><div class="container"><h1>Features</h1><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div></div><div class="page-content single-page"><div class="page-nav"><h4>Features</h4><ul></ul></div><div class="page-detail"><p class="page-detail-desc">Apache ECharts (incubating)<sup>TM</sup> is an open-sourced JavaScript visualization tool, which can run fluently on PC and mobile devices. It is compatible with most modern Web Browsers, e.g., IE8/9/10/11, Chrome, Firefox, Safari and so on. ECharts depends on <a href="https://github.com/ecomfe/zrender" target="_blank">ZRender</a>, a graphic rendering engine, to create intuitive, interactive, and highly-customizable charts.</p><h2 id="chart-types">Abundant Chart Types</h2><p>The basic chart types ECharts supports include <a href="option.html#series-line" target="_blank">line series</a>, <a href="option.html#series-line" target="_blank">bar series</a>, <a href="option.html#series-scatter" target="_blank">scatter series</a>, <a href="option.html#series-pie" target="_blank">pie charts</a>, <a href="option.html#series-candlestick" target="_blank">candle-stick series</a>, <a href="option.html#series-boxplot" target="_blank">boxplot series</a> for statistics, <a href="option.html#series-map" target="_blank">map series</a>, <a href="option.html#series-heatmap" target="_blank">heatmap series</a>, <a href="option.html#series-lines" target="_blank">lines series</a> for directional information, <a href="option.html#series-graph" target="_blank">graph series</a> for relationships, <a href="option.html#series-treemap" target="_blank">treemap series</a>, <a href="option.html#series-sunburst">sunburst series</a>, <a href="option.html#series-parallel" target="_blank">parallel series</a> for multi-dimensional data, <a href="option.html#series-funnel" target="_blank">funnel series</a>, <a href="option.html#series-gauge" target="_blank">gauge series</a>. And it's extremely easy to create a combinition of them with ECharts.</p><p>Besides the built-in chart types, ECharts also provide the <a href="option.html#series-custom">customed series</a> for users to create a specific chart types. To use it, you should only pass in a callback function named <em>renderItem</em>, and return any graphic elements you wish to draw to according to the data. What makes it even better is that it can interact with the existing ECharts components and you don't have to worry about the interaction with them.</p><p>If the default package size is too large for you, you can choose the chart types and components you need and download in <a href="builder.html">the online builder</a>.</p><h2 id="dataset">Multiple Data Format Ready-To-Use</h2><p>The built-in <code>dataset</code> attribute from ECharts v4.0 supports data formats including two-dimensional table, key-value object, and so on. The map from data to graphic can be easily set by the <code>encode</code> attribute. This is a more intuitive way to think when developing a chart, and it saves much time writing data-converting steps for developpers. Futhermore, it saves memory since different components can share on piece of data rather than copying.</p><p>ECharts supports TypedArray, which occupies less memory than array and is more gabbage-collection-friendly. For big data visualization, it is suggested to use TypedArray to improve performance.</p><h2 id="big-data">Data Visualization of Tens of Millions on Web</h2><p>With the help of imcremental rendering technique since v4.0 and optimization of all ascpects, ECharts can display the visualization of tens of millions of data. What's more, interactions like scaling and transforming are fluent all the same.</p><p>Tens of millions of data usually takes over hundreds of MB spaces. ECharts provide streaming data ability since v4.0 and makes it possible to render as much data as loaded from WebSocket. There is no need to wait for all data to be loaded to start rendering.</p><img src="https://echarts.apache.org/en/images/features/scatterGL.jpg?_v_=20200710_1" width="60%"><br /><img src="https://echarts.apache.org/en/images/features/scatterGL2.jpg?_v_=20200710_1" width="30%"><img src="https://echarts.apache.org/en/images/features/scatterGL3.jpg?_v_=20200710_1" width="30%"><h2 id="mobile">Mobile Optimization</h2><p>ECharts has been carefully optimized for mobile interaction, such zooming and panning the coordinate system with your fingers on small screens. The PC users can also use the mouse wheel to do the same interaction.</p><p>The fine-grained modularity and packaging mechanism allows ECharts to have a small package size on the mobile, and the optional SVG rendering engine makes the memory cost of the mobile much smaller.</p><iframe data-src="https://echarts.apache.org/examples/en/view.html?c=area-simple&amp;reset=1&amp;edit=1&amp;renderer=svg" width="60%" height="400"></iframe><h2 id="mult-platform">Multi-Rendering Solutions and Cross-Platform Support</h2><p>ECharts supports rendering charts in the form of Canvas, SVG (v4.0+), and VML. VML is compatible with lower versions of IE; SVG reduces the memory cost on mobiles; and Canvas can easily handle large data visualization and special rendering effects. Different rendering methods provide more choices, making ECharts performs better in different scenarios.</p><p>In addition to PC and mobile browsers, ECharts can also be used with node-canvas on Node for efficient server-side rendering (SSR). And ECharts support Wechat Applet rendering since v4.0.</p><p>Community contributors also provide us with a variety of different language extensions. For example, <a href="https://github.com/pyecharts/pyecharts" target="_blank">pyecharts</a> for Python, <a href="https://github.com/cosname/recharts" target="_blank">recharts</a> for R, <a href="https://github.com/randyzwitch/ECharts.jl">ECharts.jl</a> for Julia and so on.</p><p>We hope that the platform and language will not be the limit for everyone to use ECharts for visualization!</p><h2 id="interaction">Interactive Data Exploration In-Depth</h2><p>Interaction is an important means of mining information from data. Overview first, zoom filtering to view details as needed is a basic requirement for data visualization interaction.</p><p>ECharts has been on the road of <em>interaction</em>. We have provided <a href="option.html#legend" target="_blank">legend</a>, <a href="option.html#visualMap" target="_blank">visualMap</a>, <a href="option.html#dataZoom" target="_blank">dataZoom</a>, <a href="option.html#tooltip" target="_blank">tooltip</a>, <a href="option.html#brush">brushing</a> and other ready-to-use interactive components, which can perform interactive operations such as multi-dimensional data screening, view zooming, and display details on the data.</p><iframe data-src="https://echarts.apache.org/examples/en/view.html?c=scatter-matrix&amp;reset=1&amp;edit=1" width="60%" height="540"></iframe><h2 id="visual-mapping">Multi-Dimensional Data Support and Rich Visual Coding</h2><p>ECharts 3 began to strengthen support for multi-dimensional data. In addition to the common multi-dimensional data visualization tools such as parallel coordinates, for traditional scatter plots, etc., the input data can also be multiple dimensions. With the rich visual coding provided by the visual mapping component <a href="option.html#visualMap" target="_blank">visualMap</a>, it is possible to map data of different dimensions to color, size, transparency, shading, etc. Different visual channels.</p><iframe data-src="https://echarts.apache.org/examples/en/view.html?c=scatter-nutrients-matrix&amp;reset=1&amp;edit=1" width="60%" height="400"></iframe><h2 id="dynamic-data">Dynamic Data</h2><p>ECharts is driven by data, and changes in data drive changes in the chart. So the implementation of dynamic data has become extremely simple, just need to get the data, fill in the data, ECharts will find the difference between the two sets of data and then use the appropriate animation to represent the data changes. The <a href="option.html#timeline" target="_blank">timeline</a> component can present data information in a higher time dimension.</p><iframe data-src="https://echarts.apache.org/examples/en/view.html?c=scatter-life-expectancy-timeline&amp;reset=1&amp;edit=1" width="60%" height="400"></iframe><h2 id="fancy-effects">Special Effects</h2><p>ECharts provides eye-catching effects for the visualization of geographic data such as line data and point data.</p><iframe data-src="https://echarts.apache.org/examples/en/view.html?c=lines-bmap-effect&amp;reset=1&amp;edit=1" width="60%" height="400"></iframe><h2 id="gl">More Powerful and Beautiful 3D Visualization with GL</h2><p>Do you want to achieve 3D visualization in VR, large screen scenes? We provide WebGL-based ECharts GL. You can use ECharts GL to draw 3D Earth, buildings, and population distribution histograms as easily as ECharts common components. Furthermore, we also provide configuration items so that you can get artistic results with a few lines of configuration!</p><img src="https://echarts.apache.org/en/images/features/flowGL-line.jpg?_v_=20200710_1" width="40%"><img src="https://echarts.apache.org/en/images/features/buildings-ny.jpg?_v_=20200710_1" width="40%"><br /><img src="https://echarts.apache.org/en/images/features/capetown-taxi.jpg?_v_=20200710_1" width="40%"><img src="https://echarts.apache.org/en/images/features/population.jpg?_v_=20200710_1" width="40%"><h2 id="aria">Accessibility</h2><p>When we talk about visualization, we tend to naturally associate it with seeing, but it is one-sided. The W3C has developed the Accessible Rich Internet Applications Suite (WAI-ARIA), which aims to make web content and web applications accessible to more people with disabilities.</p><p>ECharts 4.0 complies with this specification and supports automatic generation of descriptions based on chart configuration items, enabling people with visual disabilities to understand the chart content with the help of reading devices, so that charts can be accessed by more people!</p><footer class="inner-footer"><div class="container"><div class="row"><div class="col-md-8"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-4"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1597861067124"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><div class="container"><h1>Features</h1><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div></div><div class="page-content single-page"><div class="page-nav"><h4>Features</h4><ul></ul></div><div class="page-detail"><p class="page-detail-desc">Apache ECharts (incubating)<sup>TM</sup> is an open-sourced JavaScript visualization tool, which can run fluently on PC and mobile devices. It is compatible with most modern Web Browsers, e.g., IE8/9/10/11, Chrome, Firefox, Safari and so on. ECharts depends on <a href="https://github.com/ecomfe/zrender" target="_blank">ZRender</a>, a graphic rendering engine, to create intuitive, interactive, and highly-customizable charts.</p><h2 id="chart-types">Abundant Chart Types</h2><p>The basic chart types ECharts supports include <a href="option.html#series-line" target="_blank">line series</a>, <a href="option.html#series-line" target="_blank">bar series</a>, <a href="option.html#series-scatter" target="_blank">scatter series</a>, <a href="option.html#series-pie" target="_blank">pie charts</a>, <a href="option.html#series-candlestick" target="_blank">candle-stick series</a>, <a href="option.html#series-boxplot" target="_blank">boxplot series</a> for statistics, <a href="option.html#series-map" target="_blank">map series</a>, <a href="option.html#series-heatmap" target="_blank">heatmap series</a>, <a href="option.html#series-lines" target="_blank">lines series</a> for directional information, <a href="option.html#series-graph" target="_blank">graph series</a> for relationships, <a href="option.html#series-treemap" target="_blank">treemap series</a>, <a href="option.html#series-sunburst">sunburst series</a>, <a href="option.html#series-parallel" target="_blank">parallel series</a> for multi-dimensional data, <a href="option.html#series-funnel" target="_blank">funnel series</a>, <a href="option.html#series-gauge" target="_blank">gauge series</a>. And it's extremely easy to create a combinition of them with ECharts.</p><p>Besides the built-in chart types, ECharts also provide the <a href="option.html#series-custom">customed series</a> for users to create a specific chart types. To use it, you should only pass in a callback function named <em>renderItem</em>, and return any graphic elements you wish to draw to according to the data. What makes it even better is that it can interact with the existing ECharts components and you don't have to worry about the interaction with them.</p><p>If the default package size is too large for you, you can choose the chart types and components you need and download in <a href="builder.html">the online builder</a>.</p><h2 id="dataset">Multiple Data Format Ready-To-Use</h2><p>The built-in <code>dataset</code> attribute from ECharts v4.0 supports data formats including two-dimensional table, key-value object, and so on. The map from data to graphic can be easily set by the <code>encode</code> attribute. This is a more intuitive way to think when developing a chart, and it saves much time writing data-converting steps for developpers. Futhermore, it saves memory since different components can share on piece of data rather than copying.</p><p>ECharts supports TypedArray, which occupies less memory than array and is more gabbage-collection-friendly. For big data visualization, it is suggested to use TypedArray to improve performance.</p><h2 id="big-data">Data Visualization of Tens of Millions on Web</h2><p>With the help of imcremental rendering technique since v4.0 and optimization of all ascpects, ECharts can display the visualization of tens of millions of data. What's more, interactions like scaling and transforming are fluent all the same.</p><p>Tens of millions of data usually takes over hundreds of MB spaces. ECharts provide streaming data ability since v4.0 and makes it possible to render as much data as loaded from WebSocket. There is no need to wait for all data to be loaded to start rendering.</p><img src="https://echarts.apache.org/en/images/features/scatterGL.jpg?_v_=20200710_1" width="60%"><br /><img src="https://echarts.apache.org/en/images/features/scatterGL2.jpg?_v_=20200710_1" width="30%"><img src="https://echarts.apache.org/en/images/features/scatterGL3.jpg?_v_=20200710_1" width="30%"><h2 id="mobile">Mobile Optimization</h2><p>ECharts has been carefully optimized for mobile interaction, such zooming and panning the coordinate system with your fingers on small screens. The PC users can also use the mouse wheel to do the same interaction.</p><p>The fine-grained modularity and packaging mechanism allows ECharts to have a small package size on the mobile, and the optional SVG rendering engine makes the memory cost of the mobile much smaller.</p><iframe data-src="https://echarts.apache.org/examples/en/view.html?c=area-simple&amp;reset=1&amp;edit=1&amp;renderer=svg" width="60%" height="400"></iframe><h2 id="mult-platform">Multi-Rendering Solutions and Cross-Platform Support</h2><p>ECharts supports rendering charts in the form of Canvas, SVG (v4.0+), and VML. VML is compatible with lower versions of IE; SVG reduces the memory cost on mobiles; and Canvas can easily handle large data visualization and special rendering effects. Different rendering methods provide more choices, making ECharts performs better in different scenarios.</p><p>In addition to PC and mobile browsers, ECharts can also be used with node-canvas on Node for efficient server-side rendering (SSR). And ECharts support Wechat Applet rendering since v4.0.</p><p>Community contributors also provide us with a variety of different language extensions. For example, <a href="https://github.com/pyecharts/pyecharts" target="_blank">pyecharts</a> for Python, <a href="https://github.com/cosname/recharts" target="_blank">recharts</a> for R, <a href="https://github.com/randyzwitch/ECharts.jl">ECharts.jl</a> for Julia and so on.</p><p>We hope that the platform and language will not be the limit for everyone to use ECharts for visualization!</p><h2 id="interaction">Interactive Data Exploration In-Depth</h2><p>Interaction is an important means of mining information from data. Overview first, zoom filtering to view details as needed is a basic requirement for data visualization interaction.</p><p>ECharts has been on the road of <em>interaction</em>. We have provided <a href="option.html#legend" target="_blank">legend</a>, <a href="option.html#visualMap" target="_blank">visualMap</a>, <a href="option.html#dataZoom" target="_blank">dataZoom</a>, <a href="option.html#tooltip" target="_blank">tooltip</a>, <a href="option.html#brush">brushing</a> and other ready-to-use interactive components, which can perform interactive operations such as multi-dimensional data screening, view zooming, and display details on the data.</p><iframe data-src="https://echarts.apache.org/examples/en/view.html?c=scatter-matrix&amp;reset=1&amp;edit=1" width="60%" height="540"></iframe><h2 id="visual-mapping">Multi-Dimensional Data Support and Rich Visual Coding</h2><p>ECharts 3 began to strengthen support for multi-dimensional data. In addition to the common multi-dimensional data visualization tools such as parallel coordinates, for traditional scatter plots, etc., the input data can also be multiple dimensions. With the rich visual coding provided by the visual mapping component <a href="option.html#visualMap" target="_blank">visualMap</a>, it is possible to map data of different dimensions to color, size, transparency, shading, etc. Different visual channels.</p><iframe data-src="https://echarts.apache.org/examples/en/view.html?c=scatter-nutrients-matrix&amp;reset=1&amp;edit=1" width="60%" height="400"></iframe><h2 id="dynamic-data">Dynamic Data</h2><p>ECharts is driven by data, and changes in data drive changes in the chart. So the implementation of dynamic data has become extremely simple, just need to get the data, fill in the data, ECharts will find the difference between the two sets of data and then use the appropriate animation to represent the data changes. The <a href="option.html#timeline" target="_blank">timeline</a> component can present data information in a higher time dimension.</p><iframe data-src="https://echarts.apache.org/examples/en/view.html?c=scatter-life-expectancy-timeline&amp;reset=1&amp;edit=1" width="60%" height="400"></iframe><h2 id="fancy-effects">Special Effects</h2><p>ECharts provides eye-catching effects for the visualization of geographic data such as line data and point data.</p><iframe data-src="https://echarts.apache.org/examples/en/view.html?c=lines-bmap-effect&amp;reset=1&amp;edit=1" width="60%" height="400"></iframe><h2 id="gl">More Powerful and Beautiful 3D Visualization with GL</h2><p>Do you want to achieve 3D visualization in VR, large screen scenes? We provide WebGL-based ECharts GL. You can use ECharts GL to draw 3D Earth, buildings, and population distribution histograms as easily as ECharts common components. Furthermore, we also provide configuration items so that you can get artistic results with a few lines of configuration!</p><img src="https://echarts.apache.org/en/images/features/flowGL-line.jpg?_v_=20200710_1" width="40%"><img src="https://echarts.apache.org/en/images/features/buildings-ny.jpg?_v_=20200710_1" width="40%"><br /><img src="https://echarts.apache.org/en/images/features/capetown-taxi.jpg?_v_=20200710_1" width="40%"><img src="https://echarts.apache.org/en/images/features/population.jpg?_v_=20200710_1" width="40%"><h2 id="aria">Accessibility</h2><p>When we talk about visualization, we tend to naturally associate it with seeing, but it is one-sided. The W3C has developed the Accessible Rich Internet Applications Suite (WAI-ARIA), which aims to make web content and web applications accessible to more people with disabilities.</p><p>ECharts 4.0 complies with this specification and supports automatic generation of descriptions based on chart configuration items, enabling people with visual disabilities to understand the chart content with the help of reading devices, so that charts can be accessed by more people!</p><footer class="inner-footer"><div class="container"><div class="row"><div class="col-md-8"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-4"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1598523334942"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
 
diff --git a/en/index.html b/en/index.html
index b568b14..715729f 100644
--- a/en/index.html
+++ b/en/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'en';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -17,9 +17,9 @@
 
 </script><section id="feature-section"><div class="container"><div class="row features"><p>Apache ECharts (incubating)<sup>TM</sup> is an incubation project at <a target="_blank" href="https://www.apache.org/">The Apache Software Foundation</a> (ASF).</p></div><div class="row features"><div class="col-sm-4"><div class="feature-icon-panel"><svg width="36px" height="33px" viewbox="0 0 36 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="feature-icon"><defs></defs><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="01-首页-标注" transform="translate(-320.000000, -826.000000)" stroke="#333743" stroke-width="2"><g id="Group-7" transform="translate(321.000000, 827.387847)"><path id="Oval-1-Copy-2" d="M17,29.5876845 C17,29.5876845 0.5,15.970603 0.5,10.4351463 C0.5,4.89968971 5.02192403,0.41231548 10.6,0.41231548 C13.0289902,0.41231548 17,3.27642672 17,3.27642672 C17,3.27642672 20.9710098,0.41231548 23.4,0.41231548 C28.978076,0.41231548 33.5,4.89968971 33.5,10.4351463 C33.5,15.970603 17,29.5876845 17,29.5876845 Z"></path><path id="Path-4" d="M8.97721839,4.43098465 C8.97721839,4.43098465 4.65711371,4.98291942 5.76387751,8.9986647"></path></g></g></g></svg></div><h3>Free to use</h3><p>Open sourced under Apache-2.0 License</p></div><div class="col-sm-4"><div class="feature-icon-panel"><svg width="37px" height="36px" viewbox="0 0 37 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="feature-icon"><defs><rect id="path-1" x="0.402989808" y="0.675409258" width="15.7021285" height="15.4476654" rx="3.4507722"></rect><mask id="mask-2" maskcontentunits="userSpaceOnUse" maskunits="objectBoundingBox" x="0" y="0" width="15.7021285" height="15.4476654" fill="white"><use xlink:href="#path-1"></use></mask><rect id="path-3" x="0.402989808" y="19.9416819" width="15.7021285" height="15.4476654" rx="3.4507722"></rect><mask id="mask-4" maskcontentunits="userSpaceOnUse" maskunits="objectBoundingBox" x="0" y="0" width="15.7021285" height="15.4476654" fill="white"><use xlink:href="#path-3"></use></mask><rect id="path-5" x="20.0265472" y="0.675409258" width="15.7021285" height="15.4476654" rx="3.4507722"></rect><mask id="mask-6" maskcontentunits="userSpaceOnUse" maskunits="objectBoundingBox" x="0" y="0" width="15.7021285" height="15.4476654" fill="white"><use xlink:href="#path-5"></use></mask><rect id="path-7" x="20.0265472" y="19.9416819" width="15.7021285" height="15.4476654" rx="3.4507722"></rect><mask id="mask-8" maskcontentunits="userSpaceOnUse" maskunits="objectBoundingBox" x="0" y="0" width="15.7021285" height="15.4476654" fill="white"><use xlink:href="#path-7"></use></mask></defs><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="01-首页-标注" transform="translate(-701.000000, -824.000000)"><g id="Group-12" transform="translate(702.000000, 824.000000)"><use id="Rectangle-2" stroke="#333743" mask="url(#mask-2)" stroke-width="4" xlink:href="#path-1"></use><path id="Line" d="M16.6179041,10.4063517 L0.445091444,10.4063517" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square"></path><path id="Line-Copy-3" d="M16.6179041,5.4063517 L0.445091444,5.4063517" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square"></path><path id="Line-Copy" d="M6,1.07200204 L6,16.2280375" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square"></path><path id="Line-Copy-2" d="M11,1.07200204 L11,16.2280375" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square"></path><use id="Rectangle-2-Copy-2" stroke="#333743" mask="url(#mask-4)" stroke-width="4" xlink:href="#path-3"></use><use id="Rectangle-2-Copy" stroke="#333743" mask="url(#mask-6)" stroke-width="4" xlink:href="#path-5"></use><use id="Rectangle-2-Copy-3" stroke="#333743" mask="url(#mask-8)" stroke-width="4" xlink:href="#path-7"></use></g></g></g></svg></div><h3>Rich Features</h3><p>Caters for all needs</p></div><div class="col-sm-4"><div class="feature-icon-panel"><svg width="36px" height="31px" viewbox="0 0 36 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="feature-icon"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="01-首页-标注" transform="translate(-1084.000000, -827.000000)" fill="#333743"><g id="Group-38" transform="translate(1057.000000, 797.000000)"><path id="Shape" d="M63,56.361686 C63,51.671658 60.3077922,47.6639411 56.5050056,46.0305295 C58.3479474,44.7003672 59.5616758,42.4363346 59.5616758,39.8656065 C59.5616758,36.354116 57.2992585,33.4181102 54.2632182,32.6530946 C54.2357116,32.6462026 54.2082051,32.6496486 54.1841368,32.6599867 C54.1497535,32.6565406 54.1153703,32.6496486 54.0809871,32.6496486 C53.4311438,32.6496486 52.9050802,33.2182413 52.9050802,33.9177826 C52.9050802,34.5518495 53.3348707,35.068752 53.8953176,35.1652404 C53.995029,35.2100386 54.1256853,35.2410528 54.1325619,35.2444988 C55.8895456,35.8889038 57.1582872,37.6842783 57.1582872,39.8001322 C57.1582872,42.1606533 55.5835347,44.1214365 53.5067869,44.5315124 C53.5033486,44.5315124 53.4999103,44.5384045 53.4999103,44.5384045 C52.8088071,44.5866487 52.2586752,45.2000396 52.2586752,45.9581631 C52.2586752,46.7266247 52.8225604,47.3503537 53.5274169,47.3813678 C53.5308552,47.3848138 53.5377318,47.3917059 53.5411702,47.3917059 C57.718734,47.850026 60.6791312,51.688888 60.6791312,56.361686 C60.6791312,57.0543353 61.1983181,57.6160359 61.8412847,57.6160359 C62.4670598,57.6160359 62.9724934,57.0819034 62.9965617,56.4133762 C62.9965617,56.4064842 63,56.4030382 63,56.3961462 L63,56.3892541 L63,56.361686 L63,56.361686 Z M27,55.9123667 C27,51.2223386 29.6922078,47.2146218 33.4949944,45.5812101 C31.6520526,44.2510479 30.4383242,41.9870152 30.4383242,39.4162872 C30.4383242,35.9047967 32.7007415,32.9687909 35.7367818,32.2037753 C35.7642884,32.1968832 35.7917949,32.2003293 35.8158632,32.2106673 C35.8502465,32.2072213 35.8846297,32.2003293 35.9190129,32.2003293 C36.5688562,32.2003293 37.0949198,32.7689219 37.0949198,33.4684632 C37.0949198,34.1025302 36.6651293,34.6194326 36.1046824,34.7159211 C36.004971,34.7607193 35.8743147,34.7917334 35.8674381,34.7951795 C34.1104544,35.4395845 32.8417128,37.2349589 32.8417128,39.3508129 C32.8417128,41.7113339 34.4164653,43.6721172 36.4932131,44.0821931 C36.4966514,44.0821931 36.5000897,44.0890851 36.5000897,44.0890851 C37.1911929,44.1373293 37.7413248,44.7507202 37.7413248,45.5088438 C37.7413248,46.2773054 37.1774396,46.9010343 36.4725831,46.9320485 C36.4691448,46.9354945 36.4622682,46.9423865 36.4588298,46.9423865 C32.281266,47.4007067 29.3208688,51.2395687 29.3208688,55.9123667 C29.3208688,56.6050159 28.8016819,57.1667165 28.1587153,57.1667165 C27.5329402,57.1667165 27.0275066,56.632584 27.0034383,55.9640569 C27.0034383,55.9571649 27,55.9537189 27,55.9468268 L27,55.9399348 L27,55.9123667 L27,55.9123667 Z M49.0919787,46.2372904 C51.2925061,44.645231 52.7434789,41.9401083 52.7434789,38.8662618 C52.7434789,33.9694728 49.0644721,29.9996622 44.5258841,29.9996622 C39.9872962,29.9996622 36.3082893,33.9694728 36.3082893,38.8662618 C36.3082893,41.9401083 37.7592621,44.645231 39.9597896,46.2372904 C35.4074484,48.1980736 32.1926153,52.9914822 32.1926153,58.6015965 C32.1926153,58.91863 32.2098069,59.2287715 32.2304368,59.5389129 L32.2338752,59.5389129 C32.2338752,60.2212241 32.7461855,60.7760327 33.3788371,60.7760327 C34.0114888,60.7760327 34.5237991,60.2246701 34.5237991,59.5389129 C34.5237991,59.5010067 34.5169224,59.4631006 34.5134841,59.4251944 C34.4928542,59.1529591 34.4722242,58.8807238 34.4722242,58.6015965 C34.4722242,52.6089744 38.9729906,47.7535376 44.5224458,47.7535376 C50.0753394,47.7535376 54.5761057,52.6089744 54.5761057,58.6015965 C54.5761057,58.8910619 54.5554758,59.1736352 54.5348458,59.4562085 C54.5348458,59.4699926 54.5314075,59.4837767 54.5314075,59.4975607 L54.5314075,59.5354669 L54.5348458,59.5354669 C54.5554758,60.200548 55.0574711,60.7346805 55.6763695,60.7346805 C56.2952678,60.7346805 56.7972632,60.200548 56.8178931,59.5354669 L56.8213314,59.5354669 C56.8419614,59.2253255 56.859153,58.915184 56.859153,58.6015965 C56.8557147,52.9914822 53.6374432,48.1980736 49.0919787,46.2372904 L49.0919787,46.2372904 Z M44.5224458,45.2379457 C41.2629145,45.2379457 38.6188432,42.3846443 38.6188432,38.8662618 C38.6188432,35.3478793 41.2629145,32.4945779 44.5224458,32.4945779 C47.7819771,32.4945779 50.4260484,35.3478793 50.4260484,38.8662618 C50.4260484,42.3846443 47.7819771,45.2379457 44.5224458,45.2379457 L44.5224458,45.2379457 Z"></path></g></g></g></svg></div><h3>Active Community</h3><p><!-- Place this tag where you want the button to render. -->
 <a class="github-button" href="https://github.com/apache/incubator-echarts" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star apache/incubator-echarts on GitHub">GitHub Stars</a></p></div></div><div id="feature-4" class="row feature-detail"><div class="col-sm-4 col"><h2>Brand-new v4.0</h2><p>Rendering ability for ten-million-level data</p><p>Supports both SVG and Canvas rendering</p><p>Seperates data and style configuring</p><p>Accessibility supports</p><p>Wechart and Powerpoint supports</p><div class="feature-btn"><a href="./tutorial.html">Learn More<svg width="10px" height="13px" viewbox="0 0 10 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="more-icon"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="01-首页-设计稿" transform="translate(-1082.000000, -1417.000000)" fill="#3AADE3"><g id="Group-44" transform="translate(1006.000000, 1161.000000)"><g id="Group-16"><g id="Group-35" transform="translate(4.000000, 255.947089)"><polygon id="Shape" transform="translate(77.000000, 7.000000) scale(-1, 1) translate(-77.000000, -7.000000) " points="82 1.80411203 80.8773864 1 72 6.99980583 80.8773864 13 82 12.1957262 74.3133589 6.99980583"></polygon></g></g></g></g></g></svg></a></div></div><div class="col-sm-8 col"><video id="video-feature-4" loop="true" muted="true" data-src="https://echarts.apache.org/en/video/feature-4.mp4" poster="https://echarts.apache.org/en/video/feature-4.jpg?_v_=20200710_1" class="lazy feature-video"></video><a id="video-feature-4-play" href="javascript:;" onclick="playVideo(&quot;video-feature-4&quot;)" class="feature-play-btn video-play-btn video-btn"><svg width="19px" height="25px" viewBox="0 0 19 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-23.000000, -18.000000)" fill="#AA344C"><path d="M41.365908,29.4271388 L41.3664843,29.4265626 L26.3794329,19.1497136 L26.3747509,19.1541315 C26.0642269,18.8592621 25.6429678,18.677793 25.1786824,18.677793 C24.2236284,18.677793 23.4494433,19.4443188 23.4494433,20.3905371 C23.4494433,20.910214 23.4270417,21.9276946 23.4494433,21.9056292 L23.4494433,30.6673861 L23.4494433,39.8901629 C23.4494433,39.8977982 23.4494433,40.4825908 23.4494433,40.9444991 C23.4494433,41.8901412 24.2236284,42.656691 25.1786824,42.656691 C25.6447205,42.656691 26.0677564,42.4740454 26.3782564,42.1764869 L26.3794329,42.1770872 L41.3664843,31.9005503 L41.3659081,31.8996379 C41.6917266,31.5882735 41.894997,31.1514078 41.894997,30.6670739 C41.894997,30.6658974 41.894997,30.6650091 41.894997,30.6635444 C41.894997,30.6623679 41.894997,30.6609273 41.894997,30.6600389 C41.894997,30.175657 41.6917265,29.7384792 41.365908,29.4271388 Z"></path></g></g></svg></a><a id="video-feature-4-pause" href="javascript:;" onclick="pauseVideo(&quot;video-feature-4&quot;)" class="feature-play-btn video-pause-btn video-btn"><svg width="17px" height="22px" viewBox="0 0 17 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-22.000000, -19.000000)" fill="#AA344C"><g transform="translate(22.667242, 19.000000)"><path d="M2,0 C3.1045695,-2.02906125e-16 4,0.8954305 4,2 L4,20 C4,21.1045695 3.1045695,22 2,22 C0.8954305,22 1.3527075e-16,21.1045695 0,20 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z M14,0 C15.1045695,-2.02906125e-16 16,0.8954305 16,2 L16,20 C16,21.1045695 15.1045695,22 14,22 C12.8954305,22 12,21.1045695 12,20 L12,2 C12,0.8954305 12.8954305,2.02906125e-16 14,0 Z"></path></g></g></g></svg></a></div></div><div id="feature-dimension" class="row feature-detail"><div class="col-sm-4 col mobile"><h2>Multi-dimension data analysis</h2><h3>Brush data for detail</h3><p>Dig more out of data</p><h3>Multi-chart interaction</h3><p>Analysis the relationship between multiple charts</p><div class="feature-btn"><a href="./tutorial.html">Learn More<svg width="10px" height="13px" viewbox="0 0 10 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="more-icon"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="01-首页-设计稿" transform="translate(-1082.000000, -1417.000000)" fill="#3AADE3"><g id="Group-44" transform="translate(1006.000000, 1161.000000)"><g id="Group-16"><g id="Group-35" transform="translate(4.000000, 255.947089)"><polygon id="Shape" transform="translate(77.000000, 7.000000) scale(-1, 1) translate(-77.000000, -7.000000) " points="82 1.80411203 80.8773864 1 72 6.99980583 80.8773864 13 82 12.1957262 74.3133589 6.99980583"></polygon></g></g></g></g></g></svg></a></div></div><div class="col-sm-8 col"><div id="col-desktop"><img data-src="https://echarts.apache.org/en/images/feature-1.png?_v_=20200710_1" class="lazy"><video id="video-feature-1" loop="true" muted="true" data-src="https://echarts.apache.org/en/video/feature-1.mp4" poster="https://echarts.apache.org/en/video/feature-2.jpg?_v_=20200710_1" class="lazy feature-video"></video><a id="video-feature-1-play" href="javascript:;" onclick="playVideo(&quot;video-feature-1&quot;)" class="feature-play-btn video-play-btn video-btn"><svg width="19px" height="25px" viewBox="0 0 19 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-23.000000, -18.000000)" fill="#AA344C"><path d="M41.365908,29.4271388 L41.3664843,29.4265626 L26.3794329,19.1497136 L26.3747509,19.1541315 C26.0642269,18.8592621 25.6429678,18.677793 25.1786824,18.677793 C24.2236284,18.677793 23.4494433,19.4443188 23.4494433,20.3905371 C23.4494433,20.910214 23.4270417,21.9276946 23.4494433,21.9056292 L23.4494433,30.6673861 L23.4494433,39.8901629 C23.4494433,39.8977982 23.4494433,40.4825908 23.4494433,40.9444991 C23.4494433,41.8901412 24.2236284,42.656691 25.1786824,42.656691 C25.6447205,42.656691 26.0677564,42.4740454 26.3782564,42.1764869 L26.3794329,42.1770872 L41.3664843,31.9005503 L41.3659081,31.8996379 C41.6917266,31.5882735 41.894997,31.1514078 41.894997,30.6670739 C41.894997,30.6658974 41.894997,30.6650091 41.894997,30.6635444 C41.894997,30.6623679 41.894997,30.6609273 41.894997,30.6600389 C41.894997,30.175657 41.6917265,29.7384792 41.365908,29.4271388 Z"></path></g></g></svg></a><a id="video-feature-1-pause" href="javascript:;" onclick="pauseVideo(&quot;video-feature-1&quot;)" class="feature-play-btn video-pause-btn video-btn"><svg width="17px" height="22px" viewBox="0 0 17 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-22.000000, -19.000000)" fill="#AA344C"><g transform="translate(22.667242, 19.000000)"><path d="M2,0 C3.1045695,-2.02906125e-16 4,0.8954305 4,2 L4,20 C4,21.1045695 3.1045695,22 2,22 C0.8954305,22 1.3527075e-16,21.1045695 0,20 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z M14,0 C15.1045695,-2.02906125e-16 16,0.8954305 16,2 L16,20 C16,21.1045695 15.1045695,22 14,22 C12.8954305,22 12,21.1045695 12,20 L12,2 C12,0.8954305 12.8954305,2.02906125e-16 14,0 Z"></path></g></g></g></svg></a></div></div><div id="col-analysis" class="col-sm-4 col pc"><h2>Multi-dimension data analysis</h2><h3>Brush data for detail</h3><p>Dig more out of data</p><h3>Multi-chart interaction</h3><p>Analysis the relationship between multiple charts</p><div class="feature-btn"><a href="./tutorial.html">Learn More<svg width="10px" height="13px" viewbox="0 0 10 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="more-icon"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="01-首页-设计稿" transform="translate(-1082.000000, -1417.000000)" fill="#3AADE3"><g id="Group-44" transform="translate(1006.000000, 1161.000000)"><g id="Group-16"><g id="Group-35" transform="translate(4.000000, 255.947089)"><polygon id="Shape" transform="translate(77.000000, 7.000000) scale(-1, 1) translate(-77.000000, -7.000000) " points="82 1.80411203 80.8773864 1 72 6.99980583 80.8773864 13 82 12.1957262 74.3133589 6.99980583"></polygon></g></g></g></g></g></svg></a></div></div></div><div class="row feature-detail"><div id="col-data" class="col-sm-4 col"><h2>Charts for all sized devices</h2><h3>PC / Phone / Pad / Large Screen ...</h3><p>Responsive design for all devices</p><div class="feature-btn"><a href="./tutorial.html">Learn More<svg width="10px" height="13px" viewbox="0 0 10 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="more-icon"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="01-首页-设计稿" transform="translate(-1082.000000, -1417.000000)" fill="#3AADE3"><g id="Group-44" transform="translate(1006.000000, 1161.000000)"><g id="Group-16"><g id="Group-35" transform="translate(4.000000, 255.947089)"><polygon id="Shape" transform="translate(77.000000, 7.000000) scale(-1, 1) translate(-77.000000, -7.000000) " points="82 1.80411203 80.8773864 1 72 6.99980583 80.8773864 13 82 12.1957262 74.3133589 6.99980583"></polygon></g></g></g></g></g></svg></a></div></div><div class="col-sm-8 col"><div id="col-desktop"><img data-src="https://echarts.apache.org/en/images/index-feature.jpg?_v_=20200710_1" class="lazy"></div></div><script type="text/javascript">window.supportTouch && (document.getElementById('ch-main').className += ' ch-on-touch');
-</script></div></div></section><section id="publication"><div class="container"><div class="col-sm-8 col"><h2>ECharts: A Declarative Framework for Rapid Construction of Web-based Visualization</h2><p class="note"><i class="note-icon"><img classs="lazy" data-src="https://echarts.apache.org/en/images/note.svg?_v_=20200710_1" /></i> Please cite the following paper whenever you use ECharts in your R&D projects, products, research papers, technical reports, news reports, books, presentations, teaching, patents, and other related intelligence activities.</p><p class="link">Visual Informatics, 2018<a href="https://www.sciencedirect.com/science/article/pii/S2468502X18300068">[PDF]</a></p></div><div class="col-sm-4 col"><div class="img-container"><img data-src="https://echarts.apache.org/en/images/pipeline.jpg?_v_=20200710_1" alt="" class="lazy"></div></div></div></section><section id="about-section" class="normal"><div class="container"><h3>Follow Us</h3><p>You may follow Apache ECharts (incubating) to keep informed.</p><div class="btn-panel"><a id="btn-github" href="https://github.com/apache/incubator-echarts"><div class="btn-content"><img data-src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1" class="lazy"><span>GitHub</span></div><div class="btn-shadow"></div></a><a id="btn-weibo" href="https://weibo.com/echarts"><div class="btn-content"><img data-src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1" class="lazy"><span>Weibo</span></div><div class="btn-shadow"></div></a><a id="btn-twitter" href="https://twitter.com/echartsjs"><div class="btn-content"><img data-src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1" class="lazy"><span>Twitter</span></div><div class="btn-shadow"></div></a></div></div></section></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1597861067124"></script><script>window.lazyLoadOptions = {
+</script></div></div></section><section id="publication"><div class="container"><div class="col-sm-8 col"><h2>ECharts: A Declarative Framework for Rapid Construction of Web-based Visualization</h2><p class="note"><i class="note-icon"><img classs="lazy" data-src="https://echarts.apache.org/en/images/note.svg?_v_=20200710_1" /></i> Please cite the following paper whenever you use ECharts in your R&D projects, products, research papers, technical reports, news reports, books, presentations, teaching, patents, and other related intelligence activities.</p><p class="link">Visual Informatics, 2018<a href="https://www.sciencedirect.com/science/article/pii/S2468502X18300068">[PDF]</a></p></div><div class="col-sm-4 col"><div class="img-container"><img data-src="https://echarts.apache.org/en/images/pipeline.jpg?_v_=20200710_1" alt="" class="lazy"></div></div></div></section><section id="about-section" class="normal"><div class="container"><h3>Follow Us</h3><p>You may follow Apache ECharts (incubating) to keep informed.</p><div class="btn-panel"><a id="btn-github" href="https://github.com/apache/incubator-echarts"><div class="btn-content"><img data-src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1" class="lazy"><span>GitHub</span></div><div class="btn-shadow"></div></a><a id="btn-weibo" href="https://weibo.com/echarts"><div class="btn-content"><img data-src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1" class="lazy"><span>Weibo</span></div><div class="btn-shadow"></div></a><a id="btn-twitter" href="https://twitter.com/echartsjs"><div class="btn-content"><img data-src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1" class="lazy"><span>Twitter</span></div><div class="btn-shadow"></div></a></div></div></section></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1598523334942"></script><script>window.lazyLoadOptions = {
     elements_selector: ".lazy"
-};</script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js"></script><script src="https://echarts.apache.org/en/js/index.js?_v_=1597861067124"></script><script async defer src="https://buttons.github.io/buttons.js"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+};</script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js"></script><script src="https://echarts.apache.org/en/js/index.js?_v_=1598523334942"></script><script async defer src="https://buttons.github.io/buttons.js"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
 
diff --git a/en/maillist.html b/en/maillist.html
index a6c4516..ce597b0 100644
--- a/en/maillist.html
+++ b/en/maillist.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'en';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -7,7 +7,7 @@
     document.head.insertBefore(el, document.getElementById('font-hack'));
 }
 </script><title>Mailing List - Apache ECharts (incubating)</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><h1>Mailing List</h1><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div><div id="maillist" class="page-content"><div class="container"><h2>About Mailing List</h2><p>Mailing list is where we discuss in public and keep everything tracked. You are welcomed to subscribe it if you wish:</p><ul><li>To be informed about bug reports or feature requests;</li><li>To discuss about developing plans or specific issues;</li><li>To offer helps to those who ask questions by email;</li><li>And etc.</li></ul><p>If you have a specific bug to report or feature request, we'd suggest you opening an issue with our <a href="https://ecomfe.github.io/echarts-issue-helper">issue helper tool</a>, which is a more efficient way to report the details.</p><p><a href="mailto:commits@echarts.incubator.apache.org">commits@echarts.incubator.apache.org</a> focuses on the commit logs, while <a href="mailto:dev@echarts.incubator.apache.org">dev@echarts.incubator.apache.org</a> holds other general discussions.</p><p>These two are public mailing list, and you can get access to them on Website <a href="https://lists.apache.org/list.html?commits@echarts.apache.org">https://lists.apache.org/list.html?commits@echarts.apache.org</a> and <a href="https://lists.apache.org/list.html?dev@echarts.apache.org">https://lists.apache.org/list.html?dev@echarts.apache.org</a> without subscribing.</p><h2>How To Subscribe</h2><p>Email <a href="mailto:commits-subscribe@echarts.incubator.apache.org">commits-subscribe@echarts.incubator.apache.org</a> or <a href="mailto:dev-subscribe@echarts.incubator.apache.org">dev-subscribe@echarts.incubator.apache.org</a> to subscribe commits@echarts.incubator.apache.org and dev@echarts.incubator.apache.org accordingly.</p><p>You should receive an email and please follow the instructions in that.</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1597861067124"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><h1>Mailing List</h1><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div><div id="maillist" class="page-content"><div class="container"><h2>About Mailing List</h2><p>Mailing list is where we discuss in public and keep everything tracked. You are welcomed to subscribe it if you wish:</p><ul><li>To be informed about bug reports or feature requests;</li><li>To discuss about developing plans or specific issues;</li><li>To offer helps to those who ask questions by email;</li><li>And etc.</li></ul><p>If you have a specific bug to report or feature request, we'd suggest you opening an issue with our <a href="https://ecomfe.github.io/echarts-issue-helper">issue helper tool</a>, which is a more efficient way to report the details.</p><p><a href="mailto:commits@echarts.incubator.apache.org">commits@echarts.incubator.apache.org</a> focuses on the commit logs, while <a href="mailto:dev@echarts.incubator.apache.org">dev@echarts.incubator.apache.org</a> holds other general discussions.</p><p>These two are public mailing list, and you can get access to them on Website <a href="https://lists.apache.org/list.html?commits@echarts.apache.org">https://lists.apache.org/list.html?commits@echarts.apache.org</a> and <a href="https://lists.apache.org/list.html?dev@echarts.apache.org">https://lists.apache.org/list.html?dev@echarts.apache.org</a> without subscribing.</p><h2>How To Subscribe</h2><p>Email <a href="mailto:commits-subscribe@echarts.incubator.apache.org">commits-subscribe@echarts.incubator.apache.org</a> or <a href="mailto:dev-subscribe@echarts.incubator.apache.org">dev-subscribe@echarts.incubator.apache.org</a> to subscribe commits@echarts.incubator.apache.org and dev@echarts.incubator.apache.org accordingly.</p><p>You should receive an email and please follow the instructions in that.</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1598523334942"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
 
diff --git a/en/option-gl.html b/en/option-gl.html
index 88545bd..0d94519 100644
--- a/en/option-gl.html
+++ b/en/option-gl.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'en';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -9,8 +9,8 @@
 </script><title>Documentation - Apache ECharts(incubating)</title><style>html, body {
     /* position: sticky should not have overflow parents.*/
     overflow-x: hidden;
-}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/en/css/doc-bundle.css?_v_=1597861067124"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-doc-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1597861067124"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts.apache.org/en/js/doc-bundle.js?_v_=1597861067124"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
+}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/en/css/doc-bundle.css?_v_=1598523334942"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-doc-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1598523334942"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts.apache.org/en/js/doc-bundle.js?_v_=1598523334942"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
 </script><script type="text/javascript">window.globalArgsExtra = {
     baseUrl: 'documents/option-gl-parts',
     docType: 'option-gl',
@@ -19,7 +19,7 @@
 if (window.EC_WWW_CDN_PAY_ROOT) {
     window.globalArgsExtra.cdnRoot = window.EC_WWW_CDN_PAY_ROOT + '/en/' + window.globalArgsExtra.baseUrl
 }</script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
-window.globalArgsExtra.version = '1597861067124';
+window.globalArgsExtra.version = '1598523334942';
 echartsDoc.init('#ec-doc-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
diff --git a/en/option.html b/en/option.html
index 143a164..758b348 100644
--- a/en/option.html
+++ b/en/option.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'en';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -9,8 +9,8 @@
 </script><title>Documentation - Apache ECharts(incubating)</title><style>html, body {
     /* position: sticky should not have overflow parents.*/
     overflow-x: hidden;
-}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/en/css/doc-bundle.css?_v_=1597861067124"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-doc-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1597861067124"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts.apache.org/en/js/doc-bundle.js?_v_=1597861067124"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
+}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/en/css/doc-bundle.css?_v_=1598523334942"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-doc-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1598523334942"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts.apache.org/en/js/doc-bundle.js?_v_=1598523334942"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
 </script><script type="text/javascript">window.globalArgsExtra = {
     baseUrl: 'documents/option-parts',
     docType: 'option',
@@ -19,7 +19,7 @@
 if (window.EC_WWW_CDN_PAY_ROOT) {
     window.globalArgsExtra.cdnRoot = window.EC_WWW_CDN_PAY_ROOT + '/en/' + window.globalArgsExtra.baseUrl
 }</script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
-window.globalArgsExtra.version = '1597861067124';
+window.globalArgsExtra.version = '1598523334942';
 echartsDoc.init('#ec-doc-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
diff --git a/en/option3.html b/en/option3.html
index cce1a41..35f4bae 100644
--- a/en/option3.html
+++ b/en/option3.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'en';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -7,7 +7,7 @@
     document.head.insertBefore(el, document.getElementById('font-hack'));
 }
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="ECharts Configurations"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-info"><div class="container"><h1>ECharts Configurations v3</h1><p>Sorry. This page is currently not available. Please checkout <a href="./option.html">Configurations of v4</a>.</p></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1597861067124"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
+<!--[if (gt IE 8)|!(IE)]><body class="ECharts Configurations"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-info"><div class="container"><h1>ECharts Configurations v3</h1><p>Sorry. This page is currently not available. Please checkout <a href="./option.html">Configurations of v4</a>.</p></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1598523334942"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
 </script><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
diff --git a/en/resources.html b/en/resources.html
index 54b1b8c..ed8659a 100644
--- a/en/resources.html
+++ b/en/resources.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -7,7 +7,7 @@
     document.head.insertBefore(el, document.getElementById('font-hack'));
 }
 </script><title>More Resources - Apache ECharts (incubating)</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="More Resources"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><div class="container"><h1>More Resources</h1><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div></div><div class="page-content"><div class="page-nav"></div><div class="container"><p>Besides the official resources we provided in this Website, the community has also created abundant resources like the support of multiple programming languages, or an online platform to host ECharts works called <a target="_blank" href="https://gallery.echartsjs.com">Gallery</a>.</p><p><a target="_blank" href="https://github.com/ecomfe/awesome-echarts">github.com/ecomfe/awesome-echarts</a> project provides a full list of these resources. Please check it out and add more as you know.</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=1597861067124"></script><script type="text/javascript">document.getElementById('nav-resources').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="More Resources"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><div class="container"><h1>More Resources</h1><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div></div><div class="page-content"><div class="page-nav"></div><div class="container"><p>Besides the official resources we provided in this Website, the community has also created abundant resources like the support of multiple programming languages, or an online platform to host ECharts works called <a target="_blank" href="https://gallery.echartsjs.com">Gallery</a>.</p><p><a target="_blank" href="https://github.com/ecomfe/awesome-echarts">github.com/ecomfe/awesome-echarts</a> project provides a full list of these resources. Please check it out and add more as you know.</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=1598523334942"></script><script type="text/javascript">document.getElementById('nav-resources').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
 
diff --git a/en/security.html b/en/security.html
index 377b88f..8461bf5 100644
--- a/en/security.html
+++ b/en/security.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -7,7 +7,7 @@
     document.head.insertBefore(el, document.getElementById('font-hack'));
 }
 </script><title>Security - Apache ECharts (incubating)</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="Security"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><div class="container"><h1>Security</h1><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div></div><div id="maillist" class="page-content"><div class="page-nav"></div><div class="container"><p>The Apache ECharts (incubating)<sup>TM</sup> takes a rigorous standpoint in annihilating the security issues in its software projects. Apache ECharts (incubating) is highly sensitive and forthcoming to issues pertaining to its features and functionality.</p><p>If you have apprehensions regarding ECharts's security or you discover vulnerability or potential threat, don't hesitate to get in touch with the <a href="http://www.apache.org/security/" target="_blank">Apache Security Team</a> by dropping a mail at <a href="mailto:security@apache.org">security@apache.org</a>. In the mail, specify the project name ECharts with the description of the issue or potential threat. You are also urged to recommend the way to reproduce and replicate the issue. The security team and the ECharts community will get back to you after assessing and analysing the findings.</p><p>PLEASE PAY ATTENTION to report the security issue on the security email before disclosing it on public domain.</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=1597861067124"></script><script type="text/javascript">document.getElementById('nav-others').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="Security"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><div class="container"><h1>Security</h1><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div></div><div id="maillist" class="page-content"><div class="page-nav"></div><div class="container"><p>The Apache ECharts (incubating)<sup>TM</sup> takes a rigorous standpoint in annihilating the security issues in its software projects. Apache ECharts (incubating) is highly sensitive and forthcoming to issues pertaining to its features and functionality.</p><p>If you have apprehensions regarding ECharts's security or you discover vulnerability or potential threat, don't hesitate to get in touch with the <a href="http://www.apache.org/security/" target="_blank">Apache Security Team</a> by dropping a mail at <a href="mailto:security@apache.org">security@apache.org</a>. In the mail, specify the project name ECharts with the description of the issue or potential threat. You are also urged to recommend the way to reproduce and replicate the issue. The security team and the ECharts community will get back to you after assessing and analysing the findings.</p><p>PLEASE PAY ATTENTION to report the security issue on the security email before disclosing it on public domain.</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=1598523334942"></script><script type="text/javascript">document.getElementById('nav-others').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
 
diff --git a/en/spreadsheet.html b/en/spreadsheet.html
index 92a1378..b87b2f2 100644
--- a/en/spreadsheet.html
+++ b/en/spreadsheet.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'en';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -6,13 +6,13 @@
         + '@font-face {font-family:"noto-light";src:local("Microsoft Yahei");}';
     document.head.insertBefore(el, document.getElementById('font-hack'));
 }
-</script><title>Spreadsheet Tool - Apache ECharts (incubating)</title><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/vendors/handsontable/0.26.1/dist/handsontable.full.min.css?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/spreadsheet.css?_v_=1597861067124"><script src="vendors/esl.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="ecdoc-sprsht"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1597861067124"></script><script type="text/javascript">document.getElementById('nav-resources').className = 'active';
+</script><title>Spreadsheet Tool - Apache ECharts (incubating)</title><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/vendors/handsontable/0.26.1/dist/handsontable.full.min.css?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/spreadsheet.css?_v_=1598523334942"><script src="vendors/esl.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="ecdoc-sprsht"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1598523334942"></script><script type="text/javascript">document.getElementById('nav-resources').className = 'active';
 
 var vendorPath = '../vendors';
 
 define('globalArgs', extend({
-    version: '1597861067124',
+    version: '1598523334942',
     basePath: './'
 }, window.globalArgsExtra || {}));
 
@@ -31,7 +31,7 @@
         numeral: vendorPath + '/numeral/1.4.7/numeral.min',
         immutable: vendorPath + '/immutable/3.7.4/dist/immutable'
     },
-    urlArgs: '_v_=1597861067124'
+    urlArgs: '_v_=1598523334942'
 });
 
 require(['spreadsheet/spreadsheet'], function (spreadsheet) {
diff --git a/en/theme-builder.html b/en/theme-builder.html
index 11a00a3..efe1610 100644
--- a/en/theme-builder.html
+++ b/en/theme-builder.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'en';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -51,7 +51,7 @@
                     </button>
                     <button type="button" class="btn btn-default" @click="newTheme()">
                       <span class="glyphicon glyphicon-repeat"></span>
-                      Repeat
+                      Reset
                     </button>
                     <button class="btn btn-default" data-toggle="modal" data-target="#download-modal">
                       <span class="glyphicon glyphicon-question-sign"></span>
@@ -143,7 +143,7 @@
                   <div class="form-group">
                     <div class="col-sm-12">
                       <input v-model="theme.axisSeperateSetting" @change="axisSeperateSettingChanges()" type="checkbox" id="axisSeperateSetting" />
-                      <label for="axisSeperateSetting" class="control-label">Change Config For Each Axis Types</label>
+                      <label for="axisSeperateSetting" class="control-label">Change Config For Each Axis Type</label>
                     </div>
                   </div>
                   <div class="axis-group" v-for="axis in theme.axis" v-if="$index > 0 || !theme.axisSeperateSetting">
@@ -188,7 +188,7 @@
               <div class="panel-body">
                 <form class="form-horizontal">
                   <config-color :color.sync="theme.toolboxColor" title="Item"></config-color>
-                  <config-color :color.sync="theme.toolboxEmpasisColor" title="Empasis"></config-color>
+                  <config-color :color.sync="theme.toolboxEmphasisColor" title="Emphasis"></config-color>
                 </form>
               </div>
             </div>
@@ -313,11 +313,11 @@
                         </div>
                         <div class="col-sm-12">
                           <input type="radio" name="symbol" id="symbolTri" value="triangle" @change="updateSymbol('triangle')" />
-                          <label for="symbolTri">Rectangle</label>
+                          <label for="symbolTri">Triangle</label>
                         </div>
                         <div class="col-sm-12">
                           <input type="radio" name="symbol" id="symbolTriE" value="triangle" @change="updateSymbol('emptyTriangle')" />
-                          <label for="symbolTriE">Empty Rectangle</label>
+                          <label for="symbolTriE">Empty Triangle</label>
                         </div>
                         <div class="col-sm-12">
                           <input type="radio" name="symbol" id="symbolDiamond" value="diamond" @change="updateSymbol('diamond')" />
@@ -328,16 +328,16 @@
                           <label for="symbolDiamondE">Empty Diamond</label>
                         </div>
                         <div class="col-sm-12">
-                          <input type="radio" name="symbol" id="symbolCircle" value="pin" @change="updateSymbol('pin')" />
+                          <input type="radio" name="symbol" id="symbolPin" value="pin" @change="updateSymbol('pin')" />
                           <label for="symbolPin">Pin</label>
                         </div>
                         <div class="col-sm-12">
-                          <input type="radio" name="symbol" id="symbolCircleE" value="pin" @change="updateSymbol('emptyPin')" />
+                          <input type="radio" name="symbol" id="symbolPinE" value="pin" @change="updateSymbol('emptyPin')" />
                           <label for="symbolPinE">Empty Pin</label>
                         </div>
                         <div class="col-sm-12">
                           <input type="radio" name="symbol" id="symbolArrow" value="arrow" @change="updateSymbol('arrow')" />
-                          <label for="symbolArrowE">Arrow</label>
+                          <label for="symbolArrow">Arrow</label>
                         </div>
                         <div class="col-sm-12">
                           <input type="radio" name="symbol" id="symbolArrowE" value="arrow" @change="updateSymbol('emptyArrow')" />
@@ -518,14 +518,15 @@
 
 </div>
 
-<script src="//cdn.jsdelivr.net/npm/echarts@4/dist/echarts.min.js"></script>
+<script src="//cdn.jsdelivr.net/npm/echarts@4/dist/echarts-en.min.js"></script>
 <script src="//cdn.jsdelivr.net/npm/lodash@4.17.19/lodash.min.js"></script>
 <script src="//cdn.jsdelivr.net/npm/bootstrap-colorpicker@2.5.3/dist/js/bootstrap-colorpicker.min.js"></script>
 <script src="//cdn.jsdelivr.net/npm/vue@1.0.28/dist/vue.min.js"></script>
 <script src="//cdn.jsdelivr.net/npm/highlightjs@9.16.2/highlight.pack.min.js"></script>
 <script src="//cdn.jsdelivr.net/npm/file-saver@2.0.2/dist/FileSaver.min.js"></script>
 
-<script src="./theme-builder/app.min.js"></script></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1597861067124"></script><script type="text/javascript">document.getElementById('nav-resources').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<script src="./theme-builder/app.min.js"></script>
+</div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1598523334942"></script><script type="text/javascript">document.getElementById('nav-resources').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
 
diff --git a/en/theme-builder/app.min.js b/en/theme-builder/app.min.js
index 82c64f9..7791411 100644
--- a/en/theme-builder/app.min.js
+++ b/en/theme-builder/app.min.js
@@ -1 +1 @@
-var VueColor=Vue.extend({template:'<div class="input-group colorpicker-component"><input type="text" class="form-control" debounce="2000" /><span class="input-group-addon"><i></i></span></div>',compiled:function(){var a=this,t=$(this.$el);t.find("input").val(this.color),t.colorpicker().on("changeColor",function(){var e=t.find("input").val();echarts.color.parse(e)&&a.$set("color",e)}),a.$watch("color",function(e){t.colorpicker("setValue",e)})},props:{color:{twoWay:!0}}});Vue.component("color",VueColor);var VueColorList=Vue.extend({template:'<div><div v-for="color in colors" track-by="$index"><color :color.sync="color"></color></div><div class="theme-color-control"><a v-on:click="addColor()">Add</a><a v-on:click="removeColor()" v-show="colors.length > 1">Remove</a></div></div>',props:{colors:{twoWay:!0}},methods:{addColor:function(){this.colors.push("#333333")},removeColor:function(){this.colors.pop()}}});Vue.component("color-list",VueColorList);var VueNumberConfig=Vue.extend({template:'<div class="form-group">  <div class="col-sm-6">    <input type="checkbox" v-model="enabled" v-if="canDisable" />    <label class="control-label">{{title}}</label>  </div>  <div class="col-sm-6">    <div class="input-group" v-show="enabled">      <input type="number" v-model="value" class="form-control" />    </div>  </div></div>',props:{title:String,canDisable:{type:Boolean,default:!1},value:{twoWay:!0},enabled:{twoWay:!0,default:!0}}});Vue.component("config-number",VueNumberConfig);var VueColorConfig=Vue.extend({template:'<div class="form-group">  <div class="col-sm-6">    <input type="checkbox" v-model="enabled" v-if="canDisable" />    <label class="control-label">{{title}}</label>  </div>  <div class="col-sm-6">    <color :color.sync="color" v-show="enabled"></color>  </div></div>',props:{title:String,canDisable:{type:Boolean,default:!1},color:{twoWay:!0},enabled:{twoWay:!0,default:!0}}});Vue.component("config-color",VueColorConfig);var VueColorListConfig=Vue.extend({template:'<div class="form-group">  <div class="col-sm-6">    <input type="checkbox" v-model="enabled" v-if="canDisable" />    <label class="control-label">{{title}}</label>  </div>  <div class="col-sm-6">    <color-list :colors.sync="colors" v-show="enabled"></color-list>  </div></div>',props:{title:String,canDisable:{type:Boolean,default:!1},colors:{twoWay:!0},enabled:{twoWay:!0,default:!0}}});function getOptions(e){function r(e){var a,t=[];a="scatter"===e?32:i;for(var r=0;r<d;++r){for(var l,o=[],n=0;n<a;++n){l="scatter"===e?[Math.floor((600*Math.random()+400)*(d-r)/d),Math.floor((600*Math.random()+400)*(d-r)/d)]:Math.floor((600*Math.random()+400)*(d-r)/d),o.push(l)}"radar"===e&&(o=[o]),t.push({type:e,data:o,name:"Group "+(r+1),markPoint:"line"===e||"bar"===e||"scatter"===e?{data:[{name:"Maximum",type:"max"}]}:{}})}return t}function a(e){for(var a=r(e),t=0;t<a.length;++t)a[t].areaStyle={normal:{}},a[t].stack="total";return a}var d=e?e.theme.seriesCnt:4,t=["Mon","Tus","Wed","Thu","Fri","Sat","Sun"],i=t.length,l={data:function(){for(var e=[],a=0;a<d;++a)e.push("Group "+(a+1));return e}(),right:0},o={feature:{restore:{show:!0},saveAsImage:{show:!0},dataView:{show:!0},dataZoom:{show:!0}}},n={trigger:"axis"},s={left:60,right:20,top:40,bottom:50},m={};function u(e){for(var a=["Beijing","Tianjin","Hebei","Shanxi","Inner Mongolia","Jilin","Heilongjiang","Shanghai","Jiangsu"],t=2002;t<=2007;t++){for(var r,l=0,o=0,n=0,i=(r=e[t]).length;n<i;n++)l=Math.max(l,r[n]),o+=r[n],e[t][n]={name:a[n],value:r[n]};e[t+"max"]=100*Math.floor(l/100),e[t+"sum"]=o}return e}m.dataPI=u({2007:[101.26,110.19,1804.72,311.97,762.1,1133.42,783.8,915.38,101.84,1816.31],2006:[88.8,103.35,1461.81,276.77,634.94,939.43,672.76,750.14,93.81,1545.05,925.1],2005:[88.68,112.38,1400,262.42,589.56,882.41,625.61,684.6,90.26,1461.51,892.83],2004:[87.36,105.28,1370.43,276.3,522.8,798.43,568.69,605.79,83.45,1367.58,814.1],2003:[84.11,89.91,1064.05,215.19,420.1,615.8,488.23,504.8,81.02,1162.45,717.85],2002:[82.44,84.21,956.84,197.8,374.69,590.2,446.17,474.2,79.68,1110.44]}),m.dataSI=u({2007:[2509.4,2892.53,7201.88,3454.49,3193.67,5544.14,2475.45,3695.58,5571.06,14471.26],2006:[2191.43,2457.08,6110.43,2755.66,2374.96,4566.83,1915.29,3365.31,4969.95,12282.89],2005:[2026.51,2135.07,5271.57,2357.04,1773.21,3869.4,1580.83,2971.68,4381.2,10524.96],2004:[1853.58,1685.93,4301.73,1919.4,1248.27,3061.62,1329.68,2487.04,3892.12,8437.99],2003:[1487.15,1337.31,3417.56,1463.38,967.49,2898.89,1098.37,2084.7,3209.02,6787.11],2002:[1249.99,1069.08,2911.69,1134.31,754.78,2609.85,943.49,1843.6,2622.45,5604.49]}),m.dataTI=u({2007:[7236.15,2250.04,4600.72,2257.99,2467.41,4486.74,2025.44,2493.04,6821.11,9730.91],2006:[5837.55,1902.31,3895.36,1846.18,1934.35,3798.26,1687.07,2096.35,5508.48,7914.11],2005:[4854.33,1658.19,3340.54,1611.07,1542.26,3295.45,1413.83,1857.42,4776.2,6612.22],2004:[4092.27,1319.76,2805.47,1375.67,1270,2811.95,1223.64,1657.77,4097.26,5198.03],2003:[3435.95,1150.81,2439.68,1176.65,1000.79,2487.85,1075.48,1467.9,3404.19,4493.31],2002:[2982.57,997.47,2149.75,992.69,811.47,2258.17,958.88,1319.4,3038.9,3891.92]});for(var c,g=[{title:{text:"Line Chart",subtext:"(Subtitle here)"},series:r("line"),xAxis:{type:"category",data:t},yAxis:{type:"value"},grid:{left:60,right:20,top:60,bottom:50}},{title:{text:"Stacked Line Chart",subtext:"(Subtitle here)"},series:a("line"),xAxis:{type:"category",data:t,boundaryGap:!1},yAxis:{type:"value"},grid:{left:60,right:20,top:60,bottom:50}},{title:{text:"Bar Chart"},series:r("bar"),xAxis:{type:"category",data:t},yAxis:{type:"value"}},{title:{text:"Stacked Bar Chart"},series:a("bar"),xAxis:{type:"category",data:t},yAxis:{type:"value"}},{title:{text:"Scatter Chart"},series:r("scatter"),toolbox:((c=o).left=65,c),tooltip:{trigger:"item"},xAxis:{type:"value"},yAxis:{type:"value"}},{title:{text:"Pie Chart"},series:function(e){for(var a=[],t=0;t<d;++t)a.push({name:l.data[t],value:Math.floor((800*Math.random()+200)*(d-t)/d)});return{type:e,data:a}}("pie"),tooltip:{trigger:"item"}},{title:{text:"Radar Chart"},series:r("radar"),radar:{indicator:function(){for(var e=[],a=0;a<t.length;++a)e.push({name:t[a],max:1e3});return e}(),center:["50%","60%"]}},{baseOption:{timeline:{axisType:"category",autoPlay:!1,data:["2002-01-01","2003-01-01","2004-01-01",{value:"2005-01-01",tooltip:{formatter:"{b} GDP reached a height."}},"2006-01-01","2007-01-01","2008-01-01","2009-01-01","2010-01-01",{value:"2011-01-01",tooltip:{formatter:function(e){return e.name+"GDP reached another height."}}}],label:{formatter:function(e){return new Date(e).getFullYear()}}},tooltip:{},legend:{x:"right",data:["Primary Industry","Secondary Industry","Tertiary Industry"]},calculable:!0,grid:{top:60,bottom:75},xAxis:[{type:"category",axisLabel:{interval:0},data:["Beijing","Tianjin","Hebei","Shanxi","Inner Mongolia","Jilin","Heilongjiang","Shanghai","Jiangsu"],splitLine:{show:!1}}],yAxis:[{type:"value",name:"GDP (hundred million Yuan)"}],series:[{name:"Primary Industry",type:"bar"},{name:"Secondary Industry",type:"bar"},{name:"Tertiary Industry",type:"bar"},{name:"GDP Ratio",type:"pie",center:["30%","35%"],radius:"28%"}]},options:[{title:{text:"Timeline"},series:[{data:m.dataPI[2002]},{data:m.dataSI[2002]},{data:m.dataTI[2002]},{data:[{name:"Primary Industry",value:m.dataPI["2002sum"]},{name:"Secondary Industry",value:m.dataSI["2002sum"]},{name:"Tertiary Industry",value:m.dataTI["2002sum"]}]}]},{title:{text:"Timeline"},series:[{data:m.dataPI[2003]},{data:m.dataSI[2003]},{data:m.dataTI[2003]},{data:[{name:"Primary Industry",value:m.dataPI["2003sum"]},{name:"Secondary Industry",value:m.dataSI["2003sum"]},{name:"Tertiary Industry",value:m.dataTI["2003sum"]}]}]},{title:{text:"Timeline"},series:[{data:m.dataPI[2004]},{data:m.dataSI[2004]},{data:m.dataTI[2004]},{data:[{name:"Primary Industry",value:m.dataPI["2004sum"]},{name:"Secondary Industry",value:m.dataSI["2004sum"]},{name:"Tertiary Industry",value:m.dataTI["2004sum"]}]}]},{title:{text:"Timeline"},series:[{data:m.dataPI[2005]},{data:m.dataSI[2005]},{data:m.dataTI[2005]},{data:[{name:"Primary Industry",value:m.dataPI["2005sum"]},{name:"Secondary Industry",value:m.dataSI["2005sum"]},{name:"Tertiary Industry",value:m.dataTI["2005sum"]}]}]},{title:{text:"Timeline"},series:[{data:m.dataPI[2006]},{data:m.dataSI[2006]},{data:m.dataTI[2006]},{data:[{name:"Primary Industry",value:m.dataPI["2006sum"]},{name:"Secondary Industry",value:m.dataSI["2006sum"]},{name:"Tertiary Industry",value:m.dataTI["2006sum"]}]}]},{title:{text:"Timeline"},series:[{data:m.dataPI[2007]},{data:m.dataSI[2007]},{data:m.dataTI[2007]},{data:[{name:"Primary Industry",value:m.dataPI["2007sum"]},{name:"Secondary Industry",value:m.dataSI["2007sum"]},{name:"Tertiary Industry",value:m.dataTI["2007sum"]}]}]}]},{title:{text:"Candlestick Chart & Zoom"},grid:{left:60,right:20,top:40,bottom:70},toolbox:{show:!0,feature:{mark:{show:!0},dataZoom:{show:!0},magicType:{show:!0,type:["line","bar"]},dataView:{show:!0,readOnly:!1},restore:{show:!0}}},dataZoom:{show:!0,realtime:!0,start:50,end:100},xAxis:[{type:"category",boundaryGap:!0,axisTick:{onGap:!1},data:["2013/1/24","2013/1/25","2013/1/28","2013/1/29","2013/1/30","2013/1/31","2013/2/1","2013/2/4","2013/2/5","2013/2/6","2013/2/7","2013/2/8","2013/2/18","2013/2/19","2013/2/20","2013/2/21","2013/2/22","2013/2/25","2013/2/26","2013/2/27","2013/2/28","2013/3/1","2013/3/4","2013/3/5","2013/3/6","2013/3/7","2013/3/8","2013/3/11","2013/3/12","2013/3/13","2013/3/14","2013/3/15","2013/3/18","2013/3/19","2013/3/20","2013/3/21","2013/3/22","2013/3/25","2013/3/26","2013/3/27","2013/3/28","2013/3/29","2013/4/1","2013/4/2","2013/4/3","2013/4/8","2013/4/9","2013/4/10","2013/4/11","2013/4/12","2013/4/15","2013/4/16","2013/4/17","2013/4/18","2013/4/19","2013/4/22","2013/4/23","2013/4/24","2013/4/25","2013/4/26","2013/5/2","2013/5/3","2013/5/6","2013/5/7","2013/5/8","2013/5/9","2013/5/10","2013/5/13","2013/5/14","2013/5/15","2013/5/16","2013/5/17","2013/5/20","2013/5/21","2013/5/22","2013/5/23","2013/5/24","2013/5/27","2013/5/28","2013/5/29","2013/5/30","2013/5/31","2013/6/3","2013/6/4","2013/6/5","2013/6/6","2013/6/7","2013/6/13"]}],yAxis:[{type:"value",scale:!0,precision:2,splitNumber:7,boundaryGap:[.05,.05]}],series:[{name:"The Shanghai Compisite Index",type:"candlestick",data:[[2320.26,2302.6,2287.3,2362.94],[2300,2291.3,2288.26,2308.38],[2295.35,2346.5,2295.35,2346.92],[2347.22,2358.98,2337.35,2363.8],[2360.75,2382.48,2347.89,2383.76],[2383.43,2385.42,2371.23,2391.82],[2377.41,2419.02,2369.57,2421.15],[2425.92,2428.15,2417.58,2440.38],[2411,2433.13,2403.3,2437.42],[2432.68,2434.48,2427.7,2441.73],[2430.69,2418.53,2394.22,2433.89],[2416.62,2432.4,2414.4,2443.03],[2441.91,2421.56,2415.43,2444.8],[2420.26,2382.91,2373.53,2427.07],[2383.49,2397.18,2370.61,2397.94],[2378.82,2325.95,2309.17,2378.82],[2322.94,2314.16,2308.76,2330.88],[2320.62,2325.82,2315.01,2338.78],[2313.74,2293.34,2289.89,2340.71],[2297.77,2313.22,2292.03,2324.63],[2322.32,2365.59,2308.92,2366.16],[2364.54,2359.51,2330.86,2369.65],[2332.08,2273.4,2259.25,2333.54],[2274.81,2326.31,2270.1,2328.14],[2333.61,2347.18,2321.6,2351.44],[2340.44,2324.29,2304.27,2352.02],[2326.42,2318.61,2314.59,2333.67],[2314.68,2310.59,2296.58,2320.96],[2309.16,2286.6,2264.83,2333.29],[2282.17,2263.97,2253.25,2286.33],[2255.77,2270.28,2253.31,2276.22],[2269.31,2278.4,2250,2312.08],[2267.29,2240.02,2239.21,2276.05],[2244.26,2257.43,2232.02,2261.31],[2257.74,2317.37,2257.42,2317.86],[2318.21,2324.24,2311.6,2330.81],[2321.4,2328.28,2314.97,2332],[2334.74,2326.72,2319.91,2344.89],[2318.58,2297.67,2281.12,2319.99],[2299.38,2301.26,2289,2323.48],[2273.55,2236.3,2232.91,2273.55],[2238.49,2236.62,2228.81,2246.87],[2229.46,2234.4,2227.31,2243.95],[2234.9,2227.74,2220.44,2253.42],[2232.69,2225.29,2217.25,2241.34],[2196.24,2211.59,2180.67,2212.59],[2215.47,2225.77,2215.47,2234.73],[2224.93,2226.13,2212.56,2233.04],[2236.98,2219.55,2217.26,2242.48],[2218.09,2206.78,2204.44,2226.26],[2199.91,2181.94,2177.39,2204.99],[2169.63,2194.85,2165.78,2196.43],[2195.03,2193.8,2178.47,2197.51],[2181.82,2197.6,2175.44,2206.03],[2201.12,2244.64,2200.58,2250.11],[2236.4,2242.17,2232.26,2245.12],[2242.62,2184.54,2182.81,2242.62],[2187.35,2218.32,2184.11,2226.12],[2213.19,2199.31,2191.85,2224.63],[2203.89,2177.91,2173.86,2210.58],[2170.78,2174.12,2161.14,2179.65],[2179.05,2205.5,2179.05,2222.81],[2212.5,2231.17,2212.5,2236.07],[2227.86,2235.57,2219.44,2240.26],[2242.39,2246.3,2235.42,2255.21],[2246.96,2232.97,2221.38,2247.86],[2228.82,2246.83,2225.81,2247.67],[2247.68,2241.92,2231.36,2250.85],[2238.9,2217.01,2205.87,2239.93],[2217.09,2224.8,2213.58,2225.19],[2221.34,2251.81,2210.77,2252.87],[2249.81,2282.87,2248.41,2288.09],[2286.33,2299.99,2281.9,2309.39],[2297.11,2305.11,2290.12,2305.3],[2303.75,2302.4,2292.43,2314.18],[2293.81,2275.67,2274.1,2304.95],[2281.45,2288.53,2270.25,2292.59],[2286.66,2293.08,2283.94,2301.7],[2293.4,2321.32,2281.47,2322.1],[2323.54,2324.02,2321.17,2334.33],[2316.25,2317.75,2310.49,2325.72],[2320.74,2300.59,2299.37,2325.53],[2300.21,2299.25,2294.11,2313.43],[2297.1,2272.42,2264.76,2297.1],[2270.71,2270.93,2260.87,2276.86],[2264.43,2242.11,2240.07,2266.69],[2242.26,2210.9,2205.07,2250.63],[2190.1,2148.35,2126.22,2190.1]]}]},{title:{text:"Graph"},series:[{name:"Les Miserables",type:"graph",layout:"none",data:[{id:"0",name:"Myriel",label:{normal:{formatter:"Myriel",show:!1}},symbolSize:8.685715,x:-266.82776,y:299.6904,attributes:{modularity_class:0},value:28.685715,category:0},{id:"1",name:"Napoleon",label:{normal:{formatter:"Napoleon",show:!1}},symbolSize:4,x:-418.08344,y:446.8853,attributes:{modularity_class:0},value:4,category:0},{id:"2",name:"MlleBaptistine",label:{normal:{formatter:"MlleBaptistine",show:!1}},symbolSize:9.485714,x:-212.76357,y:245.29176,attributes:{modularity_class:1},value:9.485714,category:1},{id:"3",name:"MmeMagloire",label:{normal:{formatter:"MmeMagloire",show:!1}},symbolSize:9.485714,x:-242.82404,y:235.26283,attributes:{modularity_class:1},value:9.485714,category:1},{id:"4",name:"CountessDeLo",label:{normal:{formatter:"CountessDeLo",show:!1}},symbolSize:4,x:-379.30386,y:429.06424,attributes:{modularity_class:0},value:4,category:0},{id:"5",name:"Geborand",label:{normal:{formatter:"Geborand",show:!1}},symbolSize:4,x:-417.26337,y:406.03506,attributes:{modularity_class:0},value:4,category:0},{id:"6",name:"Champtercier",label:{normal:{formatter:"Champtercier",show:!1}},symbolSize:4,x:-332.6012,y:485.16974,attributes:{modularity_class:0},value:4,category:0},{id:"7",name:"Cravatte",label:{normal:{formatter:"Cravatte",show:!1}},symbolSize:4,x:-382.69568,y:475.09113,attributes:{modularity_class:0},value:4,category:0},{id:"8",name:"Count",label:{normal:{formatter:"Count",show:!1}},symbolSize:4,x:-320.384,y:387.17325,attributes:{modularity_class:0},value:4,category:0},{id:"9",name:"OldMan",label:{normal:{formatter:"OldMan",show:!1}},symbolSize:4,x:-344.39832,y:451.16772,attributes:{modularity_class:0},value:4,category:0},{id:"10",name:"Labarre",label:{normal:{formatter:"Labarre",show:!1}},symbolSize:4,x:-89.34107,y:234.56128,attributes:{modularity_class:1},value:4,category:1},{id:"11",name:"Valjean",label:{normal:{formatter:"Valjean",show:!1}},symbolSize:40,x:-87.93029,y:-6.8120565,attributes:{modularity_class:1},value:100,category:1},{id:"12",name:"Marguerite",label:{normal:{formatter:"Marguerite",show:!1}},symbolSize:6.742859,x:-339.77908,y:-184.69139,attributes:{modularity_class:1},value:6.742859,category:1},{id:"13",name:"MmeDeR",label:{normal:{formatter:"MmeDeR",show:!1}},symbolSize:4,x:-194.31313,y:178.55301,attributes:{modularity_class:1},value:4,category:1},{id:"14",name:"Isabeau",label:{normal:{formatter:"Isabeau",show:!1}},symbolSize:4,x:-158.05168,y:201.99768,attributes:{modularity_class:1},value:4,category:1},{id:"15",name:"Gervais",label:{normal:{formatter:"Gervais",show:!1}},symbolSize:4,x:-127.701546,y:242.55057,attributes:{modularity_class:1},value:4,category:1},{id:"16",name:"Tholomyes",label:{normal:{formatter:"Tholomyes",show:!1}},symbolSize:15.942856,x:-385.2226,y:-393.5572,attributes:{modularity_class:2},value:25.942856,category:2},{id:"17",name:"Listolier",label:{normal:{formatter:"Listolier",show:!1}},symbolSize:17.457146,x:-516.55884,y:-393.98975,attributes:{modularity_class:2},value:20.457146,category:2},{id:"18",name:"Fameuil",label:{normal:{formatter:"Fameuil",show:!1}},symbolSize:17.457146,x:-464.79382,y:-493.57944,attributes:{modularity_class:2},value:20.457146,category:2},{id:"19",name:"Blacheville",label:{normal:{formatter:"Blacheville",show:!1}},symbolSize:17.457146,x:-515.1624,y:-456.9891,attributes:{modularity_class:2},value:20.457146,category:2},{id:"20",name:"Favourite",label:{normal:{formatter:"Favourite",show:!1}},symbolSize:17.457146,x:-408.12122,y:-464.5048,attributes:{modularity_class:2},value:20.457146,category:2},{id:"21",name:"Dahlia",label:{normal:{formatter:"Dahlia",show:!1}},symbolSize:17.457146,x:-456.44113,y:-425.13303,attributes:{modularity_class:2},value:20.457146,category:2},{id:"22",name:"Zephine",label:{normal:{formatter:"Zephine",show:!1}},symbolSize:17.457146,x:-459.1107,y:-362.5133,attributes:{modularity_class:2},value:20.457146,category:2},{id:"23",name:"Fantine",label:{normal:{formatter:"Fantine",show:!1}},symbolSize:22.4,x:-313.42786,y:-289.44803,attributes:{modularity_class:2},value:42.4,category:2},{id:"24",name:"MmeThenardier",label:{normal:{formatter:"MmeThenardier",show:!1}},symbolSize:14.428574,x:4.6313396,y:-273.8517,attributes:{modularity_class:7},value:31.428574,category:7},{id:"25",name:"Thenardier",label:{normal:{formatter:"Thenardier",show:!1}},symbolSize:25.142853,x:82.80825,y:-203.1144,attributes:{modularity_class:7},value:45.142853,category:7},{id:"26",name:"Cosette",label:{normal:{formatter:"Cosette",show:!1}},symbolSize:21.428574,x:78.64646,y:-31.512747,attributes:{modularity_class:6},value:31.428574,category:6},{id:"27",name:"Javert",label:{normal:{formatter:"Javert",show:!1}},symbolSize:27.88571,x:-81.46074,y:-204.20204,attributes:{modularity_class:7},value:47.88571,category:7},{id:"28",name:"Fauchelevent",label:{normal:{formatter:"Fauchelevent",show:!1}},symbolSize:12.228573,x:-225.73984,y:82.41631,attributes:{modularity_class:4},value:12.228573,category:4},{id:"29",name:"Bamatabois",label:{normal:{formatter:"Bamatabois",show:!1}},symbolSize:23.2,x:-385.6842,y:-20.206686,attributes:{modularity_class:3},value:23.2,category:3},{id:"30",name:"Perpetue",label:{normal:{formatter:"Perpetue",show:!1}},symbolSize:6.742859,x:-403.92447,y:-197.69823,attributes:{modularity_class:2},value:6.742859,category:2},{id:"31",name:"Simplice",label:{normal:{formatter:"Simplice",show:!1}},symbolSize:12.228573,x:-281.4253,y:-158.45137,attributes:{modularity_class:2},value:12.228573,category:2},{id:"32",name:"Scaufflaire",label:{normal:{formatter:"Scaufflaire",show:!1}},symbolSize:4,x:-122.41348,y:210.37503,attributes:{modularity_class:1},value:4,category:1},{id:"33",name:"Woman1",label:{normal:{formatter:"Woman1",show:!1}},symbolSize:6.742859,x:-234.6001,y:-113.15067,attributes:{modularity_class:1},value:6.742859,category:1},{id:"34",name:"Judge",label:{normal:{formatter:"Judge",show:!1}},symbolSize:17.714287,x:-387.84915,y:58.7059,attributes:{modularity_class:3},value:17.714287,category:3},{id:"35",name:"Champmathieu",label:{normal:{formatter:"Champmathieu",show:!1}},symbolSize:17.714287,x:-338.2307,y:87.48405,attributes:{modularity_class:3},value:17.714287,category:3},{id:"36",name:"Brevet",label:{normal:{formatter:"Brevet",show:!1}},symbolSize:17.714287,x:-453.26874,y:58.94648,attributes:{modularity_class:3},value:17.714287,category:3},{id:"37",name:"Chenildieu",label:{normal:{formatter:"Chenildieu",show:!1}},symbolSize:17.714287,x:-386.44904,y:140.05937,attributes:{modularity_class:3},value:17.714287,category:3},{id:"38",name:"Cochepaille",label:{normal:{formatter:"Cochepaille",show:!1}},symbolSize:17.714287,x:-446.7876,y:123.38005,attributes:{modularity_class:3},value:17.714287,category:3},{id:"39",name:"Pontmercy",label:{normal:{formatter:"Pontmercy",show:!1}},symbolSize:9.485714,x:336.49738,y:-269.55914,attributes:{modularity_class:6},value:9.485714,category:6},{id:"40",name:"Boulatruelle",label:{normal:{formatter:"Boulatruelle",show:!1}},symbolSize:4,x:29.187843,y:-460.13132,attributes:{modularity_class:7},value:4,category:7},{id:"41",name:"Eponine",label:{normal:{formatter:"Eponine",show:!1}},symbolSize:31.428574,x:238.36697,y:-210.00926,attributes:{modularity_class:7},value:31.428574,category:7},{id:"42",name:"Anzelma",label:{normal:{formatter:"Anzelma",show:!1}},symbolSize:9.485714,x:189.69513,y:-346.50662,attributes:{modularity_class:7},value:9.485714,category:7},{id:"43",name:"Woman2",label:{normal:{formatter:"Woman2",show:!1}},symbolSize:9.485714,x:-187.00418,y:-145.02663,attributes:{modularity_class:6},value:9.485714,category:6},{id:"44",name:"MotherInnocent",label:{normal:{formatter:"MotherInnocent",show:!1}},symbolSize:6.742859,x:-252.99521,y:129.87549,attributes:{modularity_class:4},value:6.742859,category:4},{id:"45",name:"Gribier",label:{normal:{formatter:"Gribier",show:!1}},symbolSize:4,x:-296.07935,y:163.11964,attributes:{modularity_class:4},value:4,category:4},{id:"46",name:"Jondrette",label:{normal:{formatter:"Jondrette",show:!1}},symbolSize:4,x:550.3201,y:522.4031,attributes:{modularity_class:5},value:4,category:5},{id:"47",name:"MmeBurgon",label:{normal:{formatter:"MmeBurgon",show:!1}},symbolSize:6.742859,x:488.13535,y:356.8573,attributes:{modularity_class:5},value:6.742859,category:5},{id:"48",name:"Gavroche",label:{normal:{formatter:"Gavroche",show:!1}},symbolSize:31.600006,x:387.89572,y:110.462326,attributes:{modularity_class:8},value:61.600006,category:8},{id:"49",name:"Gillenormand",label:{normal:{formatter:"Gillenormand",show:!1}},symbolSize:20.457146,x:126.4831,y:68.10622,attributes:{modularity_class:6},value:20.457146,category:6},{id:"50",name:"Magnon",label:{normal:{formatter:"Magnon",show:!1}},symbolSize:6.742859,x:127.07365,y:-113.05923,attributes:{modularity_class:6},value:6.742859,category:6},{id:"51",name:"MlleGillenormand",label:{normal:{formatter:"MlleGillenormand",show:!1}},symbolSize:20.457146,x:162.63559,y:117.6565,attributes:{modularity_class:6},value:20.457146,category:6},{id:"52",name:"MmePontmercy",label:{normal:{formatter:"MmePontmercy",show:!1}},symbolSize:6.742859,x:353.66415,y:-205.89165,attributes:{modularity_class:6},value:6.742859,category:6},{id:"53",name:"MlleVaubois",label:{normal:{formatter:"MlleVaubois",show:!1}},symbolSize:4,x:165.43939,y:339.7736,attributes:{modularity_class:6},value:4,category:6},{id:"54",name:"LtGillenormand",label:{normal:{formatter:"LtGillenormand",show:!1}},symbolSize:12.228573,x:137.69348,y:196.1069,attributes:{modularity_class:6},value:12.228573,category:6},{id:"55",name:"Marius",label:{normal:{formatter:"Marius",show:!1}},symbolSize:33.37143,x:206.44687,y:-13.805411,attributes:{modularity_class:6},value:53.37143,category:6},{id:"56",name:"BaronessT",label:{normal:{formatter:"BaronessT",show:!1}},symbolSize:6.742859,x:194.82993,y:224.78036,attributes:{modularity_class:6},value:6.742859,category:6},{id:"57",name:"Mabeuf",label:{normal:{formatter:"Mabeuf",show:!1}},symbolSize:31.428574,x:597.6618,y:135.18481,attributes:{modularity_class:8},value:21.428574,category:8},{id:"58",name:"Enjolras",label:{normal:{formatter:"Enjolras",show:!1}},symbolSize:42.4,x:355.78366,y:-74.882454,attributes:{modularity_class:8},value:22.4,category:8},{id:"59",name:"Combeferre",label:{normal:{formatter:"Combeferre",show:!1}},symbolSize:21.428574,x:515.2961,y:-46.167564,attributes:{modularity_class:8},value:31.428574,category:8},{id:"60",name:"Prouvaire",label:{normal:{formatter:"Prouvaire",show:!1}},symbolSize:15.942856,x:614.29285,y:-69.3104,attributes:{modularity_class:8},value:25.942856,category:8},{id:"61",name:"Feuilly",label:{normal:{formatter:"Feuilly",show:!1}},symbolSize:21.428574,x:550.1917,y:-128.17537,attributes:{modularity_class:8},value:31.428574,category:8},{id:"62",name:"Courfeyrac",label:{normal:{formatter:"Courfeyrac",show:!1}},symbolSize:26.91429,x:436.17184,y:-12.7286825,attributes:{modularity_class:8},value:36.91429,category:8},{id:"63",name:"Bahorel",label:{normal:{formatter:"Bahorel",show:!1}},symbolSize:24.17143,x:602.55225,y:16.421427,attributes:{modularity_class:8},value:34.17143,category:8},{id:"64",name:"Bossuet",label:{normal:{formatter:"Bossuet",show:!1}},symbolSize:26.91429,x:455.81955,y:-115.45826,attributes:{modularity_class:8},value:36.91429,category:8},{id:"65",name:"Joly",label:{normal:{formatter:"Joly",show:!1}},symbolSize:24.17143,x:516.40784,y:47.242233,attributes:{modularity_class:8},value:34.17143,category:8},{id:"66",name:"Grantaire",label:{normal:{formatter:"Grantaire",show:!1}},symbolSize:28.685715,x:646.4313,y:-151.06331,attributes:{modularity_class:8},value:28.685715,category:8},{id:"67",name:"MotherPlutarch",label:{normal:{formatter:"MotherPlutarch",show:!1}},symbolSize:4,x:668.9568,y:204.65488,attributes:{modularity_class:8},value:4,category:8},{id:"68",name:"Gueulemer",label:{normal:{formatter:"Gueulemer",show:!1}},symbolSize:28.685715,x:78.4799,y:-347.15146,attributes:{modularity_class:7},value:28.685715,category:7},{id:"69",name:"Babet",label:{normal:{formatter:"Babet",show:!1}},symbolSize:28.685715,x:150.35959,y:-298.50797,attributes:{modularity_class:7},value:28.685715,category:7},{id:"70",name:"Claquesous",label:{normal:{formatter:"Claquesous",show:!1}},symbolSize:28.685715,x:137.3717,y:-410.2809,attributes:{modularity_class:7},value:28.685715,category:7},{id:"71",name:"Montparnasse",label:{normal:{formatter:"Montparnasse",show:!1}},symbolSize:25.942856,x:234.87747,y:-400.85983,attributes:{modularity_class:7},value:25.942856,category:7},{id:"72",name:"Toussaint",label:{normal:{formatter:"Toussaint",show:!1}},symbolSize:9.485714,x:40.942253,y:113.78272,attributes:{modularity_class:1},value:9.485714,category:1},{id:"73",name:"Child1",label:{normal:{formatter:"Child1",show:!1}},symbolSize:6.742859,x:437.939,y:291.58234,attributes:{modularity_class:8},value:6.742859,category:8},{id:"74",name:"Child2",label:{normal:{formatter:"Child2",show:!1}},symbolSize:6.742859,x:466.04922,y:283.3606,attributes:{modularity_class:8},value:6.742859,category:8},{id:"75",name:"Brujon",label:{normal:{formatter:"Brujon",show:!1}},symbolSize:20.457146,x:238.79364,y:-314.06345,attributes:{modularity_class:7},value:20.457146,category:7},{id:"76",name:"MmeHucheloup",label:{normal:{formatter:"MmeHucheloup",show:!1}},symbolSize:20.457146,x:712.18353,y:4.8131495,attributes:{modularity_class:8},value:20.457146,category:8}],links:[{id:"0",name:null,source:"1",target:"0"},{id:"1",name:null,source:"2",target:"0"},{id:"2",name:null,source:"3",target:"0"},{id:"3",name:null,source:"3",target:"2"},{id:"4",name:null,source:"4",target:"0"},{id:"5",name:null,source:"5",target:"0"},{id:"6",name:null,source:"6",target:"0"},{id:"7",name:null,source:"7",target:"0"},{id:"8",name:null,source:"8",target:"0"},{id:"9",name:null,source:"9",target:"0"},{id:"13",name:null,source:"11",target:"0"},{id:null,name:null,source:"11",target:"2"},{id:"11",name:null,source:"11",target:"3"},{id:"10",name:null,source:"11",target:"10"},{id:"14",name:null,source:"12",target:"11"},{id:"15",name:null,source:"13",target:"11"},{id:"16",name:null,source:"14",target:"11"},{id:"17",name:null,source:"15",target:"11"},{id:"18",name:null,source:"17",target:"16"},{id:"19",name:null,source:"18",target:"16"},{id:"20",name:null,source:"18",target:"17"},{id:"21",name:null,source:"19",target:"16"},{id:"22",name:null,source:"19",target:"17"},{id:"23",name:null,source:"19",target:"18"},{id:"24",name:null,source:"20",target:"16"},{id:"25",name:null,source:"20",target:"17"},{id:"26",name:null,source:"20",target:"18"},{id:"27",name:null,source:"20",target:"19"},{id:"28",name:null,source:"21",target:"16"},{id:"29",name:null,source:"21",target:"17"},{id:"30",name:null,source:"21",target:"18"},{id:"31",name:null,source:"21",target:"19"},{id:"32",name:null,source:"21",target:"20"},{id:"33",name:null,source:"22",target:"16"},{id:"34",name:null,source:"22",target:"17"},{id:"35",name:null,source:"22",target:"18"},{id:"36",name:null,source:"22",target:"19"},{id:"37",name:null,source:"22",target:"20"},{id:"38",name:null,source:"22",target:"21"},{id:"47",name:null,source:"23",target:"11"},{id:"46",name:null,source:"23",target:"12"},{id:"39",name:null,source:"23",target:"16"},{id:"40",name:null,source:"23",target:"17"},{id:"41",name:null,source:"23",target:"18"},{id:"42",name:null,source:"23",target:"19"},{id:"43",name:null,source:"23",target:"20"},{id:"44",name:null,source:"23",target:"21"},{id:"45",name:null,source:"23",target:"22"},{id:null,name:null,source:"24",target:"11"},{id:"48",name:null,source:"24",target:"23"},{id:"52",name:null,source:"25",target:"11"},{id:"51",name:null,source:"25",target:"23"},{id:"50",name:null,source:"25",target:"24"},{id:null,name:null,source:"26",target:"11"},{id:null,name:null,source:"26",target:"16"},{id:"53",name:null,source:"26",target:"24"},{id:"56",name:null,source:"26",target:"25"},{id:"57",name:null,source:"27",target:"11"},{id:"58",name:null,source:"27",target:"23"},{id:null,name:null,source:"27",target:"24"},{id:"59",name:null,source:"27",target:"25"},{id:"61",name:null,source:"27",target:"26"},{id:"62",name:null,source:"28",target:"11"},{id:"63",name:null,source:"28",target:"27"},{id:"66",name:null,source:"29",target:"11"},{id:"64",name:null,source:"29",target:"23"},{id:"65",name:null,source:"29",target:"27"},{id:"67",name:null,source:"30",target:"23"},{id:null,name:null,source:"31",target:"11"},{id:null,name:null,source:"31",target:"23"},{id:null,name:null,source:"31",target:"27"},{id:"68",name:null,source:"31",target:"30"},{id:"72",name:null,source:"32",target:"11"},{id:"73",name:null,source:"33",target:"11"},{id:"74",name:null,source:"33",target:"27"},{id:"75",name:null,source:"34",target:"11"},{id:"76",name:null,source:"34",target:"29"},{id:"77",name:null,source:"35",target:"11"},{id:null,name:null,source:"35",target:"29"},{id:"78",name:null,source:"35",target:"34"},{id:"82",name:null,source:"36",target:"11"},{id:"83",name:null,source:"36",target:"29"},{id:"80",name:null,source:"36",target:"34"},{id:"81",name:null,source:"36",target:"35"},{id:"87",name:null,source:"37",target:"11"},{id:"88",name:null,source:"37",target:"29"},{id:"84",name:null,source:"37",target:"34"},{id:"85",name:null,source:"37",target:"35"},{id:"86",name:null,source:"37",target:"36"},{id:"93",name:null,source:"38",target:"11"},{id:"94",name:null,source:"38",target:"29"},{id:"89",name:null,source:"38",target:"34"},{id:"90",name:null,source:"38",target:"35"},{id:"91",name:null,source:"38",target:"36"},{id:"92",name:null,source:"38",target:"37"},{id:"95",name:null,source:"39",target:"25"},{id:"96",name:null,source:"40",target:"25"},{id:"97",name:null,source:"41",target:"24"},{id:"98",name:null,source:"41",target:"25"},{id:"101",name:null,source:"42",target:"24"},{id:"100",name:null,source:"42",target:"25"},{id:"99",name:null,source:"42",target:"41"},{id:"102",name:null,source:"43",target:"11"},{id:"103",name:null,source:"43",target:"26"},{id:"104",name:null,source:"43",target:"27"},{id:null,name:null,source:"44",target:"11"},{id:"105",name:null,source:"44",target:"28"},{id:"107",name:null,source:"45",target:"28"},{id:"108",name:null,source:"47",target:"46"},{id:"112",name:null,source:"48",target:"11"},{id:"110",name:null,source:"48",target:"25"},{id:"111",name:null,source:"48",target:"27"},{id:"109",name:null,source:"48",target:"47"},{id:null,name:null,source:"49",target:"11"},{id:"113",name:null,source:"49",target:"26"},{id:null,name:null,source:"50",target:"24"},{id:"115",name:null,source:"50",target:"49"},{id:"119",name:null,source:"51",target:"11"},{id:"118",name:null,source:"51",target:"26"},{id:"117",name:null,source:"51",target:"49"},{id:null,name:null,source:"52",target:"39"},{id:"120",name:null,source:"52",target:"51"},{id:"122",name:null,source:"53",target:"51"},{id:"125",name:null,source:"54",target:"26"},{id:"124",name:null,source:"54",target:"49"},{id:"123",name:null,source:"54",target:"51"},{id:"131",name:null,source:"55",target:"11"},{id:"132",name:null,source:"55",target:"16"},{id:"133",name:null,source:"55",target:"25"},{id:null,name:null,source:"55",target:"26"},{id:"128",name:null,source:"55",target:"39"},{id:"134",name:null,source:"55",target:"41"},{id:"135",name:null,source:"55",target:"48"},{id:"127",name:null,source:"55",target:"49"},{id:"126",name:null,source:"55",target:"51"},{id:"129",name:null,source:"55",target:"54"},{id:"136",name:null,source:"56",target:"49"},{id:"137",name:null,source:"56",target:"55"},{id:null,name:null,source:"57",target:"41"},{id:null,name:null,source:"57",target:"48"},{id:"138",name:null,source:"57",target:"55"},{id:"145",name:null,source:"58",target:"11"},{id:null,name:null,source:"58",target:"27"},{id:"142",name:null,source:"58",target:"48"},{id:"141",name:null,source:"58",target:"55"},{id:"144",name:null,source:"58",target:"57"},{id:"148",name:null,source:"59",target:"48"},{id:"147",name:null,source:"59",target:"55"},{id:null,name:null,source:"59",target:"57"},{id:"146",name:null,source:"59",target:"58"},{id:"150",name:null,source:"60",target:"48"},{id:"151",name:null,source:"60",target:"58"},{id:"152",name:null,source:"60",target:"59"},{id:"153",name:null,source:"61",target:"48"},{id:"158",name:null,source:"61",target:"55"},{id:"157",name:null,source:"61",target:"57"},{id:"154",name:null,source:"61",target:"58"},{id:"156",name:null,source:"61",target:"59"},{id:"155",name:null,source:"61",target:"60"},{id:"164",name:null,source:"62",target:"41"},{id:"162",name:null,source:"62",target:"48"},{id:"159",name:null,source:"62",target:"55"},{id:null,name:null,source:"62",target:"57"},{id:"160",name:null,source:"62",target:"58"},{id:"161",name:null,source:"62",target:"59"},{id:null,name:null,source:"62",target:"60"},{id:"165",name:null,source:"62",target:"61"},{id:null,name:null,source:"63",target:"48"},{id:"174",name:null,source:"63",target:"55"},{id:null,name:null,source:"63",target:"57"},{id:null,name:null,source:"63",target:"58"},{id:"167",name:null,source:"63",target:"59"},{id:null,name:null,source:"63",target:"60"},{id:"172",name:null,source:"63",target:"61"},{id:"169",name:null,source:"63",target:"62"},{id:"184",name:null,source:"64",target:"11"},{id:null,name:null,source:"64",target:"48"},{id:"175",name:null,source:"64",target:"55"},{id:"183",name:null,source:"64",target:"57"},{id:"179",name:null,source:"64",target:"58"},{id:"182",name:null,source:"64",target:"59"},{id:"181",name:null,source:"64",target:"60"},{id:"180",name:null,source:"64",target:"61"},{id:"176",name:null,source:"64",target:"62"},{id:"178",name:null,source:"64",target:"63"},{id:"187",name:null,source:"65",target:"48"},{id:"194",name:null,source:"65",target:"55"},{id:"193",name:null,source:"65",target:"57"},{id:null,name:null,source:"65",target:"58"},{id:"192",name:null,source:"65",target:"59"},{id:null,name:null,source:"65",target:"60"},{id:"190",name:null,source:"65",target:"61"},{id:"188",name:null,source:"65",target:"62"},{id:"185",name:null,source:"65",target:"63"},{id:"186",name:null,source:"65",target:"64"},{id:"200",name:null,source:"66",target:"48"},{id:"196",name:null,source:"66",target:"58"},{id:"197",name:null,source:"66",target:"59"},{id:"203",name:null,source:"66",target:"60"},{id:"202",name:null,source:"66",target:"61"},{id:"198",name:null,source:"66",target:"62"},{id:"201",name:null,source:"66",target:"63"},{id:"195",name:null,source:"66",target:"64"},{id:"199",name:null,source:"66",target:"65"},{id:"204",name:null,source:"67",target:"57"},{id:null,name:null,source:"68",target:"11"},{id:null,name:null,source:"68",target:"24"},{id:"205",name:null,source:"68",target:"25"},{id:"208",name:null,source:"68",target:"27"},{id:null,name:null,source:"68",target:"41"},{id:"209",name:null,source:"68",target:"48"},{id:"213",name:null,source:"69",target:"11"},{id:"214",name:null,source:"69",target:"24"},{id:"211",name:null,source:"69",target:"25"},{id:null,name:null,source:"69",target:"27"},{id:"217",name:null,source:"69",target:"41"},{id:"216",name:null,source:"69",target:"48"},{id:"212",name:null,source:"69",target:"68"},{id:"221",name:null,source:"70",target:"11"},{id:"222",name:null,source:"70",target:"24"},{id:"218",name:null,source:"70",target:"25"},{id:"223",name:null,source:"70",target:"27"},{id:"224",name:null,source:"70",target:"41"},{id:"225",name:null,source:"70",target:"58"},{id:"220",name:null,source:"70",target:"68"},{id:"219",name:null,source:"70",target:"69"},{id:"230",name:null,source:"71",target:"11"},{id:"233",name:null,source:"71",target:"25"},{id:"226",name:null,source:"71",target:"27"},{id:"232",name:null,source:"71",target:"41"},{id:null,name:null,source:"71",target:"48"},{id:"228",name:null,source:"71",target:"68"},{id:"227",name:null,source:"71",target:"69"},{id:"229",name:null,source:"71",target:"70"},{id:"236",name:null,source:"72",target:"11"},{id:"234",name:null,source:"72",target:"26"},{id:"235",name:null,source:"72",target:"27"},{id:"237",name:null,source:"73",target:"48"},{id:"238",name:null,source:"74",target:"48"},{id:"239",name:null,source:"74",target:"73"},{id:"242",name:null,source:"75",target:"25"},{id:"244",name:null,source:"75",target:"41"},{id:null,name:null,source:"75",target:"48"},{id:"241",name:null,source:"75",target:"68"},{id:"240",name:null,source:"75",target:"69"},{id:"245",name:null,source:"75",target:"70"},{id:"246",name:null,source:"75",target:"71"},{id:"252",name:null,source:"76",target:"48"},{id:"253",name:null,source:"76",target:"58"},{id:"251",name:null,source:"76",target:"62"},{id:"250",name:null,source:"76",target:"63"},{id:"247",name:null,source:"76",target:"64"},{id:"248",name:null,source:"76",target:"65"},{id:"249",name:null,source:"76",target:"66"}],categories:[{name:"Category 0"},{name:"Category 1"},{name:"Category 2"},{name:"Category 3"},{name:"Category 4"},{name:"Category 5"},{name:"Category 6"},{name:"Category 7"},{name:"Category 8"}],label:{normal:{position:"right"}},symbol:"circle",itemStyle:{normal:{opacity:.8}},lineStyle:{normal:{curveness:.3}}}]},{title:{text:"Heatmap"},xAxis:{type:"category",data:["12a","1a","2a","3a","4a","5a","6a","7a","8a","9a","10a","11a","12p"]},yAxis:{type:"category",data:["Sat","Fri","Thu","Wed","Tue","Mon","Sun"]},visualMap:{min:1,max:10,calculable:!0},grid:{left:90,right:20,top:40,bottom:40},series:[{name:"Heat",type:"heatmap",data:[[0,0,5],[0,1,1],[0,2,3],[0,3,2],[0,4,1],[0,5,4],[0,6,6],[0,7,6],[0,8,4],[0,9,7],[0,10,0],[0,11,2],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,5],[1,5,7],[1,6,9],[1,7,4],[1,8,7],[1,9,9],[1,10,5],[1,11,2],[2,0,7],[2,1,6],[2,2,5],[2,3,5],[2,4,9],[2,5,8],[2,6,0],[2,7,0],[2,8,0],[2,9,4],[2,10,3],[2,11,2],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,3],[3,5,0],[3,6,4],[3,7,5],[3,8,1],[3,9,3],[3,10,5],[3,11,4],[3,12,7],[4,0,6],[4,1,3],[4,2,6],[4,3,0],[4,4,5],[4,5,1],[4,6,0],[4,7,0],[4,8,5],[4,9,2],[4,10,4],[4,11,4],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,8],[5,5,4],[5,6,6],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[6,0,1],[6,1,0],[6,2,8],[6,3,6],[6,4,2],[6,5,0],[6,6,0],[6,7,8],[6,8,5],[6,9,10],[6,10,1],[6,11,0]].map(function(e){return[e[1],e[0],e[2]||"-"]}),label:{normal:{show:!0}}}]},{title:{text:"Tree"},series:[{type:"treemap",label:{show:!0,formatter:"{b}"},roam:!1,data:function(){for(var e=[],a=0;a<d;++a){for(var t=[],r=0,l=0,o=Math.ceil(5*Math.random());l<o;++l){for(var n=[],i=0,s=0,m=Math.ceil(3*Math.random());s<m;++s){var u=Math.ceil(100*Math.random());n.push({value:u,name:a+1+"-"+(l+1)+"-"+(s+1),path:a+1+"/"+(a+1)+"-"+(l+1)+"/"+(a+1)+"-"+(l+1)+"-"+(s+1)}),i+=u}t.push({value:i,name:a+1+"-"+(l+1),path:a+1+"/"+(a+1)+"-"+(l+1),children:n}),r+=i}e.push({value:r,name:""+(a+1),path:""+(a+1),children:t})}return e}()}]}],h=0;h<g.length;++h)g[h].legend=g[h].legend||l,g[h].tooltip=g[h].tooltip||n,g[h].grid=g[h].grid||s;return g}Vue.component("config-color-list",VueColorListConfig),function(){var o=1,e=[{name:"vintage",background:"#fef8ef",theme:["#d87c7c","#919e8b","#d7ab82","#6e7074","#61a0a8","#efa18d","#787464","#cc7e63","#724e58","#4b565b"]},{name:"dark",background:"#333",theme:["#dd6b66","#759aa0","#e69d87","#8dc1a9","#ea7e53","#eedd78","#73a373","#73b9bc","#7289ab","#91ca8c","#f49f42"]},{name:"westeros",background:"transparent",theme:["#516b91","#59c4e6","#edafda","#93b7e3","#a5e7f0","#cbb0e3"]},{name:"essos",background:"rgba(242,234,191,0.15)",theme:["#893448","#d95850","#eb8146","#ffb248","#f2d643","#ebdba4"]},{name:"wonderland",background:"transparent",theme:["#4ea397","#22c3aa","#7bd9a5","#d0648a","#f58db2","#f2b3c9"]},{name:"walden",background:"rgba(252,252,252,0)",theme:["#3fb1e3","#6be6c1","#626c91","#a0a7e6","#c4ebad","#96dee8"]},{name:"chalk",background:"#293441",theme:["#fc97af","#87f7cf","#f7f494","#72ccff","#f7c5a0","#d4a4eb","#d2f5a6","#76f2f2"]},{name:"infographic",background:"transparent",theme:["#C1232B","#27727B","#FCCE10","#E87C25","#B5C334","#FE8463","#9BCA63","#FAD860","#F3A43B","#60C0DD","#D7504B","#C6E579","#F4E001","#F0805A","#26C0C0"]},{name:"macarons",background:"transparent",theme:["#2ec7c9","#b6a2de","#5ab1ef","#ffb980","#d87a80","#8d98b3","#e5cf0d","#97b552","#95706d","#dc69aa","#07a2a4","#9a7fd1","#588dd5","#f5994e","#c05050","#59678c","#c9ab00","#7eb00a","#6f5553","#c14089"]},{name:"roma",background:"transparent",theme:["#E01F54","#001852","#f5e8c8","#b8d2c7","#c6b38e","#a4d8c2","#f3d999","#d3758f","#dcc392","#2e4783","#82b6e9","#ff6347","#a092f1","#0a915d","#eaf889","#6699FF","#ff6666","#3cb371","#d5b158","#38b6b6"]},{name:"shine",background:"transparent",theme:["#c12e34","#e6b600","#0098d9","#2b821d","#005eaa","#339ca8","#cda819","#32a487"]},{name:"purple-passion",background:"rgba(91,92,110,1)",theme:["#8a7ca8","#e098c7","#8fd3e8","#71669e","#cc70af","#7cb4cc"]},{name:"halloween",background:"rgba(51,51,51,1)",theme:["#ff715e","#ffaf51","#ffee51","#797fba","#715c87"]}],n={seriesCnt:3,backgroundColor:"rgba(0, 0, 0, 0)",titleColor:"#333",subtitleColor:"#aaa",textColorShow:!1,textColor:"#333",markTextColor:"#eee",color:["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],borderColor:"#ccc",borderWidth:0,visualMapColor:["#bf444c","#d88273","#f6efa6"],legendTextColor:"#333",kColor:"#c23531",kColor0:"#314656",kBorderColor:"#c23531",kBorderColor0:"#314656",kBorderWidth:1,lineWidth:2,symbolSize:4,symbol:"emptyCircle",symbolBorderWidth:1,lineSmooth:!1,graphLineWidth:1,graphLineColor:"#aaa",mapLabelColor:"#000",mapLabelColorE:"rgb(100,0,0)",mapBorderColor:"#444",mapBorderColorE:"#444",mapBorderWidth:.5,mapBorderWidthE:1,mapAreaColor:"#eee",mapAreaColorE:"rgba(255,215,0,0.8)",axes:function(){for(var e=["all","category","value","log","time"],a=["General","Category","Value","Logarithm","Time"],t=[],r=0;r<e.length;++r)t.push({type:e[r],name:a[r]+" Axis",axisLineShow:!0,axisLineColor:"#333",axisTickShow:!0,axisTickColor:"#333",axisLabelShow:!0,axisLabelColor:"#333",splitLineShow:"category"!==e[r],splitLineColor:["#ccc"],splitAreaShow:!1,splitAreaColor:["rgba(250,250,250,0.3)","rgba(200,200,200,0.3)"]});return t}(),axisSeperateSetting:!0,axis:null,toolboxColor:"#999",toolboxEmpasisColor:"#666",tooltipAxisColor:"#ccc",tooltipAxisWidth:1,timelineLineColor:"#293c55",timelineLineWidth:1,timelineItemColor:"#293c55",timelineItemColorE:"#a9334c",timelineCheckColor:"#e43c59",timelineCheckBorderColor:"rgba(194,53,49, 0.5)",timelineItemBorderWidth:1,timelineControlColor:"#293c55",timelineControlBorderColor:"#293c55",timelineControlBorderWidth:.5,timelineLabelColor:"#293c55",datazoomBackgroundColor:"rgba(47,69,84,0)",datazoomDataColor:"rgba(47,69,84,0.3)",datazoomFillColor:"rgba(167,183,204,0.4)",datazoomHandleColor:"#a7b7cc",datazoomHandleWidth:"100",datazoomLabelColor:"#333"};n.axis=[n.axes[0]];for(var a=_.debounce(l,200),t=0;t<e.length;++t)p(t,!0);var i,s=new Vue({el:"#content",data:{theme:f(n),themeName:"customed",charts:[],options:[],isPauseChartUpdating:!1,copyKbd:0<navigator.userAgent.indexOf("Mac OS X")?"cmd":"ctrl",downloadable:!g()&&!h(),preDefinedThemes:e,loadedThemes:[],chartDisplay:{background:"#fff",title:"#000"}},methods:{updateCharts:l,updateSymbol:function(e){s.theme.symbol=e},selectPreDefinedTheme:function(e){for(var a=0;a<s.loadedThemes.length;++a)if(s.loadedThemes[a].id===e)return void r(s.loadedThemes[a].data);p(e,!1)},useTheme:function(){_hmt.push(["_trackEvent","theme-builder","useTheme",s.themeName]),$("#js-code").text(y()),$("#json-code").text(JSON.stringify(m(!0),null,"    ")),hljs.highlightBlock($("#js-code")[0]),hljs.highlightBlock($("#json-code")[0])},downloadThemeJson:function(){_hmt.push(["_trackEvent","theme-builder","download","json"]),d(m(!0),(s.themeName||"customed")+".json")},downloadThemeJs:function(){var e,a;_hmt.push(["_trackEvent","theme-builder","download","js"]),e=y(),a=(s.themeName||"customed")+".js",c(e,a,"js")},copyThemeJson:function(){b("json")},copyThemeJs:function(){b("js")},newTheme:function(){this.$set("theme",f(n)),this.$set("themeName","customed"),s.axisSeperateSettingChanges()},exportJson:function(){var e=f(s.theme);delete e.axis,d({version:o,themeName:s.themeName,theme:e},(s.themeName||"customed")+".project.json")},importJson:function(){$("#input-file").trigger("click")},importFileChanged:function(e){var a,t;e.target.files&&(".json"===(a=e.target.files[0]).name.slice(a.name.lastIndexOf("."))?((t=new FileReader).onload=function(){r(this.result)},t.onerror=function(e){alert("Fail to open the file."),console.error(e)},t.readAsText(a),$("#input-file").val("")):alert("Illegal extension! Please use *.json files from our website! "))},axisSeperateSettingChanges:function(){s.theme.axisSeperateSetting?s.theme.axis=s.theme.axes:s.theme.axis=[s.theme.axes[0]]}}});function r(e){try{var a=JSON.parse(e);if(void 0===a.themeName&&void 0===a.version)return void alert("Please use the exported JSON configuration files from our site instead of downloaded theme file. ");if(s.$set("themeName",a.themeName||"customed"),a.version<o){var t=[],r=a.theme;for(var l in n)"axis"!==l&&(void 0!==a.theme[l]?r.attr=a.theme[l]:t.push(a.theme.attr));0<t.length?alert("The imported theme have lower version, "+t.length+" attributes have not been set. The default values are now used. "):console.warn("The imported theme have lower version, some attributes have not been set.")}s.$set("theme",a.theme),s.axisSeperateSettingChanges()}catch(e){alert("Illegal JSON format! Please use the exported JSON configuration files from our site. "),console.error(e)}}function m(e){var a="path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072 c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363 c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417 c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827 C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12.646,2.053,18.738c4.593,22.785,15.398,41.367,32.558,55.344 c15.43,12.773,29.901,18.023,43.362,16.981c7.074-0.561,13.624-3.977,19.685-10.192c10.534,5.49,20.391,8.217,29.561,8.203 c9.856-0.012,20.236-2.953,31.125-8.898c6.227,6.692,12.966,10.346,20.211,10.933c13.795,1.073,28.614-4.111,44.377-16.84 c17.49-14.104,28.043-32.79,31.796-55.485c0.836-5.624,1.272-11.292,1.272-16.966C255.998,115.814,249.707,96.601,237.062,81.761z  M54.795,97.7l40.661,14.496c-4.402,8.811-10.766,13.219-19.06,13.219c-2.542,0-4.917-0.419-7.122-1.274 C58.103,118.38,53.263,109.572,54.795,97.7z M150.613,185.396l-9.156-8.389l-7.619,12.951c-3.391,0.341-6.615,0.514-9.665,0.514 c-4.401,0-8.635-0.263-12.708-0.777l-8.634-14.973l-9.151,9.909c-4.91-2.717-9.15-5.856-12.708-9.413 c-8.81-8.295-13.384-17.959-13.727-28.97c2.877,1.692,7.427,3.461,13.675,5.308l10.636,13.629l9.44-9.852 c4.734,0.702,9.234,1.12,13.466,1.275l10.689,11.498l9.671-11.949c3.559-0.173,7.285-0.515,11.182-1.01l9.924,10.159l10.933-14.227 c5.931-1.351,11.196-2.798,15.771-4.323C179.747,163.538,169.068,176.414,150.613,185.396z M175.258,124.907 c-2.209,0.849-4.66,1.273-7.369,1.273c-8.134,0-14.489-4.415-19.052-13.224l40.905-14.477 C191.105,110.331,186.273,119.141,175.258,124.907z",t={itemStyle:{normal:{borderWidth:s.theme.symbolBorderWidth}},lineStyle:{normal:{width:s.theme.lineWidth}},symbolSize:s.theme.symbolSize,symbol:s.theme.symbol,smooth:s.theme.lineSmooth},r={itemStyle:{normal:{borderWidth:s.theme.borderWidth,borderColor:s.theme.borderColor},emphasis:{borderWidth:s.theme.borderWidth,borderColor:s.theme.borderColor}}};"halloween"===s.themeName&&(t.symbol=a,r.symbol=a);var l,o={itemStyle:{normal:{areaColor:s.theme.mapAreaColor,borderColor:s.theme.mapBorderColor,borderWidth:s.theme.mapBorderWidth},emphasis:{areaColor:s.theme.mapAreaColorE,borderColor:s.theme.mapBorderColorE,borderWidth:s.theme.mapBorderWidthE}},label:{normal:{textStyle:{color:s.theme.mapLabelColor}},emphasis:{textStyle:{color:s.theme.mapLabelColorE}}}};return{color:s.theme.color,backgroundColor:e?s.theme.backgroundColor:"transparent",textStyle:s.theme.textColorShow?{color:s.theme.textColor}:{},title:{textStyle:{color:s.theme.titleColor},subtextStyle:{color:s.theme.subtitleColor}},line:t,radar:t,bar:{itemStyle:{normal:{barBorderWidth:s.theme.borderWidth,barBorderColor:s.theme.borderColor},emphasis:{barBorderWidth:s.theme.borderWidth,barBorderColor:s.theme.borderColor}}},pie:r,scatter:r,boxplot:r,parallel:r,sankey:r,funnel:r,gauge:r,candlestick:{itemStyle:{normal:{color:s.theme.kColor,color0:s.theme.kColor0,borderColor:s.theme.kBorderColor,borderColor0:s.theme.kBorderColor0,borderWidth:s.theme.kBorderWidth}}},graph:((l=f(t)).color=s.theme.color,l.lineStyle={normal:{width:s.theme.graphLineWidth,color:s.theme.graphLineColor}},l.label={normal:{textStyle:{color:s.theme.markTextColor}}},l.itemStyle.normal.borderWidth=s.theme.borderWidth,l.itemStyle.normal.borderColor=s.theme.borderColor,l),map:o,geo:o,categoryAxis:n(1),valueAxis:n(2),logAxis:n(3),timeAxis:n(4),toolbox:{iconStyle:{normal:{borderColor:s.theme.toolboxColor},emphasis:{borderColor:s.theme.toolboxEmpasisColor}}},legend:{textStyle:{color:s.theme.legendTextColor}},tooltip:{axisPointer:{lineStyle:{color:s.theme.tooltipAxisColor,width:s.theme.tooltipAxisWidth},crossStyle:{color:s.theme.tooltipAxisColor,width:s.theme.tooltipAxisWidth}}},timeline:{lineStyle:{color:s.theme.timelineLineColor,width:s.theme.timelineLineWidth},itemStyle:{normal:{color:s.theme.timelineItemColor,borderWidth:s.theme.timelineItemBorderWidth},emphasis:{color:s.theme.timelineItemColorE}},controlStyle:{normal:{color:s.theme.timelineControlColor,borderColor:s.theme.timelineControlBorderColor,borderWidth:s.theme.timelineControlBorderWidth},emphasis:{color:s.theme.timelineControlColor,borderColor:s.theme.timelineControlBorderColor,borderWidth:s.theme.timelineControlBorderWidth}},checkpointStyle:{color:s.theme.timelineCheckColor,borderColor:s.theme.timelineCheckBorderColor},label:{normal:{textStyle:{color:s.theme.timelineLabelColor}},emphasis:{textStyle:{color:s.theme.timelineLabelColor}}}},visualMap:{color:s.theme.visualMapColor},dataZoom:{backgroundColor:s.theme.datazoomBackgroundColor,dataBackgroundColor:s.theme.datazoomDataColor,fillerColor:s.theme.datazoomFillColor,handleColor:s.theme.datazoomHandleColor,handleSize:s.theme.datazoomHandleWidth+"%",textStyle:{color:s.theme.datazoomLabelColor}},markPoint:{label:{normal:{textStyle:{color:s.theme.markTextColor}},emphasis:{textStyle:{color:s.theme.markTextColor}}}}};function n(e){return s.theme.axisSeperateSetting||(e=0),{axisLine:{show:s.theme.axes[e].axisLineShow,lineStyle:{color:s.theme.axes[e].axisLineColor}},axisTick:{show:s.theme.axes[e].axisTickShow,lineStyle:{color:s.theme.axes[e].axisTickColor}},axisLabel:{show:s.theme.axes[e].axisLabelShow,textStyle:{color:s.theme.axes[e].axisLabelColor}},splitLine:{show:s.theme.axes[e].splitLineShow,lineStyle:{color:s.theme.axes[e].splitLineColor}},splitArea:{show:s.theme.axes[e].splitAreaShow,areaStyle:{color:s.theme.axes[e].splitAreaColor}}}}}function u(e,a,t){var r,l,o=$(".ec-panel").eq(e);o.length&&((r=echarts.getInstanceByDom(o[0]))&&r.dispose(),(r=echarts.init(o[0],"customed")).setOption(a[e]),(l=e+1)===$(".ec-panel").length&&(l=0),l!==t&&(i=setTimeout(function(){u(l,a,t)},150)))}function l(){if(!s.isPauseChartUpdating){echarts.registerTheme("customed",m(!1));var e=getOptions(s);i&&clearTimeout(i);for(var a=$(".ec-panel").length,t=!1,r=0;r<a;++r){var l=$(".ec-panel").eq(r);if(0<l.offset().top+l.height()){u(r,e,r),t=!0;break}}t||u(0,e),s.chartDisplay.background=s.theme.backgroundColor,s.chartDisplay.title=s.theme.titleColor}}function d(e,a){c(JSON.stringify(e,null,"    "),a,"json")}function c(a,e,t){if(0<navigator.userAgent.indexOf("Safari")&&navigator.userAgent.indexOf("Chrome")<0)window.open("data:text/plain;charset=utf-8,"+encodeURIComponent(a));else try{var r=new Blob([a],{type:t});saveAs(r,e)}catch(e){console.error(e),window.open("data:text/plain;charset=utf-8,"+encodeURIComponent(a))}}function g(){return 0<navigator.userAgent.indexOf("MSIE")}function h(){return 0<navigator.userAgent.indexOf("Trident")}function y(){var e=(e=JSON.stringify(m(!0),null,"    ")).split("\n").join("\n    ");return"(function (root, factory) {\n    if (typeof define === 'function' && define.amd) {\n        // AMD. Register as an anonymous module.\n        define(['exports', 'echarts'], factory);\n    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {\n        // CommonJS\n        factory(exports, require('echarts'));\n    } else {\n        // Browser globals\n        factory({}, root.echarts);\n    }\n}(this, function (exports, echarts) {\n    var log = function (msg) {\n        if (typeof console !== 'undefined') {\n            console && console.error && console.error(msg);\n        }\n    };\n    if (!echarts) {\n        log('ECharts is not Loaded');\n        return;\n    }\n    echarts.registerTheme('"+s.themeName+"', "+e+");\n}));\n"}function b(e){var a,t;function r(e){$("#"+e).fadeIn(),setTimeout(function(){$("#"+e).fadeOut()},1e4)}window.getSelection?((t=document.createRange()).selectNode($("#"+e+"-code")[0]),(a=window.getSelection()).removeAllRanges(),a.addRange(t)):document.selection&&((t=document.body.createTextRange()).moveToElementText($("#"+e+"-code")[0]),t.select()),$(".code-btn label").hide(),g()||h()||!document.execCommand("copy")?r("copy-"+e+"-fail"):(r("copy-"+e+"-success"),window.getSelection?window.getSelection().removeAllRanges():document.selection.empty())}function f(e){return $.extend(!0,{},e)}function p(a,t){$.ajax({url:"./theme-builder/themes/"+e[a].name+".json",dataType:"text",success:function(e){s.loadedThemes.push({id:a,data:e}),t||r(e)}})}s.$watch("theme",a,{deep:!0}),s.axisSeperateSettingChanges()}();
\ No newline at end of file
+var VueColor=Vue.extend({template:'<div class="input-group colorpicker-component"><input type="text" class="form-control" debounce="2000" /><span class="input-group-addon"><i></i></span></div>',compiled:function(){var a=this,t=$(this.$el);t.find("input").val(this.color),t.colorpicker().on("changeColor",function(){var e=t.find("input").val();echarts.color.parse(e)&&a.$set("color",e)}),a.$watch("color",function(e){t.colorpicker("setValue",e)})},props:{color:{twoWay:!0}}});Vue.component("color",VueColor);var VueColorList=Vue.extend({template:'<div><div v-for="color in colors" track-by="$index"><color :color.sync="color"></color></div><div class="theme-color-control"><a v-on:click="addColor()">Add</a><a v-on:click="removeColor()" v-show="colors.length > 1">Remove</a></div></div>',props:{colors:{twoWay:!0}},methods:{addColor:function(){this.colors.push("#333333")},removeColor:function(){this.colors.pop()}}});Vue.component("color-list",VueColorList);var VueNumberConfig=Vue.extend({template:'<div class="form-group">  <div class="col-sm-6">    <input type="checkbox" v-model="enabled" v-if="canDisable" />    <label class="control-label">{{title}}</label>  </div>  <div class="col-sm-6">    <div class="input-group" v-show="enabled">      <input type="number" v-model="value" class="form-control" />    </div>  </div></div>',props:{title:String,canDisable:{type:Boolean,default:!1},value:{twoWay:!0},enabled:{twoWay:!0,default:!0}}});Vue.component("config-number",VueNumberConfig);var VueColorConfig=Vue.extend({template:'<div class="form-group">  <div class="col-sm-6">    <input type="checkbox" v-model="enabled" v-if="canDisable" />    <label class="control-label">{{title}}</label>  </div>  <div class="col-sm-6">    <color :color.sync="color" v-show="enabled"></color>  </div></div>',props:{title:String,canDisable:{type:Boolean,default:!1},color:{twoWay:!0},enabled:{twoWay:!0,default:!0}}});Vue.component("config-color",VueColorConfig);var VueColorListConfig=Vue.extend({template:'<div class="form-group">  <div class="col-sm-6">    <input type="checkbox" v-model="enabled" v-if="canDisable" />    <label class="control-label">{{title}}</label>  </div>  <div class="col-sm-6">    <color-list :colors.sync="colors" v-show="enabled"></color-list>  </div></div>',props:{title:String,canDisable:{type:Boolean,default:!1},colors:{twoWay:!0},enabled:{twoWay:!0,default:!0}}});function getOptions(e){function r(e){var a,t=[];a="scatter"===e?32:i;for(var r=0;r<d;++r){for(var l,o=[],n=0;n<a;++n){l="scatter"===e?[Math.floor((600*Math.random()+400)*(d-r)/d),Math.floor((600*Math.random()+400)*(d-r)/d)]:Math.floor((600*Math.random()+400)*(d-r)/d),o.push(l)}"radar"===e&&(o=[o]),t.push({type:e,data:o,name:"Group "+(r+1),markPoint:"line"===e||"bar"===e||"scatter"===e?{data:[{name:"Maximum",type:"max"}]}:{}})}return t}function a(e){for(var a=r(e),t=0;t<a.length;++t)a[t].areaStyle={normal:{}},a[t].stack="total";return a}var d=e?e.theme.seriesCnt:4,t=["Mon","Tus","Wed","Thu","Fri","Sat","Sun"],i=t.length,l={data:function(){for(var e=[],a=0;a<d;++a)e.push("Group "+(a+1));return e}(),right:0},o={feature:{restore:{show:!0},saveAsImage:{show:!0},dataView:{show:!0},dataZoom:{show:!0}}},n={trigger:"axis"},s={left:60,right:20,top:40,bottom:50},m={};function u(e){for(var a=["Beijing","Tianjin","Hebei","Shanxi","Inner Mongolia","Jilin","Heilongjiang","Shanghai","Jiangsu"],t=2002;t<=2007;t++){for(var r,l=0,o=0,n=0,i=(r=e[t]).length;n<i;n++)l=Math.max(l,r[n]),o+=r[n],e[t][n]={name:a[n],value:r[n]};e[t+"max"]=100*Math.floor(l/100),e[t+"sum"]=o}return e}m.dataPI=u({2007:[101.26,110.19,1804.72,311.97,762.1,1133.42,783.8,915.38,101.84,1816.31],2006:[88.8,103.35,1461.81,276.77,634.94,939.43,672.76,750.14,93.81,1545.05,925.1],2005:[88.68,112.38,1400,262.42,589.56,882.41,625.61,684.6,90.26,1461.51,892.83],2004:[87.36,105.28,1370.43,276.3,522.8,798.43,568.69,605.79,83.45,1367.58,814.1],2003:[84.11,89.91,1064.05,215.19,420.1,615.8,488.23,504.8,81.02,1162.45,717.85],2002:[82.44,84.21,956.84,197.8,374.69,590.2,446.17,474.2,79.68,1110.44]}),m.dataSI=u({2007:[2509.4,2892.53,7201.88,3454.49,3193.67,5544.14,2475.45,3695.58,5571.06,14471.26],2006:[2191.43,2457.08,6110.43,2755.66,2374.96,4566.83,1915.29,3365.31,4969.95,12282.89],2005:[2026.51,2135.07,5271.57,2357.04,1773.21,3869.4,1580.83,2971.68,4381.2,10524.96],2004:[1853.58,1685.93,4301.73,1919.4,1248.27,3061.62,1329.68,2487.04,3892.12,8437.99],2003:[1487.15,1337.31,3417.56,1463.38,967.49,2898.89,1098.37,2084.7,3209.02,6787.11],2002:[1249.99,1069.08,2911.69,1134.31,754.78,2609.85,943.49,1843.6,2622.45,5604.49]}),m.dataTI=u({2007:[7236.15,2250.04,4600.72,2257.99,2467.41,4486.74,2025.44,2493.04,6821.11,9730.91],2006:[5837.55,1902.31,3895.36,1846.18,1934.35,3798.26,1687.07,2096.35,5508.48,7914.11],2005:[4854.33,1658.19,3340.54,1611.07,1542.26,3295.45,1413.83,1857.42,4776.2,6612.22],2004:[4092.27,1319.76,2805.47,1375.67,1270,2811.95,1223.64,1657.77,4097.26,5198.03],2003:[3435.95,1150.81,2439.68,1176.65,1000.79,2487.85,1075.48,1467.9,3404.19,4493.31],2002:[2982.57,997.47,2149.75,992.69,811.47,2258.17,958.88,1319.4,3038.9,3891.92]});for(var c,g=[{title:{text:"Line Chart",subtext:"(Subtitle here)"},series:r("line"),xAxis:{type:"category",data:t},yAxis:{type:"value"},grid:{left:60,right:20,top:60,bottom:50}},{title:{text:"Stacked Line Chart",subtext:"(Subtitle here)"},series:a("line"),xAxis:{type:"category",data:t,boundaryGap:!1},yAxis:{type:"value"},grid:{left:60,right:20,top:60,bottom:50}},{title:{text:"Bar Chart"},series:r("bar"),xAxis:{type:"category",data:t},yAxis:{type:"value"}},{title:{text:"Stacked Bar Chart"},series:a("bar"),xAxis:{type:"category",data:t},yAxis:{type:"value"}},{title:{text:"Scatter Chart"},series:r("scatter"),toolbox:((c=o).left=65,c),tooltip:{trigger:"item"},xAxis:{type:"value"},yAxis:{type:"value"}},{title:{text:"Pie Chart"},series:function(e){for(var a=[],t=0;t<d;++t)a.push({name:l.data[t],value:Math.floor((800*Math.random()+200)*(d-t)/d)});return{type:e,data:a}}("pie"),tooltip:{trigger:"item"}},{title:{text:"Radar Chart"},series:r("radar"),radar:{indicator:function(){for(var e=[],a=0;a<t.length;++a)e.push({name:t[a],max:1e3});return e}(),center:["50%","60%"]}},{baseOption:{timeline:{axisType:"category",autoPlay:!1,data:["2002-01-01","2003-01-01","2004-01-01",{value:"2005-01-01",tooltip:{formatter:"{b} GDP reached a height."}},"2006-01-01","2007-01-01","2008-01-01","2009-01-01","2010-01-01",{value:"2011-01-01",tooltip:{formatter:function(e){return e.name+"GDP reached another height."}}}],label:{formatter:function(e){return new Date(e).getFullYear()}}},tooltip:{},legend:{x:"right",data:["Primary Industry","Secondary Industry","Tertiary Industry"]},calculable:!0,grid:{top:60,bottom:75},xAxis:[{type:"category",axisLabel:{interval:0},data:["Beijing","Tianjin","Hebei","Shanxi","Inner Mongolia","Jilin","Heilongjiang","Shanghai","Jiangsu"],splitLine:{show:!1}}],yAxis:[{type:"value",name:"GDP (hundred million Yuan)"}],series:[{name:"Primary Industry",type:"bar"},{name:"Secondary Industry",type:"bar"},{name:"Tertiary Industry",type:"bar"},{name:"GDP Ratio",type:"pie",center:["30%","35%"],radius:"28%"}]},options:[{title:{text:"Timeline"},series:[{data:m.dataPI[2002]},{data:m.dataSI[2002]},{data:m.dataTI[2002]},{data:[{name:"Primary Industry",value:m.dataPI["2002sum"]},{name:"Secondary Industry",value:m.dataSI["2002sum"]},{name:"Tertiary Industry",value:m.dataTI["2002sum"]}]}]},{title:{text:"Timeline"},series:[{data:m.dataPI[2003]},{data:m.dataSI[2003]},{data:m.dataTI[2003]},{data:[{name:"Primary Industry",value:m.dataPI["2003sum"]},{name:"Secondary Industry",value:m.dataSI["2003sum"]},{name:"Tertiary Industry",value:m.dataTI["2003sum"]}]}]},{title:{text:"Timeline"},series:[{data:m.dataPI[2004]},{data:m.dataSI[2004]},{data:m.dataTI[2004]},{data:[{name:"Primary Industry",value:m.dataPI["2004sum"]},{name:"Secondary Industry",value:m.dataSI["2004sum"]},{name:"Tertiary Industry",value:m.dataTI["2004sum"]}]}]},{title:{text:"Timeline"},series:[{data:m.dataPI[2005]},{data:m.dataSI[2005]},{data:m.dataTI[2005]},{data:[{name:"Primary Industry",value:m.dataPI["2005sum"]},{name:"Secondary Industry",value:m.dataSI["2005sum"]},{name:"Tertiary Industry",value:m.dataTI["2005sum"]}]}]},{title:{text:"Timeline"},series:[{data:m.dataPI[2006]},{data:m.dataSI[2006]},{data:m.dataTI[2006]},{data:[{name:"Primary Industry",value:m.dataPI["2006sum"]},{name:"Secondary Industry",value:m.dataSI["2006sum"]},{name:"Tertiary Industry",value:m.dataTI["2006sum"]}]}]},{title:{text:"Timeline"},series:[{data:m.dataPI[2007]},{data:m.dataSI[2007]},{data:m.dataTI[2007]},{data:[{name:"Primary Industry",value:m.dataPI["2007sum"]},{name:"Secondary Industry",value:m.dataSI["2007sum"]},{name:"Tertiary Industry",value:m.dataTI["2007sum"]}]}]}]},{title:{text:"Candlestick Chart & Zoom"},grid:{left:60,right:20,top:40,bottom:70},toolbox:{show:!0,feature:{mark:{show:!0},dataZoom:{show:!0},magicType:{show:!0,type:["line","bar"]},dataView:{show:!0,readOnly:!1},restore:{show:!0}}},dataZoom:{show:!0,realtime:!0,start:50,end:100},xAxis:[{type:"category",boundaryGap:!0,axisTick:{onGap:!1},data:["2013/1/24","2013/1/25","2013/1/28","2013/1/29","2013/1/30","2013/1/31","2013/2/1","2013/2/4","2013/2/5","2013/2/6","2013/2/7","2013/2/8","2013/2/18","2013/2/19","2013/2/20","2013/2/21","2013/2/22","2013/2/25","2013/2/26","2013/2/27","2013/2/28","2013/3/1","2013/3/4","2013/3/5","2013/3/6","2013/3/7","2013/3/8","2013/3/11","2013/3/12","2013/3/13","2013/3/14","2013/3/15","2013/3/18","2013/3/19","2013/3/20","2013/3/21","2013/3/22","2013/3/25","2013/3/26","2013/3/27","2013/3/28","2013/3/29","2013/4/1","2013/4/2","2013/4/3","2013/4/8","2013/4/9","2013/4/10","2013/4/11","2013/4/12","2013/4/15","2013/4/16","2013/4/17","2013/4/18","2013/4/19","2013/4/22","2013/4/23","2013/4/24","2013/4/25","2013/4/26","2013/5/2","2013/5/3","2013/5/6","2013/5/7","2013/5/8","2013/5/9","2013/5/10","2013/5/13","2013/5/14","2013/5/15","2013/5/16","2013/5/17","2013/5/20","2013/5/21","2013/5/22","2013/5/23","2013/5/24","2013/5/27","2013/5/28","2013/5/29","2013/5/30","2013/5/31","2013/6/3","2013/6/4","2013/6/5","2013/6/6","2013/6/7","2013/6/13"]}],yAxis:[{type:"value",scale:!0,precision:2,splitNumber:7,boundaryGap:[.05,.05]}],series:[{name:"The Shanghai Compisite Index",type:"candlestick",data:[[2320.26,2302.6,2287.3,2362.94],[2300,2291.3,2288.26,2308.38],[2295.35,2346.5,2295.35,2346.92],[2347.22,2358.98,2337.35,2363.8],[2360.75,2382.48,2347.89,2383.76],[2383.43,2385.42,2371.23,2391.82],[2377.41,2419.02,2369.57,2421.15],[2425.92,2428.15,2417.58,2440.38],[2411,2433.13,2403.3,2437.42],[2432.68,2434.48,2427.7,2441.73],[2430.69,2418.53,2394.22,2433.89],[2416.62,2432.4,2414.4,2443.03],[2441.91,2421.56,2415.43,2444.8],[2420.26,2382.91,2373.53,2427.07],[2383.49,2397.18,2370.61,2397.94],[2378.82,2325.95,2309.17,2378.82],[2322.94,2314.16,2308.76,2330.88],[2320.62,2325.82,2315.01,2338.78],[2313.74,2293.34,2289.89,2340.71],[2297.77,2313.22,2292.03,2324.63],[2322.32,2365.59,2308.92,2366.16],[2364.54,2359.51,2330.86,2369.65],[2332.08,2273.4,2259.25,2333.54],[2274.81,2326.31,2270.1,2328.14],[2333.61,2347.18,2321.6,2351.44],[2340.44,2324.29,2304.27,2352.02],[2326.42,2318.61,2314.59,2333.67],[2314.68,2310.59,2296.58,2320.96],[2309.16,2286.6,2264.83,2333.29],[2282.17,2263.97,2253.25,2286.33],[2255.77,2270.28,2253.31,2276.22],[2269.31,2278.4,2250,2312.08],[2267.29,2240.02,2239.21,2276.05],[2244.26,2257.43,2232.02,2261.31],[2257.74,2317.37,2257.42,2317.86],[2318.21,2324.24,2311.6,2330.81],[2321.4,2328.28,2314.97,2332],[2334.74,2326.72,2319.91,2344.89],[2318.58,2297.67,2281.12,2319.99],[2299.38,2301.26,2289,2323.48],[2273.55,2236.3,2232.91,2273.55],[2238.49,2236.62,2228.81,2246.87],[2229.46,2234.4,2227.31,2243.95],[2234.9,2227.74,2220.44,2253.42],[2232.69,2225.29,2217.25,2241.34],[2196.24,2211.59,2180.67,2212.59],[2215.47,2225.77,2215.47,2234.73],[2224.93,2226.13,2212.56,2233.04],[2236.98,2219.55,2217.26,2242.48],[2218.09,2206.78,2204.44,2226.26],[2199.91,2181.94,2177.39,2204.99],[2169.63,2194.85,2165.78,2196.43],[2195.03,2193.8,2178.47,2197.51],[2181.82,2197.6,2175.44,2206.03],[2201.12,2244.64,2200.58,2250.11],[2236.4,2242.17,2232.26,2245.12],[2242.62,2184.54,2182.81,2242.62],[2187.35,2218.32,2184.11,2226.12],[2213.19,2199.31,2191.85,2224.63],[2203.89,2177.91,2173.86,2210.58],[2170.78,2174.12,2161.14,2179.65],[2179.05,2205.5,2179.05,2222.81],[2212.5,2231.17,2212.5,2236.07],[2227.86,2235.57,2219.44,2240.26],[2242.39,2246.3,2235.42,2255.21],[2246.96,2232.97,2221.38,2247.86],[2228.82,2246.83,2225.81,2247.67],[2247.68,2241.92,2231.36,2250.85],[2238.9,2217.01,2205.87,2239.93],[2217.09,2224.8,2213.58,2225.19],[2221.34,2251.81,2210.77,2252.87],[2249.81,2282.87,2248.41,2288.09],[2286.33,2299.99,2281.9,2309.39],[2297.11,2305.11,2290.12,2305.3],[2303.75,2302.4,2292.43,2314.18],[2293.81,2275.67,2274.1,2304.95],[2281.45,2288.53,2270.25,2292.59],[2286.66,2293.08,2283.94,2301.7],[2293.4,2321.32,2281.47,2322.1],[2323.54,2324.02,2321.17,2334.33],[2316.25,2317.75,2310.49,2325.72],[2320.74,2300.59,2299.37,2325.53],[2300.21,2299.25,2294.11,2313.43],[2297.1,2272.42,2264.76,2297.1],[2270.71,2270.93,2260.87,2276.86],[2264.43,2242.11,2240.07,2266.69],[2242.26,2210.9,2205.07,2250.63],[2190.1,2148.35,2126.22,2190.1]]}]},{title:{text:"Graph"},series:[{name:"Les Miserables",type:"graph",layout:"none",data:[{id:"0",name:"Myriel",label:{normal:{formatter:"Myriel",show:!1}},symbolSize:8.685715,x:-266.82776,y:299.6904,attributes:{modularity_class:0},value:28.685715,category:0},{id:"1",name:"Napoleon",label:{normal:{formatter:"Napoleon",show:!1}},symbolSize:4,x:-418.08344,y:446.8853,attributes:{modularity_class:0},value:4,category:0},{id:"2",name:"MlleBaptistine",label:{normal:{formatter:"MlleBaptistine",show:!1}},symbolSize:9.485714,x:-212.76357,y:245.29176,attributes:{modularity_class:1},value:9.485714,category:1},{id:"3",name:"MmeMagloire",label:{normal:{formatter:"MmeMagloire",show:!1}},symbolSize:9.485714,x:-242.82404,y:235.26283,attributes:{modularity_class:1},value:9.485714,category:1},{id:"4",name:"CountessDeLo",label:{normal:{formatter:"CountessDeLo",show:!1}},symbolSize:4,x:-379.30386,y:429.06424,attributes:{modularity_class:0},value:4,category:0},{id:"5",name:"Geborand",label:{normal:{formatter:"Geborand",show:!1}},symbolSize:4,x:-417.26337,y:406.03506,attributes:{modularity_class:0},value:4,category:0},{id:"6",name:"Champtercier",label:{normal:{formatter:"Champtercier",show:!1}},symbolSize:4,x:-332.6012,y:485.16974,attributes:{modularity_class:0},value:4,category:0},{id:"7",name:"Cravatte",label:{normal:{formatter:"Cravatte",show:!1}},symbolSize:4,x:-382.69568,y:475.09113,attributes:{modularity_class:0},value:4,category:0},{id:"8",name:"Count",label:{normal:{formatter:"Count",show:!1}},symbolSize:4,x:-320.384,y:387.17325,attributes:{modularity_class:0},value:4,category:0},{id:"9",name:"OldMan",label:{normal:{formatter:"OldMan",show:!1}},symbolSize:4,x:-344.39832,y:451.16772,attributes:{modularity_class:0},value:4,category:0},{id:"10",name:"Labarre",label:{normal:{formatter:"Labarre",show:!1}},symbolSize:4,x:-89.34107,y:234.56128,attributes:{modularity_class:1},value:4,category:1},{id:"11",name:"Valjean",label:{normal:{formatter:"Valjean",show:!1}},symbolSize:40,x:-87.93029,y:-6.8120565,attributes:{modularity_class:1},value:100,category:1},{id:"12",name:"Marguerite",label:{normal:{formatter:"Marguerite",show:!1}},symbolSize:6.742859,x:-339.77908,y:-184.69139,attributes:{modularity_class:1},value:6.742859,category:1},{id:"13",name:"MmeDeR",label:{normal:{formatter:"MmeDeR",show:!1}},symbolSize:4,x:-194.31313,y:178.55301,attributes:{modularity_class:1},value:4,category:1},{id:"14",name:"Isabeau",label:{normal:{formatter:"Isabeau",show:!1}},symbolSize:4,x:-158.05168,y:201.99768,attributes:{modularity_class:1},value:4,category:1},{id:"15",name:"Gervais",label:{normal:{formatter:"Gervais",show:!1}},symbolSize:4,x:-127.701546,y:242.55057,attributes:{modularity_class:1},value:4,category:1},{id:"16",name:"Tholomyes",label:{normal:{formatter:"Tholomyes",show:!1}},symbolSize:15.942856,x:-385.2226,y:-393.5572,attributes:{modularity_class:2},value:25.942856,category:2},{id:"17",name:"Listolier",label:{normal:{formatter:"Listolier",show:!1}},symbolSize:17.457146,x:-516.55884,y:-393.98975,attributes:{modularity_class:2},value:20.457146,category:2},{id:"18",name:"Fameuil",label:{normal:{formatter:"Fameuil",show:!1}},symbolSize:17.457146,x:-464.79382,y:-493.57944,attributes:{modularity_class:2},value:20.457146,category:2},{id:"19",name:"Blacheville",label:{normal:{formatter:"Blacheville",show:!1}},symbolSize:17.457146,x:-515.1624,y:-456.9891,attributes:{modularity_class:2},value:20.457146,category:2},{id:"20",name:"Favourite",label:{normal:{formatter:"Favourite",show:!1}},symbolSize:17.457146,x:-408.12122,y:-464.5048,attributes:{modularity_class:2},value:20.457146,category:2},{id:"21",name:"Dahlia",label:{normal:{formatter:"Dahlia",show:!1}},symbolSize:17.457146,x:-456.44113,y:-425.13303,attributes:{modularity_class:2},value:20.457146,category:2},{id:"22",name:"Zephine",label:{normal:{formatter:"Zephine",show:!1}},symbolSize:17.457146,x:-459.1107,y:-362.5133,attributes:{modularity_class:2},value:20.457146,category:2},{id:"23",name:"Fantine",label:{normal:{formatter:"Fantine",show:!1}},symbolSize:22.4,x:-313.42786,y:-289.44803,attributes:{modularity_class:2},value:42.4,category:2},{id:"24",name:"MmeThenardier",label:{normal:{formatter:"MmeThenardier",show:!1}},symbolSize:14.428574,x:4.6313396,y:-273.8517,attributes:{modularity_class:7},value:31.428574,category:7},{id:"25",name:"Thenardier",label:{normal:{formatter:"Thenardier",show:!1}},symbolSize:25.142853,x:82.80825,y:-203.1144,attributes:{modularity_class:7},value:45.142853,category:7},{id:"26",name:"Cosette",label:{normal:{formatter:"Cosette",show:!1}},symbolSize:21.428574,x:78.64646,y:-31.512747,attributes:{modularity_class:6},value:31.428574,category:6},{id:"27",name:"Javert",label:{normal:{formatter:"Javert",show:!1}},symbolSize:27.88571,x:-81.46074,y:-204.20204,attributes:{modularity_class:7},value:47.88571,category:7},{id:"28",name:"Fauchelevent",label:{normal:{formatter:"Fauchelevent",show:!1}},symbolSize:12.228573,x:-225.73984,y:82.41631,attributes:{modularity_class:4},value:12.228573,category:4},{id:"29",name:"Bamatabois",label:{normal:{formatter:"Bamatabois",show:!1}},symbolSize:23.2,x:-385.6842,y:-20.206686,attributes:{modularity_class:3},value:23.2,category:3},{id:"30",name:"Perpetue",label:{normal:{formatter:"Perpetue",show:!1}},symbolSize:6.742859,x:-403.92447,y:-197.69823,attributes:{modularity_class:2},value:6.742859,category:2},{id:"31",name:"Simplice",label:{normal:{formatter:"Simplice",show:!1}},symbolSize:12.228573,x:-281.4253,y:-158.45137,attributes:{modularity_class:2},value:12.228573,category:2},{id:"32",name:"Scaufflaire",label:{normal:{formatter:"Scaufflaire",show:!1}},symbolSize:4,x:-122.41348,y:210.37503,attributes:{modularity_class:1},value:4,category:1},{id:"33",name:"Woman1",label:{normal:{formatter:"Woman1",show:!1}},symbolSize:6.742859,x:-234.6001,y:-113.15067,attributes:{modularity_class:1},value:6.742859,category:1},{id:"34",name:"Judge",label:{normal:{formatter:"Judge",show:!1}},symbolSize:17.714287,x:-387.84915,y:58.7059,attributes:{modularity_class:3},value:17.714287,category:3},{id:"35",name:"Champmathieu",label:{normal:{formatter:"Champmathieu",show:!1}},symbolSize:17.714287,x:-338.2307,y:87.48405,attributes:{modularity_class:3},value:17.714287,category:3},{id:"36",name:"Brevet",label:{normal:{formatter:"Brevet",show:!1}},symbolSize:17.714287,x:-453.26874,y:58.94648,attributes:{modularity_class:3},value:17.714287,category:3},{id:"37",name:"Chenildieu",label:{normal:{formatter:"Chenildieu",show:!1}},symbolSize:17.714287,x:-386.44904,y:140.05937,attributes:{modularity_class:3},value:17.714287,category:3},{id:"38",name:"Cochepaille",label:{normal:{formatter:"Cochepaille",show:!1}},symbolSize:17.714287,x:-446.7876,y:123.38005,attributes:{modularity_class:3},value:17.714287,category:3},{id:"39",name:"Pontmercy",label:{normal:{formatter:"Pontmercy",show:!1}},symbolSize:9.485714,x:336.49738,y:-269.55914,attributes:{modularity_class:6},value:9.485714,category:6},{id:"40",name:"Boulatruelle",label:{normal:{formatter:"Boulatruelle",show:!1}},symbolSize:4,x:29.187843,y:-460.13132,attributes:{modularity_class:7},value:4,category:7},{id:"41",name:"Eponine",label:{normal:{formatter:"Eponine",show:!1}},symbolSize:31.428574,x:238.36697,y:-210.00926,attributes:{modularity_class:7},value:31.428574,category:7},{id:"42",name:"Anzelma",label:{normal:{formatter:"Anzelma",show:!1}},symbolSize:9.485714,x:189.69513,y:-346.50662,attributes:{modularity_class:7},value:9.485714,category:7},{id:"43",name:"Woman2",label:{normal:{formatter:"Woman2",show:!1}},symbolSize:9.485714,x:-187.00418,y:-145.02663,attributes:{modularity_class:6},value:9.485714,category:6},{id:"44",name:"MotherInnocent",label:{normal:{formatter:"MotherInnocent",show:!1}},symbolSize:6.742859,x:-252.99521,y:129.87549,attributes:{modularity_class:4},value:6.742859,category:4},{id:"45",name:"Gribier",label:{normal:{formatter:"Gribier",show:!1}},symbolSize:4,x:-296.07935,y:163.11964,attributes:{modularity_class:4},value:4,category:4},{id:"46",name:"Jondrette",label:{normal:{formatter:"Jondrette",show:!1}},symbolSize:4,x:550.3201,y:522.4031,attributes:{modularity_class:5},value:4,category:5},{id:"47",name:"MmeBurgon",label:{normal:{formatter:"MmeBurgon",show:!1}},symbolSize:6.742859,x:488.13535,y:356.8573,attributes:{modularity_class:5},value:6.742859,category:5},{id:"48",name:"Gavroche",label:{normal:{formatter:"Gavroche",show:!1}},symbolSize:31.600006,x:387.89572,y:110.462326,attributes:{modularity_class:8},value:61.600006,category:8},{id:"49",name:"Gillenormand",label:{normal:{formatter:"Gillenormand",show:!1}},symbolSize:20.457146,x:126.4831,y:68.10622,attributes:{modularity_class:6},value:20.457146,category:6},{id:"50",name:"Magnon",label:{normal:{formatter:"Magnon",show:!1}},symbolSize:6.742859,x:127.07365,y:-113.05923,attributes:{modularity_class:6},value:6.742859,category:6},{id:"51",name:"MlleGillenormand",label:{normal:{formatter:"MlleGillenormand",show:!1}},symbolSize:20.457146,x:162.63559,y:117.6565,attributes:{modularity_class:6},value:20.457146,category:6},{id:"52",name:"MmePontmercy",label:{normal:{formatter:"MmePontmercy",show:!1}},symbolSize:6.742859,x:353.66415,y:-205.89165,attributes:{modularity_class:6},value:6.742859,category:6},{id:"53",name:"MlleVaubois",label:{normal:{formatter:"MlleVaubois",show:!1}},symbolSize:4,x:165.43939,y:339.7736,attributes:{modularity_class:6},value:4,category:6},{id:"54",name:"LtGillenormand",label:{normal:{formatter:"LtGillenormand",show:!1}},symbolSize:12.228573,x:137.69348,y:196.1069,attributes:{modularity_class:6},value:12.228573,category:6},{id:"55",name:"Marius",label:{normal:{formatter:"Marius",show:!1}},symbolSize:33.37143,x:206.44687,y:-13.805411,attributes:{modularity_class:6},value:53.37143,category:6},{id:"56",name:"BaronessT",label:{normal:{formatter:"BaronessT",show:!1}},symbolSize:6.742859,x:194.82993,y:224.78036,attributes:{modularity_class:6},value:6.742859,category:6},{id:"57",name:"Mabeuf",label:{normal:{formatter:"Mabeuf",show:!1}},symbolSize:31.428574,x:597.6618,y:135.18481,attributes:{modularity_class:8},value:21.428574,category:8},{id:"58",name:"Enjolras",label:{normal:{formatter:"Enjolras",show:!1}},symbolSize:42.4,x:355.78366,y:-74.882454,attributes:{modularity_class:8},value:22.4,category:8},{id:"59",name:"Combeferre",label:{normal:{formatter:"Combeferre",show:!1}},symbolSize:21.428574,x:515.2961,y:-46.167564,attributes:{modularity_class:8},value:31.428574,category:8},{id:"60",name:"Prouvaire",label:{normal:{formatter:"Prouvaire",show:!1}},symbolSize:15.942856,x:614.29285,y:-69.3104,attributes:{modularity_class:8},value:25.942856,category:8},{id:"61",name:"Feuilly",label:{normal:{formatter:"Feuilly",show:!1}},symbolSize:21.428574,x:550.1917,y:-128.17537,attributes:{modularity_class:8},value:31.428574,category:8},{id:"62",name:"Courfeyrac",label:{normal:{formatter:"Courfeyrac",show:!1}},symbolSize:26.91429,x:436.17184,y:-12.7286825,attributes:{modularity_class:8},value:36.91429,category:8},{id:"63",name:"Bahorel",label:{normal:{formatter:"Bahorel",show:!1}},symbolSize:24.17143,x:602.55225,y:16.421427,attributes:{modularity_class:8},value:34.17143,category:8},{id:"64",name:"Bossuet",label:{normal:{formatter:"Bossuet",show:!1}},symbolSize:26.91429,x:455.81955,y:-115.45826,attributes:{modularity_class:8},value:36.91429,category:8},{id:"65",name:"Joly",label:{normal:{formatter:"Joly",show:!1}},symbolSize:24.17143,x:516.40784,y:47.242233,attributes:{modularity_class:8},value:34.17143,category:8},{id:"66",name:"Grantaire",label:{normal:{formatter:"Grantaire",show:!1}},symbolSize:28.685715,x:646.4313,y:-151.06331,attributes:{modularity_class:8},value:28.685715,category:8},{id:"67",name:"MotherPlutarch",label:{normal:{formatter:"MotherPlutarch",show:!1}},symbolSize:4,x:668.9568,y:204.65488,attributes:{modularity_class:8},value:4,category:8},{id:"68",name:"Gueulemer",label:{normal:{formatter:"Gueulemer",show:!1}},symbolSize:28.685715,x:78.4799,y:-347.15146,attributes:{modularity_class:7},value:28.685715,category:7},{id:"69",name:"Babet",label:{normal:{formatter:"Babet",show:!1}},symbolSize:28.685715,x:150.35959,y:-298.50797,attributes:{modularity_class:7},value:28.685715,category:7},{id:"70",name:"Claquesous",label:{normal:{formatter:"Claquesous",show:!1}},symbolSize:28.685715,x:137.3717,y:-410.2809,attributes:{modularity_class:7},value:28.685715,category:7},{id:"71",name:"Montparnasse",label:{normal:{formatter:"Montparnasse",show:!1}},symbolSize:25.942856,x:234.87747,y:-400.85983,attributes:{modularity_class:7},value:25.942856,category:7},{id:"72",name:"Toussaint",label:{normal:{formatter:"Toussaint",show:!1}},symbolSize:9.485714,x:40.942253,y:113.78272,attributes:{modularity_class:1},value:9.485714,category:1},{id:"73",name:"Child1",label:{normal:{formatter:"Child1",show:!1}},symbolSize:6.742859,x:437.939,y:291.58234,attributes:{modularity_class:8},value:6.742859,category:8},{id:"74",name:"Child2",label:{normal:{formatter:"Child2",show:!1}},symbolSize:6.742859,x:466.04922,y:283.3606,attributes:{modularity_class:8},value:6.742859,category:8},{id:"75",name:"Brujon",label:{normal:{formatter:"Brujon",show:!1}},symbolSize:20.457146,x:238.79364,y:-314.06345,attributes:{modularity_class:7},value:20.457146,category:7},{id:"76",name:"MmeHucheloup",label:{normal:{formatter:"MmeHucheloup",show:!1}},symbolSize:20.457146,x:712.18353,y:4.8131495,attributes:{modularity_class:8},value:20.457146,category:8}],links:[{id:"0",name:null,source:"1",target:"0"},{id:"1",name:null,source:"2",target:"0"},{id:"2",name:null,source:"3",target:"0"},{id:"3",name:null,source:"3",target:"2"},{id:"4",name:null,source:"4",target:"0"},{id:"5",name:null,source:"5",target:"0"},{id:"6",name:null,source:"6",target:"0"},{id:"7",name:null,source:"7",target:"0"},{id:"8",name:null,source:"8",target:"0"},{id:"9",name:null,source:"9",target:"0"},{id:"13",name:null,source:"11",target:"0"},{id:null,name:null,source:"11",target:"2"},{id:"11",name:null,source:"11",target:"3"},{id:"10",name:null,source:"11",target:"10"},{id:"14",name:null,source:"12",target:"11"},{id:"15",name:null,source:"13",target:"11"},{id:"16",name:null,source:"14",target:"11"},{id:"17",name:null,source:"15",target:"11"},{id:"18",name:null,source:"17",target:"16"},{id:"19",name:null,source:"18",target:"16"},{id:"20",name:null,source:"18",target:"17"},{id:"21",name:null,source:"19",target:"16"},{id:"22",name:null,source:"19",target:"17"},{id:"23",name:null,source:"19",target:"18"},{id:"24",name:null,source:"20",target:"16"},{id:"25",name:null,source:"20",target:"17"},{id:"26",name:null,source:"20",target:"18"},{id:"27",name:null,source:"20",target:"19"},{id:"28",name:null,source:"21",target:"16"},{id:"29",name:null,source:"21",target:"17"},{id:"30",name:null,source:"21",target:"18"},{id:"31",name:null,source:"21",target:"19"},{id:"32",name:null,source:"21",target:"20"},{id:"33",name:null,source:"22",target:"16"},{id:"34",name:null,source:"22",target:"17"},{id:"35",name:null,source:"22",target:"18"},{id:"36",name:null,source:"22",target:"19"},{id:"37",name:null,source:"22",target:"20"},{id:"38",name:null,source:"22",target:"21"},{id:"47",name:null,source:"23",target:"11"},{id:"46",name:null,source:"23",target:"12"},{id:"39",name:null,source:"23",target:"16"},{id:"40",name:null,source:"23",target:"17"},{id:"41",name:null,source:"23",target:"18"},{id:"42",name:null,source:"23",target:"19"},{id:"43",name:null,source:"23",target:"20"},{id:"44",name:null,source:"23",target:"21"},{id:"45",name:null,source:"23",target:"22"},{id:null,name:null,source:"24",target:"11"},{id:"48",name:null,source:"24",target:"23"},{id:"52",name:null,source:"25",target:"11"},{id:"51",name:null,source:"25",target:"23"},{id:"50",name:null,source:"25",target:"24"},{id:null,name:null,source:"26",target:"11"},{id:null,name:null,source:"26",target:"16"},{id:"53",name:null,source:"26",target:"24"},{id:"56",name:null,source:"26",target:"25"},{id:"57",name:null,source:"27",target:"11"},{id:"58",name:null,source:"27",target:"23"},{id:null,name:null,source:"27",target:"24"},{id:"59",name:null,source:"27",target:"25"},{id:"61",name:null,source:"27",target:"26"},{id:"62",name:null,source:"28",target:"11"},{id:"63",name:null,source:"28",target:"27"},{id:"66",name:null,source:"29",target:"11"},{id:"64",name:null,source:"29",target:"23"},{id:"65",name:null,source:"29",target:"27"},{id:"67",name:null,source:"30",target:"23"},{id:null,name:null,source:"31",target:"11"},{id:null,name:null,source:"31",target:"23"},{id:null,name:null,source:"31",target:"27"},{id:"68",name:null,source:"31",target:"30"},{id:"72",name:null,source:"32",target:"11"},{id:"73",name:null,source:"33",target:"11"},{id:"74",name:null,source:"33",target:"27"},{id:"75",name:null,source:"34",target:"11"},{id:"76",name:null,source:"34",target:"29"},{id:"77",name:null,source:"35",target:"11"},{id:null,name:null,source:"35",target:"29"},{id:"78",name:null,source:"35",target:"34"},{id:"82",name:null,source:"36",target:"11"},{id:"83",name:null,source:"36",target:"29"},{id:"80",name:null,source:"36",target:"34"},{id:"81",name:null,source:"36",target:"35"},{id:"87",name:null,source:"37",target:"11"},{id:"88",name:null,source:"37",target:"29"},{id:"84",name:null,source:"37",target:"34"},{id:"85",name:null,source:"37",target:"35"},{id:"86",name:null,source:"37",target:"36"},{id:"93",name:null,source:"38",target:"11"},{id:"94",name:null,source:"38",target:"29"},{id:"89",name:null,source:"38",target:"34"},{id:"90",name:null,source:"38",target:"35"},{id:"91",name:null,source:"38",target:"36"},{id:"92",name:null,source:"38",target:"37"},{id:"95",name:null,source:"39",target:"25"},{id:"96",name:null,source:"40",target:"25"},{id:"97",name:null,source:"41",target:"24"},{id:"98",name:null,source:"41",target:"25"},{id:"101",name:null,source:"42",target:"24"},{id:"100",name:null,source:"42",target:"25"},{id:"99",name:null,source:"42",target:"41"},{id:"102",name:null,source:"43",target:"11"},{id:"103",name:null,source:"43",target:"26"},{id:"104",name:null,source:"43",target:"27"},{id:null,name:null,source:"44",target:"11"},{id:"105",name:null,source:"44",target:"28"},{id:"107",name:null,source:"45",target:"28"},{id:"108",name:null,source:"47",target:"46"},{id:"112",name:null,source:"48",target:"11"},{id:"110",name:null,source:"48",target:"25"},{id:"111",name:null,source:"48",target:"27"},{id:"109",name:null,source:"48",target:"47"},{id:null,name:null,source:"49",target:"11"},{id:"113",name:null,source:"49",target:"26"},{id:null,name:null,source:"50",target:"24"},{id:"115",name:null,source:"50",target:"49"},{id:"119",name:null,source:"51",target:"11"},{id:"118",name:null,source:"51",target:"26"},{id:"117",name:null,source:"51",target:"49"},{id:null,name:null,source:"52",target:"39"},{id:"120",name:null,source:"52",target:"51"},{id:"122",name:null,source:"53",target:"51"},{id:"125",name:null,source:"54",target:"26"},{id:"124",name:null,source:"54",target:"49"},{id:"123",name:null,source:"54",target:"51"},{id:"131",name:null,source:"55",target:"11"},{id:"132",name:null,source:"55",target:"16"},{id:"133",name:null,source:"55",target:"25"},{id:null,name:null,source:"55",target:"26"},{id:"128",name:null,source:"55",target:"39"},{id:"134",name:null,source:"55",target:"41"},{id:"135",name:null,source:"55",target:"48"},{id:"127",name:null,source:"55",target:"49"},{id:"126",name:null,source:"55",target:"51"},{id:"129",name:null,source:"55",target:"54"},{id:"136",name:null,source:"56",target:"49"},{id:"137",name:null,source:"56",target:"55"},{id:null,name:null,source:"57",target:"41"},{id:null,name:null,source:"57",target:"48"},{id:"138",name:null,source:"57",target:"55"},{id:"145",name:null,source:"58",target:"11"},{id:null,name:null,source:"58",target:"27"},{id:"142",name:null,source:"58",target:"48"},{id:"141",name:null,source:"58",target:"55"},{id:"144",name:null,source:"58",target:"57"},{id:"148",name:null,source:"59",target:"48"},{id:"147",name:null,source:"59",target:"55"},{id:null,name:null,source:"59",target:"57"},{id:"146",name:null,source:"59",target:"58"},{id:"150",name:null,source:"60",target:"48"},{id:"151",name:null,source:"60",target:"58"},{id:"152",name:null,source:"60",target:"59"},{id:"153",name:null,source:"61",target:"48"},{id:"158",name:null,source:"61",target:"55"},{id:"157",name:null,source:"61",target:"57"},{id:"154",name:null,source:"61",target:"58"},{id:"156",name:null,source:"61",target:"59"},{id:"155",name:null,source:"61",target:"60"},{id:"164",name:null,source:"62",target:"41"},{id:"162",name:null,source:"62",target:"48"},{id:"159",name:null,source:"62",target:"55"},{id:null,name:null,source:"62",target:"57"},{id:"160",name:null,source:"62",target:"58"},{id:"161",name:null,source:"62",target:"59"},{id:null,name:null,source:"62",target:"60"},{id:"165",name:null,source:"62",target:"61"},{id:null,name:null,source:"63",target:"48"},{id:"174",name:null,source:"63",target:"55"},{id:null,name:null,source:"63",target:"57"},{id:null,name:null,source:"63",target:"58"},{id:"167",name:null,source:"63",target:"59"},{id:null,name:null,source:"63",target:"60"},{id:"172",name:null,source:"63",target:"61"},{id:"169",name:null,source:"63",target:"62"},{id:"184",name:null,source:"64",target:"11"},{id:null,name:null,source:"64",target:"48"},{id:"175",name:null,source:"64",target:"55"},{id:"183",name:null,source:"64",target:"57"},{id:"179",name:null,source:"64",target:"58"},{id:"182",name:null,source:"64",target:"59"},{id:"181",name:null,source:"64",target:"60"},{id:"180",name:null,source:"64",target:"61"},{id:"176",name:null,source:"64",target:"62"},{id:"178",name:null,source:"64",target:"63"},{id:"187",name:null,source:"65",target:"48"},{id:"194",name:null,source:"65",target:"55"},{id:"193",name:null,source:"65",target:"57"},{id:null,name:null,source:"65",target:"58"},{id:"192",name:null,source:"65",target:"59"},{id:null,name:null,source:"65",target:"60"},{id:"190",name:null,source:"65",target:"61"},{id:"188",name:null,source:"65",target:"62"},{id:"185",name:null,source:"65",target:"63"},{id:"186",name:null,source:"65",target:"64"},{id:"200",name:null,source:"66",target:"48"},{id:"196",name:null,source:"66",target:"58"},{id:"197",name:null,source:"66",target:"59"},{id:"203",name:null,source:"66",target:"60"},{id:"202",name:null,source:"66",target:"61"},{id:"198",name:null,source:"66",target:"62"},{id:"201",name:null,source:"66",target:"63"},{id:"195",name:null,source:"66",target:"64"},{id:"199",name:null,source:"66",target:"65"},{id:"204",name:null,source:"67",target:"57"},{id:null,name:null,source:"68",target:"11"},{id:null,name:null,source:"68",target:"24"},{id:"205",name:null,source:"68",target:"25"},{id:"208",name:null,source:"68",target:"27"},{id:null,name:null,source:"68",target:"41"},{id:"209",name:null,source:"68",target:"48"},{id:"213",name:null,source:"69",target:"11"},{id:"214",name:null,source:"69",target:"24"},{id:"211",name:null,source:"69",target:"25"},{id:null,name:null,source:"69",target:"27"},{id:"217",name:null,source:"69",target:"41"},{id:"216",name:null,source:"69",target:"48"},{id:"212",name:null,source:"69",target:"68"},{id:"221",name:null,source:"70",target:"11"},{id:"222",name:null,source:"70",target:"24"},{id:"218",name:null,source:"70",target:"25"},{id:"223",name:null,source:"70",target:"27"},{id:"224",name:null,source:"70",target:"41"},{id:"225",name:null,source:"70",target:"58"},{id:"220",name:null,source:"70",target:"68"},{id:"219",name:null,source:"70",target:"69"},{id:"230",name:null,source:"71",target:"11"},{id:"233",name:null,source:"71",target:"25"},{id:"226",name:null,source:"71",target:"27"},{id:"232",name:null,source:"71",target:"41"},{id:null,name:null,source:"71",target:"48"},{id:"228",name:null,source:"71",target:"68"},{id:"227",name:null,source:"71",target:"69"},{id:"229",name:null,source:"71",target:"70"},{id:"236",name:null,source:"72",target:"11"},{id:"234",name:null,source:"72",target:"26"},{id:"235",name:null,source:"72",target:"27"},{id:"237",name:null,source:"73",target:"48"},{id:"238",name:null,source:"74",target:"48"},{id:"239",name:null,source:"74",target:"73"},{id:"242",name:null,source:"75",target:"25"},{id:"244",name:null,source:"75",target:"41"},{id:null,name:null,source:"75",target:"48"},{id:"241",name:null,source:"75",target:"68"},{id:"240",name:null,source:"75",target:"69"},{id:"245",name:null,source:"75",target:"70"},{id:"246",name:null,source:"75",target:"71"},{id:"252",name:null,source:"76",target:"48"},{id:"253",name:null,source:"76",target:"58"},{id:"251",name:null,source:"76",target:"62"},{id:"250",name:null,source:"76",target:"63"},{id:"247",name:null,source:"76",target:"64"},{id:"248",name:null,source:"76",target:"65"},{id:"249",name:null,source:"76",target:"66"}],categories:[{name:"Category 0"},{name:"Category 1"},{name:"Category 2"},{name:"Category 3"},{name:"Category 4"},{name:"Category 5"},{name:"Category 6"},{name:"Category 7"},{name:"Category 8"}],label:{normal:{position:"right"}},symbol:"circle",itemStyle:{normal:{opacity:.8}},lineStyle:{normal:{curveness:.3}}}]},{title:{text:"Heatmap"},xAxis:{type:"category",data:["12a","1a","2a","3a","4a","5a","6a","7a","8a","9a","10a","11a","12p"]},yAxis:{type:"category",data:["Sat","Fri","Thu","Wed","Tue","Mon","Sun"]},visualMap:{min:1,max:10,calculable:!0},grid:{left:90,right:20,top:40,bottom:40},series:[{name:"Heat",type:"heatmap",data:[[0,0,5],[0,1,1],[0,2,3],[0,3,2],[0,4,1],[0,5,4],[0,6,6],[0,7,6],[0,8,4],[0,9,7],[0,10,0],[0,11,2],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,5],[1,5,7],[1,6,9],[1,7,4],[1,8,7],[1,9,9],[1,10,5],[1,11,2],[2,0,7],[2,1,6],[2,2,5],[2,3,5],[2,4,9],[2,5,8],[2,6,0],[2,7,0],[2,8,0],[2,9,4],[2,10,3],[2,11,2],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,3],[3,5,0],[3,6,4],[3,7,5],[3,8,1],[3,9,3],[3,10,5],[3,11,4],[3,12,7],[4,0,6],[4,1,3],[4,2,6],[4,3,0],[4,4,5],[4,5,1],[4,6,0],[4,7,0],[4,8,5],[4,9,2],[4,10,4],[4,11,4],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,8],[5,5,4],[5,6,6],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[6,0,1],[6,1,0],[6,2,8],[6,3,6],[6,4,2],[6,5,0],[6,6,0],[6,7,8],[6,8,5],[6,9,10],[6,10,1],[6,11,0]].map(function(e){return[e[1],e[0],e[2]||"-"]}),label:{normal:{show:!0}}}]},{title:{text:"Tree"},series:[{type:"treemap",label:{show:!0,formatter:"{b}"},roam:!1,data:function(){for(var e=[],a=0;a<d;++a){for(var t=[],r=0,l=0,o=Math.ceil(5*Math.random());l<o;++l){for(var n=[],i=0,s=0,m=Math.ceil(3*Math.random());s<m;++s){var u=Math.ceil(100*Math.random());n.push({value:u,name:a+1+"-"+(l+1)+"-"+(s+1),path:a+1+"/"+(a+1)+"-"+(l+1)+"/"+(a+1)+"-"+(l+1)+"-"+(s+1)}),i+=u}t.push({value:i,name:a+1+"-"+(l+1),path:a+1+"/"+(a+1)+"-"+(l+1),children:n}),r+=i}e.push({value:r,name:""+(a+1),path:""+(a+1),children:t})}return e}()}]}],h=0;h<g.length;++h)g[h].legend=g[h].legend||l,g[h].tooltip=g[h].tooltip||n,g[h].grid=g[h].grid||s;return g}Vue.component("config-color-list",VueColorListConfig),function(){var o=1,e=[{name:"vintage",background:"#fef8ef",theme:["#d87c7c","#919e8b","#d7ab82","#6e7074","#61a0a8","#efa18d","#787464","#cc7e63","#724e58","#4b565b"]},{name:"dark",background:"#333",theme:["#dd6b66","#759aa0","#e69d87","#8dc1a9","#ea7e53","#eedd78","#73a373","#73b9bc","#7289ab","#91ca8c","#f49f42"]},{name:"westeros",background:"transparent",theme:["#516b91","#59c4e6","#edafda","#93b7e3","#a5e7f0","#cbb0e3"]},{name:"essos",background:"rgba(242,234,191,0.15)",theme:["#893448","#d95850","#eb8146","#ffb248","#f2d643","#ebdba4"]},{name:"wonderland",background:"transparent",theme:["#4ea397","#22c3aa","#7bd9a5","#d0648a","#f58db2","#f2b3c9"]},{name:"walden",background:"rgba(252,252,252,0)",theme:["#3fb1e3","#6be6c1","#626c91","#a0a7e6","#c4ebad","#96dee8"]},{name:"chalk",background:"#293441",theme:["#fc97af","#87f7cf","#f7f494","#72ccff","#f7c5a0","#d4a4eb","#d2f5a6","#76f2f2"]},{name:"infographic",background:"transparent",theme:["#C1232B","#27727B","#FCCE10","#E87C25","#B5C334","#FE8463","#9BCA63","#FAD860","#F3A43B","#60C0DD","#D7504B","#C6E579","#F4E001","#F0805A","#26C0C0"]},{name:"macarons",background:"transparent",theme:["#2ec7c9","#b6a2de","#5ab1ef","#ffb980","#d87a80","#8d98b3","#e5cf0d","#97b552","#95706d","#dc69aa","#07a2a4","#9a7fd1","#588dd5","#f5994e","#c05050","#59678c","#c9ab00","#7eb00a","#6f5553","#c14089"]},{name:"roma",background:"transparent",theme:["#E01F54","#001852","#f5e8c8","#b8d2c7","#c6b38e","#a4d8c2","#f3d999","#d3758f","#dcc392","#2e4783","#82b6e9","#ff6347","#a092f1","#0a915d","#eaf889","#6699FF","#ff6666","#3cb371","#d5b158","#38b6b6"]},{name:"shine",background:"transparent",theme:["#c12e34","#e6b600","#0098d9","#2b821d","#005eaa","#339ca8","#cda819","#32a487"]},{name:"purple-passion",background:"rgba(91,92,110,1)",theme:["#8a7ca8","#e098c7","#8fd3e8","#71669e","#cc70af","#7cb4cc"]},{name:"halloween",background:"rgba(51,51,51,1)",theme:["#ff715e","#ffaf51","#ffee51","#797fba","#715c87"]}],n={seriesCnt:3,backgroundColor:"rgba(0, 0, 0, 0)",titleColor:"#333",subtitleColor:"#aaa",textColorShow:!1,textColor:"#333",markTextColor:"#eee",color:["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],borderColor:"#ccc",borderWidth:0,visualMapColor:["#bf444c","#d88273","#f6efa6"],legendTextColor:"#333",kColor:"#c23531",kColor0:"#314656",kBorderColor:"#c23531",kBorderColor0:"#314656",kBorderWidth:1,lineWidth:2,symbolSize:4,symbol:"emptyCircle",symbolBorderWidth:1,lineSmooth:!1,graphLineWidth:1,graphLineColor:"#aaa",mapLabelColor:"#000",mapLabelColorE:"rgb(100,0,0)",mapBorderColor:"#444",mapBorderColorE:"#444",mapBorderWidth:.5,mapBorderWidthE:1,mapAreaColor:"#eee",mapAreaColorE:"rgba(255,215,0,0.8)",axes:function(){for(var e=["all","category","value","log","time"],a=["General","Category","Value","Logarithm","Time"],t=[],r=0;r<e.length;++r)t.push({type:e[r],name:a[r]+" Axis",axisLineShow:!0,axisLineColor:"#333",axisTickShow:!0,axisTickColor:"#333",axisLabelShow:!0,axisLabelColor:"#333",splitLineShow:"category"!==e[r],splitLineColor:["#ccc"],splitAreaShow:!1,splitAreaColor:["rgba(250,250,250,0.3)","rgba(200,200,200,0.3)"]});return t}(),axisSeperateSetting:!0,axis:null,toolboxColor:"#999",toolboxEmphasisColor:"#666",tooltipAxisColor:"#ccc",tooltipAxisWidth:1,timelineLineColor:"#293c55",timelineLineWidth:1,timelineItemColor:"#293c55",timelineItemColorE:"#a9334c",timelineCheckColor:"#e43c59",timelineCheckBorderColor:"rgba(194,53,49, 0.5)",timelineItemBorderWidth:1,timelineControlColor:"#293c55",timelineControlBorderColor:"#293c55",timelineControlBorderWidth:.5,timelineLabelColor:"#293c55",datazoomBackgroundColor:"rgba(47,69,84,0)",datazoomDataColor:"rgba(47,69,84,0.3)",datazoomFillColor:"rgba(167,183,204,0.4)",datazoomHandleColor:"#a7b7cc",datazoomHandleWidth:"100",datazoomLabelColor:"#333"};n.axis=[n.axes[0]];for(var a=_.debounce(l,200),t=0;t<e.length;++t)p(t,!0);var i,s=new Vue({el:"#content",data:{theme:f(n),themeName:"customed",charts:[],options:[],isPauseChartUpdating:!1,copyKbd:0<navigator.userAgent.indexOf("Mac OS X")?"cmd":"ctrl",downloadable:!g()&&!h(),preDefinedThemes:e,loadedThemes:[],chartDisplay:{background:"#fff",title:"#000"}},methods:{updateCharts:l,updateSymbol:function(e){s.theme.symbol=e},selectPreDefinedTheme:function(e){for(var a=0;a<s.loadedThemes.length;++a)if(s.loadedThemes[a].id===e)return void r(s.loadedThemes[a].data);p(e,!1)},useTheme:function(){_hmt.push(["_trackEvent","theme-builder","useTheme",s.themeName]),$("#js-code").text(y()),$("#json-code").text(JSON.stringify(m(!0),null,"    ")),hljs.highlightBlock($("#js-code")[0]),hljs.highlightBlock($("#json-code")[0])},downloadThemeJson:function(){_hmt.push(["_trackEvent","theme-builder","download","json"]),d(m(!0),(s.themeName||"customed")+".json")},downloadThemeJs:function(){var e,a;_hmt.push(["_trackEvent","theme-builder","download","js"]),e=y(),a=(s.themeName||"customed")+".js",c(e,a,"js")},copyThemeJson:function(){b("json")},copyThemeJs:function(){b("js")},newTheme:function(){this.$set("theme",f(n)),this.$set("themeName","customed"),s.axisSeperateSettingChanges()},exportJson:function(){var e=f(s.theme);delete e.axis,d({version:o,themeName:s.themeName,theme:e},(s.themeName||"customed")+".project.json")},importJson:function(){$("#input-file").trigger("click")},importFileChanged:function(e){var a,t;e.target.files&&(".json"===(a=e.target.files[0]).name.slice(a.name.lastIndexOf("."))?((t=new FileReader).onload=function(){r(this.result)},t.onerror=function(e){alert("Fail to open the file."),console.error(e)},t.readAsText(a),$("#input-file").val("")):alert("Illegal extension! Please use *.json files from our website! "))},axisSeperateSettingChanges:function(){s.theme.axisSeperateSetting?s.theme.axis=s.theme.axes:s.theme.axis=[s.theme.axes[0]]}}});function r(e){try{var a=JSON.parse(e);if(void 0===a.themeName&&void 0===a.version)return void alert("Please use the exported JSON configuration files from our site instead of downloaded theme file. ");if(s.$set("themeName",a.themeName||"customed"),a.version<o){var t=[],r=a.theme;for(var l in n)"axis"!==l&&(void 0!==a.theme[l]?r.attr=a.theme[l]:t.push(a.theme.attr));0<t.length?alert("The imported theme have lower version, "+t.length+" attributes have not been set. The default values are now used. "):console.warn("The imported theme have lower version, some attributes have not been set.")}s.$set("theme",a.theme),s.axisSeperateSettingChanges()}catch(e){alert("Illegal JSON format! Please use the exported JSON configuration files from our site. "),console.error(e)}}function m(e){var a="path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072 c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363 c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417 c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827 C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12.646,2.053,18.738c4.593,22.785,15.398,41.367,32.558,55.344 c15.43,12.773,29.901,18.023,43.362,16.981c7.074-0.561,13.624-3.977,19.685-10.192c10.534,5.49,20.391,8.217,29.561,8.203 c9.856-0.012,20.236-2.953,31.125-8.898c6.227,6.692,12.966,10.346,20.211,10.933c13.795,1.073,28.614-4.111,44.377-16.84 c17.49-14.104,28.043-32.79,31.796-55.485c0.836-5.624,1.272-11.292,1.272-16.966C255.998,115.814,249.707,96.601,237.062,81.761z  M54.795,97.7l40.661,14.496c-4.402,8.811-10.766,13.219-19.06,13.219c-2.542,0-4.917-0.419-7.122-1.274 C58.103,118.38,53.263,109.572,54.795,97.7z M150.613,185.396l-9.156-8.389l-7.619,12.951c-3.391,0.341-6.615,0.514-9.665,0.514 c-4.401,0-8.635-0.263-12.708-0.777l-8.634-14.973l-9.151,9.909c-4.91-2.717-9.15-5.856-12.708-9.413 c-8.81-8.295-13.384-17.959-13.727-28.97c2.877,1.692,7.427,3.461,13.675,5.308l10.636,13.629l9.44-9.852 c4.734,0.702,9.234,1.12,13.466,1.275l10.689,11.498l9.671-11.949c3.559-0.173,7.285-0.515,11.182-1.01l9.924,10.159l10.933-14.227 c5.931-1.351,11.196-2.798,15.771-4.323C179.747,163.538,169.068,176.414,150.613,185.396z M175.258,124.907 c-2.209,0.849-4.66,1.273-7.369,1.273c-8.134,0-14.489-4.415-19.052-13.224l40.905-14.477 C191.105,110.331,186.273,119.141,175.258,124.907z",t={itemStyle:{normal:{borderWidth:s.theme.symbolBorderWidth}},lineStyle:{normal:{width:s.theme.lineWidth}},symbolSize:s.theme.symbolSize,symbol:s.theme.symbol,smooth:s.theme.lineSmooth},r={itemStyle:{normal:{borderWidth:s.theme.borderWidth,borderColor:s.theme.borderColor},emphasis:{borderWidth:s.theme.borderWidth,borderColor:s.theme.borderColor}}};"halloween"===s.themeName&&(t.symbol=a,r.symbol=a);var l,o={itemStyle:{normal:{areaColor:s.theme.mapAreaColor,borderColor:s.theme.mapBorderColor,borderWidth:s.theme.mapBorderWidth},emphasis:{areaColor:s.theme.mapAreaColorE,borderColor:s.theme.mapBorderColorE,borderWidth:s.theme.mapBorderWidthE}},label:{normal:{textStyle:{color:s.theme.mapLabelColor}},emphasis:{textStyle:{color:s.theme.mapLabelColorE}}}};return{color:s.theme.color,backgroundColor:e?s.theme.backgroundColor:"transparent",textStyle:s.theme.textColorShow?{color:s.theme.textColor}:{},title:{textStyle:{color:s.theme.titleColor},subtextStyle:{color:s.theme.subtitleColor}},line:t,radar:t,bar:{itemStyle:{normal:{barBorderWidth:s.theme.borderWidth,barBorderColor:s.theme.borderColor},emphasis:{barBorderWidth:s.theme.borderWidth,barBorderColor:s.theme.borderColor}}},pie:r,scatter:r,boxplot:r,parallel:r,sankey:r,funnel:r,gauge:r,candlestick:{itemStyle:{normal:{color:s.theme.kColor,color0:s.theme.kColor0,borderColor:s.theme.kBorderColor,borderColor0:s.theme.kBorderColor0,borderWidth:s.theme.kBorderWidth}}},graph:((l=f(t)).color=s.theme.color,l.lineStyle={normal:{width:s.theme.graphLineWidth,color:s.theme.graphLineColor}},l.label={normal:{textStyle:{color:s.theme.markTextColor}}},l.itemStyle.normal.borderWidth=s.theme.borderWidth,l.itemStyle.normal.borderColor=s.theme.borderColor,l),map:o,geo:o,categoryAxis:n(1),valueAxis:n(2),logAxis:n(3),timeAxis:n(4),toolbox:{iconStyle:{normal:{borderColor:s.theme.toolboxColor},emphasis:{borderColor:s.theme.toolboxEmphasisColor}}},legend:{textStyle:{color:s.theme.legendTextColor}},tooltip:{axisPointer:{lineStyle:{color:s.theme.tooltipAxisColor,width:s.theme.tooltipAxisWidth},crossStyle:{color:s.theme.tooltipAxisColor,width:s.theme.tooltipAxisWidth}}},timeline:{lineStyle:{color:s.theme.timelineLineColor,width:s.theme.timelineLineWidth},itemStyle:{normal:{color:s.theme.timelineItemColor,borderWidth:s.theme.timelineItemBorderWidth},emphasis:{color:s.theme.timelineItemColorE}},controlStyle:{normal:{color:s.theme.timelineControlColor,borderColor:s.theme.timelineControlBorderColor,borderWidth:s.theme.timelineControlBorderWidth},emphasis:{color:s.theme.timelineControlColor,borderColor:s.theme.timelineControlBorderColor,borderWidth:s.theme.timelineControlBorderWidth}},checkpointStyle:{color:s.theme.timelineCheckColor,borderColor:s.theme.timelineCheckBorderColor},label:{normal:{textStyle:{color:s.theme.timelineLabelColor}},emphasis:{textStyle:{color:s.theme.timelineLabelColor}}}},visualMap:{color:s.theme.visualMapColor},dataZoom:{backgroundColor:s.theme.datazoomBackgroundColor,dataBackgroundColor:s.theme.datazoomDataColor,fillerColor:s.theme.datazoomFillColor,handleColor:s.theme.datazoomHandleColor,handleSize:s.theme.datazoomHandleWidth+"%",textStyle:{color:s.theme.datazoomLabelColor}},markPoint:{label:{normal:{textStyle:{color:s.theme.markTextColor}},emphasis:{textStyle:{color:s.theme.markTextColor}}}}};function n(e){return s.theme.axisSeperateSetting||(e=0),{axisLine:{show:s.theme.axes[e].axisLineShow,lineStyle:{color:s.theme.axes[e].axisLineColor}},axisTick:{show:s.theme.axes[e].axisTickShow,lineStyle:{color:s.theme.axes[e].axisTickColor}},axisLabel:{show:s.theme.axes[e].axisLabelShow,textStyle:{color:s.theme.axes[e].axisLabelColor}},splitLine:{show:s.theme.axes[e].splitLineShow,lineStyle:{color:s.theme.axes[e].splitLineColor}},splitArea:{show:s.theme.axes[e].splitAreaShow,areaStyle:{color:s.theme.axes[e].splitAreaColor}}}}}function u(e,a,t){var r,l,o=$(".ec-panel").eq(e);o.length&&((r=echarts.getInstanceByDom(o[0]))&&r.dispose(),(r=echarts.init(o[0],"customed")).setOption(a[e]),(l=e+1)===$(".ec-panel").length&&(l=0),l!==t&&(i=setTimeout(function(){u(l,a,t)},150)))}function l(){if(!s.isPauseChartUpdating){echarts.registerTheme("customed",m(!1));var e=getOptions(s);i&&clearTimeout(i);for(var a=$(".ec-panel").length,t=!1,r=0;r<a;++r){var l=$(".ec-panel").eq(r);if(0<l.offset().top+l.height()){u(r,e,r),t=!0;break}}t||u(0,e),s.chartDisplay.background=s.theme.backgroundColor,s.chartDisplay.title=s.theme.titleColor}}function d(e,a){c(JSON.stringify(e,null,"    "),a,"json")}function c(a,e,t){if(0<navigator.userAgent.indexOf("Safari")&&navigator.userAgent.indexOf("Chrome")<0)window.open("data:text/plain;charset=utf-8,"+encodeURIComponent(a));else try{var r=new Blob([a],{type:t});saveAs(r,e)}catch(e){console.error(e),window.open("data:text/plain;charset=utf-8,"+encodeURIComponent(a))}}function g(){return 0<navigator.userAgent.indexOf("MSIE")}function h(){return 0<navigator.userAgent.indexOf("Trident")}function y(){var e=(e=JSON.stringify(m(!0),null,"    ")).split("\n").join("\n    ");return"(function (root, factory) {\n    if (typeof define === 'function' && define.amd) {\n        // AMD. Register as an anonymous module.\n        define(['exports', 'echarts'], factory);\n    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {\n        // CommonJS\n        factory(exports, require('echarts'));\n    } else {\n        // Browser globals\n        factory({}, root.echarts);\n    }\n}(this, function (exports, echarts) {\n    var log = function (msg) {\n        if (typeof console !== 'undefined') {\n            console && console.error && console.error(msg);\n        }\n    };\n    if (!echarts) {\n        log('ECharts is not Loaded');\n        return;\n    }\n    echarts.registerTheme('"+s.themeName+"', "+e+");\n}));\n"}function b(e){var a,t;function r(e){$("#"+e).fadeIn(),setTimeout(function(){$("#"+e).fadeOut()},1e4)}window.getSelection?((t=document.createRange()).selectNode($("#"+e+"-code")[0]),(a=window.getSelection()).removeAllRanges(),a.addRange(t)):document.selection&&((t=document.body.createTextRange()).moveToElementText($("#"+e+"-code")[0]),t.select()),$(".code-btn label").hide(),g()||h()||!document.execCommand("copy")?r("copy-"+e+"-fail"):(r("copy-"+e+"-success"),window.getSelection?window.getSelection().removeAllRanges():document.selection.empty())}function f(e){return $.extend(!0,{},e)}function p(a,t){$.ajax({url:"./theme-builder/themes/"+e[a].name+".json",dataType:"text",success:function(e){s.loadedThemes.push({id:a,data:e}),t||r(e)}})}s.$watch("theme",a,{deep:!0}),s.axisSeperateSettingChanges()}();
\ No newline at end of file
diff --git a/en/theme-builder/themes/chalk.json b/en/theme-builder/themes/chalk.json
index 54ab33c..eb59ac5 100644
--- a/en/theme-builder/themes/chalk.json
+++ b/en/theme-builder/themes/chalk.json
@@ -145,7 +145,7 @@
         ],
         "axisSeperateSetting": false,
         "toolboxColor": "#999999",
-        "toolboxEmpasisColor": "#666666",
+        "toolboxEmphasisColor": "#666666",
         "tooltipAxisColor": "#cccccc",
         "tooltipAxisWidth": 1,
         "timelineLineColor": "#87f7cf",
@@ -166,4 +166,4 @@
         "datazoomHandleWidth": "100",
         "datazoomLabelColor": "#333333"
     }
-}
\ No newline at end of file
+}
diff --git a/en/theme-builder/themes/dark.json b/en/theme-builder/themes/dark.json
index 07f8f2a..25dc579 100644
--- a/en/theme-builder/themes/dark.json
+++ b/en/theme-builder/themes/dark.json
@@ -148,7 +148,7 @@
         ],
         "axisSeperateSetting": false,
         "toolboxColor": "#999",
-        "toolboxEmpasisColor": "#666",
+        "toolboxEmphasisColor": "#666",
         "tooltipAxisColor": "#eeeeee",
         "tooltipAxisWidth": "1",
         "timelineLineColor": "#eeeeee",
@@ -169,4 +169,4 @@
         "datazoomHandleWidth": "100",
         "datazoomLabelColor": "#eeeeee"
     }
-}
\ No newline at end of file
+}
diff --git a/en/theme-builder/themes/default.json b/en/theme-builder/themes/default.json
index 8401f30..d4d2ac8 100644
--- a/en/theme-builder/themes/default.json
+++ b/en/theme-builder/themes/default.json
@@ -149,7 +149,7 @@
         ],
         "axisSeperateSetting": true,
         "toolboxColor": "#999999",
-        "toolboxEmpasisColor": "#666666",
+        "toolboxEmphasisColor": "#666666",
         "tooltipAxisColor": "#cccccc",
         "tooltipAxisWidth": 1,
         "timelineLineColor": "#293c55",
diff --git a/en/theme-builder/themes/essos.json b/en/theme-builder/themes/essos.json
index 4dad4b7..ece0814 100644
--- a/en/theme-builder/themes/essos.json
+++ b/en/theme-builder/themes/essos.json
@@ -147,7 +147,7 @@
         ],
         "axisSeperateSetting": false,
         "toolboxColor": "#999",
-        "toolboxEmpasisColor": "#666",
+        "toolboxEmphasisColor": "#666",
         "tooltipAxisColor": "#ccc",
         "tooltipAxisWidth": 1,
         "timelineLineColor": "#893448",
@@ -168,4 +168,4 @@
         "datazoomHandleWidth": "100",
         "datazoomLabelColor": "#333"
     }
-}
\ No newline at end of file
+}
diff --git a/en/theme-builder/themes/halloween.json b/en/theme-builder/themes/halloween.json
index 6c32f62..7766c49 100644
--- a/en/theme-builder/themes/halloween.json
+++ b/en/theme-builder/themes/halloween.json
@@ -143,7 +143,7 @@
         ],
         "axisSeperateSetting": false,
         "toolboxColor": "#999999",
-        "toolboxEmpasisColor": "#666666",
+        "toolboxEmphasisColor": "#666666",
         "tooltipAxisColor": "#cccccc",
         "tooltipAxisWidth": 1,
         "timelineLineColor": "#ffaf51",
@@ -164,4 +164,4 @@
         "datazoomHandleWidth": "100",
         "datazoomLabelColor": "#999999"
     }
-}
\ No newline at end of file
+}
diff --git a/en/theme-builder/themes/infographic.json b/en/theme-builder/themes/infographic.json
index 4f564ec..2268bbd 100644
--- a/en/theme-builder/themes/infographic.json
+++ b/en/theme-builder/themes/infographic.json
@@ -152,7 +152,7 @@
         ],
         "axisSeperateSetting": true,
         "toolboxColor": "#c1232b",
-        "toolboxEmpasisColor": "#e87c25",
+        "toolboxEmphasisColor": "#e87c25",
         "tooltipAxisColor": "#27727b",
         "tooltipAxisWidth": 1,
         "timelineLineColor": "#293c55",
diff --git a/en/theme-builder/themes/macarons.json b/en/theme-builder/themes/macarons.json
index 4122f30..d695cee 100644
--- a/en/theme-builder/themes/macarons.json
+++ b/en/theme-builder/themes/macarons.json
@@ -156,7 +156,7 @@
         ],
         "axisSeperateSetting": true,
         "toolboxColor": "#2ec7c9",
-        "toolboxEmpasisColor": "#18a4a6",
+        "toolboxEmphasisColor": "#18a4a6",
         "tooltipAxisColor": "#008acd",
         "tooltipAxisWidth": "1",
         "timelineLineColor": "#008acd",
diff --git a/en/theme-builder/themes/purple-passion.json b/en/theme-builder/themes/purple-passion.json
index 95862bb..44a7fb2 100644
--- a/en/theme-builder/themes/purple-passion.json
+++ b/en/theme-builder/themes/purple-passion.json
@@ -145,7 +145,7 @@
         ],
         "axisSeperateSetting": false,
         "toolboxColor": "#999",
-        "toolboxEmpasisColor": "#666",
+        "toolboxEmphasisColor": "#666",
         "tooltipAxisColor": "#ccc",
         "tooltipAxisWidth": 1,
         "timelineLineColor": "#8fd3e8",
@@ -166,4 +166,4 @@
         "datazoomHandleWidth": "100",
         "datazoomLabelColor": "#333"
     }
-}
\ No newline at end of file
+}
diff --git a/en/theme-builder/themes/roma.json b/en/theme-builder/themes/roma.json
index 23796c8..ab258c9 100644
--- a/en/theme-builder/themes/roma.json
+++ b/en/theme-builder/themes/roma.json
@@ -157,7 +157,7 @@
         ],
         "axisSeperateSetting": true,
         "toolboxColor": "#999999",
-        "toolboxEmpasisColor": "#666666",
+        "toolboxEmphasisColor": "#666666",
         "tooltipAxisColor": "#cccccc",
         "tooltipAxisWidth": 1,
         "timelineLineColor": "#293c55",
diff --git a/en/theme-builder/themes/shine.json b/en/theme-builder/themes/shine.json
index 7f2cd7d..9c30675 100644
--- a/en/theme-builder/themes/shine.json
+++ b/en/theme-builder/themes/shine.json
@@ -139,7 +139,7 @@
         ],
         "axisSeperateSetting": true,
         "toolboxColor": "#06467c",
-        "toolboxEmpasisColor": "#4187c2",
+        "toolboxEmphasisColor": "#4187c2",
         "tooltipAxisColor": "#cccccc",
         "tooltipAxisWidth": 1,
         "timelineLineColor": "#005eaa",
diff --git a/en/theme-builder/themes/vintage.json b/en/theme-builder/themes/vintage.json
index ae4477c..2e29b8f 100644
--- a/en/theme-builder/themes/vintage.json
+++ b/en/theme-builder/themes/vintage.json
@@ -148,7 +148,7 @@
         ],
         "axisSeperateSetting": true,
         "toolboxColor": "#999999",
-        "toolboxEmpasisColor": "#666666",
+        "toolboxEmphasisColor": "#666666",
         "tooltipAxisColor": "#cccccc",
         "tooltipAxisWidth": 1,
         "timelineLineColor": "#293c55",
diff --git a/en/theme-builder/themes/walden.json b/en/theme-builder/themes/walden.json
index a16cf09..ce6f8ee 100644
--- a/en/theme-builder/themes/walden.json
+++ b/en/theme-builder/themes/walden.json
@@ -143,7 +143,7 @@
         ],
         "axisSeperateSetting": false,
         "toolboxColor": "#999999",
-        "toolboxEmpasisColor": "#666666",
+        "toolboxEmphasisColor": "#666666",
         "tooltipAxisColor": "#cccccc",
         "tooltipAxisWidth": 1,
         "timelineLineColor": "#626c91",
@@ -164,4 +164,4 @@
         "datazoomHandleWidth": "100",
         "datazoomLabelColor": "#999999"
     }
-}
\ No newline at end of file
+}
diff --git a/en/theme-builder/themes/westeros.json b/en/theme-builder/themes/westeros.json
index 2ea2797..5b6fbfb 100644
--- a/en/theme-builder/themes/westeros.json
+++ b/en/theme-builder/themes/westeros.json
@@ -144,7 +144,7 @@
         ],
         "axisSeperateSetting": false,
         "toolboxColor": "#999",
-        "toolboxEmpasisColor": "#666",
+        "toolboxEmphasisColor": "#666",
         "tooltipAxisColor": "#ccc",
         "tooltipAxisWidth": 1,
         "timelineLineColor": "#8fd3e8",
@@ -165,4 +165,4 @@
         "datazoomHandleWidth": "100",
         "datazoomLabelColor": "#333"
     }
-}
\ No newline at end of file
+}
diff --git a/en/theme-builder/themes/wonderland.json b/en/theme-builder/themes/wonderland.json
index 7932361..0db8e0e 100644
--- a/en/theme-builder/themes/wonderland.json
+++ b/en/theme-builder/themes/wonderland.json
@@ -144,7 +144,7 @@
         ],
         "axisSeperateSetting": false,
         "toolboxColor": "#999999",
-        "toolboxEmpasisColor": "#666666",
+        "toolboxEmphasisColor": "#666666",
         "tooltipAxisColor": "#cccccc",
         "tooltipAxisWidth": 1,
         "timelineLineColor": "#4ea397",
@@ -165,4 +165,4 @@
         "datazoomHandleWidth": "100",
         "datazoomLabelColor": "#999999"
     }
-}
\ No newline at end of file
+}
diff --git a/en/tutorial.html b/en/tutorial.html
index 1148aba..82add71 100644
--- a/en/tutorial.html
+++ b/en/tutorial.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'en';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -9,8 +9,8 @@
 </script><title>Documentation - Apache ECharts(incubating)</title><style>html, body {
     /* position: sticky should not have overflow parents.*/
     overflow-x: hidden;
-}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/en/css/doc-bundle.css?_v_=1597861067124"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-doc-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1597861067124"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts.apache.org/en/js/doc-bundle.js?_v_=1597861067124"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
+}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/en/css/doc-bundle.css?_v_=1598523334942"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-doc-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1598523334942"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts.apache.org/en/js/doc-bundle.js?_v_=1598523334942"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
 </script><script type="text/javascript">window.globalArgsExtra = {
     baseUrl: 'documents/tutorial-parts',
     docType: 'tutorial',
@@ -19,7 +19,7 @@
 if (window.EC_WWW_CDN_PAY_ROOT) {
     window.globalArgsExtra.cdnRoot = window.EC_WWW_CDN_PAY_ROOT + '/en/' + window.globalArgsExtra.baseUrl
 }</script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
-window.globalArgsExtra.version = '1597861067124';
+window.globalArgsExtra.version = '1598523334942';
 echartsDoc.init('#ec-doc-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
diff --git a/examples/data/map-parallel-prices.js b/examples/data/map-parallel-prices.js
deleted file mode 100644
index e69de29..0000000
--- a/examples/data/map-parallel-prices.js
+++ /dev/null
diff --git a/examples/data/meta/map-parallel-prices.md b/examples/data/meta/map-parallel-prices.md
deleted file mode 100644
index 337edb7..0000000
--- a/examples/data/meta/map-parallel-prices.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-title: Prices and Earnings 2012
-category: parallel, map
-titleCN: Prices and Earnings 2012
----
\ No newline at end of file
diff --git a/examples/en/editor.html b/examples/en/editor.html
index f5f049b..60c52c1 100644
--- a/examples/en/editor.html
+++ b/examples/en/editor.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><link rel="shortcut icon" href="https://echarts.apache.org/examples/images/favicon.png?_v_=20200710_1"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/examples/stylesheets/main.css?_v_=1597861062346"><title>Examples - Apache ECharts (incubating)</title><script type="text/javascript">window.EC_DEMO_LANG = 'en';
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><link rel="shortcut icon" href="https://echarts.apache.org/examples/images/favicon.png?_v_=20200710_1"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/examples/stylesheets/main.css?_v_=1598523330519"><title>Examples - Apache ECharts (incubating)</title><script type="text/javascript">window.EC_DEMO_LANG = 'en';
 </script></head><body><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now for the latest information.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><nav 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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><script type="text/javascript">var selector = window.EC_DEMO_LANG === 'en' ? 'nav-start' : 'nav-examples';
 var menu = document.getElementById(selector);
 if (menu) {
@@ -8,7 +8,7 @@
     var nav = document.getElementsByClassName('navbar')[0];
     nav.parentNode.removeChild(nav);
     document.getElementById('main-container').style.top = 0;
-}</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@1.11.3/dist/jquery.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lodash@3.10.1/index.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/common.js?_v_=1597861062346"></script><script type="text/javascript">function changeLang(lang) {
+}</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@1.11.3/dist/jquery.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lodash@3.10.1/index.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/common.js?_v_=1598523330519"></script><script type="text/javascript">function changeLang(lang) {
     if (lang === 'en') {
         if (location.hostname !== 'echarts.apache.org') {
             var re = new RegExp('/zh/', 'g');
@@ -40,9 +40,9 @@
 // But echarts-gl do not support CORS yet, still use same origin.
 window.ROOT_PATH = EC_EXAMPLE_IS_GL ? 'https://echarts.apache.org/examples' : 'https://echarts.apache.org/examples';
 window.CDN_PAY_ROOT_PATH = 'https://echarts.apache.org/examples';
-window.CDN_PAY_VERSION = '20200710_2';
+window.CDN_PAY_VERSION = '20200710_1';
 window.CDN_THIRD_PARTY_ECHARTS_GL = 'https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js'
-</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/dat.gui@0.6.5/build/dat.gui.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js?_v_=1597861062346"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js?_v_=1597861062346"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js?_v_=1597861062346"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.js?_v_=1597861062346"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ace-builds@1.2.5/src-noconflict/ace.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ace-builds@1.2.5/src-noconflict/ext-language_tools.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/editor.js?_v_=1597861062346"></script><script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&amp;ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu&amp;__ec_v__=20190126"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.js?_v_=1597861062346"></script><script type="text/javascript">document.getElementById('nav-examples').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/dat.gui@0.6.5/build/dat.gui.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js?_v_=1598523330519"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js?_v_=1598523330519"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js?_v_=1598523330519"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.js?_v_=1598523330519"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ace-builds@1.2.5/src-noconflict/ace.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ace-builds@1.2.5/src-noconflict/ext-language_tools.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/editor.js?_v_=1598523330519"></script><script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&amp;ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu&amp;__ec_v__=20190126"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.js?_v_=1598523330519"></script><script type="text/javascript">document.getElementById('nav-examples').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
 
diff --git a/examples/en/index.html b/examples/en/index.html
index cc7c1b5..15c85a1 100644
--- a/examples/en/index.html
+++ b/examples/en/index.html
@@ -1,10 +1,10 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><link rel="shortcut icon" href="https://echarts.apache.org/examples/images/favicon.png?_v_=20200710_1"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/examples/stylesheets/main.css?_v_=1597861062346"><title>Examples - Apache ECharts (incubating)</title><script type="text/javascript">window.EC_DEMO_LANG = 'en';
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><link rel="shortcut icon" href="https://echarts.apache.org/examples/images/favicon.png?_v_=20200710_1"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/examples/stylesheets/main.css?_v_=1598523330519"><title>Examples - Apache ECharts (incubating)</title><script type="text/javascript">window.EC_DEMO_LANG = 'en';
 </script></head><body><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now for the latest information.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><nav 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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><script type="text/javascript">var selector = window.EC_DEMO_LANG === 'en' ? 'nav-start' : 'nav-examples';
 var menu = document.getElementById(selector);
 if (menu) {
     menu.className = 'active';
 }
-</script><div id="left-chart-nav"><ul></ul></div><div id="explore-container"><div id="toolbar"><div id="theme"><span>Theme:</span><a href="./index.html" title="default" data-theme="default" class="default"><span></span></a><a href="./index.html?theme=light" title="light" data-theme="light" class="light"><span></span></a><a href="./index.html?theme=dark" title="dark" data-theme="dark" class="dark"><span></span></a></div></div><div class="chart-list-panel"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@1.11.3/dist/jquery.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lodash@3.10.1/index.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/common.js?_v_=1597861062346"></script><script type="text/javascript">function changeLang(lang) {
+</script><div id="left-chart-nav"><ul></ul></div><div id="explore-container"><div id="toolbar"><div id="theme"><span>Theme:</span><a href="./index.html" title="default" data-theme="default" class="default"><span></span></a><a href="./index.html?theme=light" title="light" data-theme="light" class="light"><span></span></a><a href="./index.html?theme=dark" title="dark" data-theme="dark" class="dark"><span></span></a></div></div><div class="chart-list-panel"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@1.11.3/dist/jquery.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lodash@3.10.1/index.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/common.js?_v_=1598523330519"></script><script type="text/javascript">function changeLang(lang) {
     if (lang === 'en') {
         if (location.hostname !== 'echarts.apache.org') {
             var re = new RegExp('/zh/', 'g');
@@ -38,7 +38,7 @@
 window.CDN_PAY_ROOT_PATH = 'https://echarts.apache.org/examples';
 window.CDN_PAY_VERSION = '20200710_1';
 window.CDN_THIRD_PARTY_ECHARTS_GL = 'https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js'
-</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/waypoints@4.0.0/lib/jquery.waypoints.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-lazyload@1.9.7/jquery.lazyload.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/chart-list-data.js?_v_=1597861062346"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/chart-list-data-gl.js?_v_=1597861062346"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/chart-list.js?_v_=1597861062346"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/waypoints@4.0.0/lib/jquery.waypoints.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-lazyload@1.9.7/jquery.lazyload.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/chart-list-data.js?_v_=1598523330519"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/chart-list-data-gl.js?_v_=1598523330519"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/chart-list.js?_v_=1598523330519"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
 
diff --git a/examples/en/view.html b/examples/en/view.html
index a4e51d2..fc7b6e4 100644
--- a/examples/en/view.html
+++ b/examples/en/view.html
@@ -1,5 +1,5 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><link rel="shortcut icon" href="https://echarts.apache.org/examples/images/favicon.png?_v_=20200710_1"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/examples/stylesheets/main.css?_v_=1597861062346"><title>Examples - Apache ECharts (incubating)</title><script type="text/javascript">window.EC_DEMO_LANG = 'en';
-</script></head><body><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now for the latest information.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="view-main"><div class="control-panel"></div><div id="view-chart" class="chart"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@1.11.3/dist/jquery.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lodash@3.10.1/index.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/common.js?_v_=1597861062346"></script><script type="text/javascript">function changeLang(lang) {
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><link rel="shortcut icon" href="https://echarts.apache.org/examples/images/favicon.png?_v_=20200710_1"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/examples/stylesheets/main.css?_v_=1598523330519"><title>Examples - Apache ECharts (incubating)</title><script type="text/javascript">window.EC_DEMO_LANG = 'en';
+</script></head><body><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now for the latest information.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="view-main"><div class="control-panel"></div><div id="view-chart" class="chart"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@1.11.3/dist/jquery.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lodash@3.10.1/index.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/common.js?_v_=1598523330519"></script><script type="text/javascript">function changeLang(lang) {
     if (lang === 'en') {
         if (location.hostname !== 'echarts.apache.org') {
             var re = new RegExp('/zh/', 'g');
@@ -33,7 +33,7 @@
 window.CDN_PAY_ROOT_PATH = 'https://echarts.apache.org/examples';
 window.CDN_PAY_VERSION = '20200710_1';
 window.CDN_THIRD_PARTY_ECHARTS_GL = 'https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js'
-</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/dat.gui@0.6.5/build/dat.gui.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js?_v_=1597861062346"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script><script id="echarts-js" type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js?_v_=1597861062346"></script><script id="echarts-js" type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js?_v_=1597861062346"></script><script id="echarts-js" type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.js?_v_=1597861062346"></script><script id="echarts-js" type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&amp;ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu&amp;__ec_v__=20190126"></script><script id="echarts-js" type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.js?_v_=1597861062346"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/view.js?_v_=1597861062346"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/dat.gui@0.6.5/build/dat.gui.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js?_v_=1598523330519"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script><script id="echarts-js" type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js?_v_=1598523330519"></script><script id="echarts-js" type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js?_v_=1598523330519"></script><script id="echarts-js" type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.js?_v_=1598523330519"></script><script id="echarts-js" type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&amp;ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu&amp;__ec_v__=20190126"></script><script id="echarts-js" type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.js?_v_=1598523330519"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/view.js?_v_=1598523330519"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
 
diff --git a/examples/javascripts/chart-list-data.js b/examples/javascripts/chart-list-data.js
index 3efa55b..1dd09a9 100644
--- a/examples/javascripts/chart-list-data.js
+++ b/examples/javascripts/chart-list-data.js
@@ -1 +1 @@
-var EXAMPLES=[{category:["line"],id:"line-simple",title:"Basic Line Chart",difficulty:0},{category:["scatter"],id:"scatter-simple",title:"Basic Scatter Chart",difficulty:0},{category:["line"],id:"area-basic",title:"Basic area chart",difficulty:1},{category:["dataset","bar"],id:"dataset-simple0",title:"Simple Example of Dataset",difficulty:1},{category:["dataset","bar"],id:"dataset-simple1",title:"Dataset in Object Array",difficulty:1},{category:["line"],id:"line-smooth",title:"Smoothed Line Chart",difficulty:1},{category:["line"],id:"area-stack",title:"Stacked area chart",difficulty:2},{category:["dataset","pie"],id:"dataset-default",title:"Default arrangement",difficulty:2},{category:["dataset","bar"],id:"dataset-encode0",theme:"light",title:"Simple Encode",difficulty:2},{category:["dataset","bar"],id:"dataset-series-layout-by",theme:"light",title:"Series Layout By Column or Row",difficulty:2},{category:["line"],id:"line-stack",title:"Stacked Line Chart",difficulty:2},{category:["dataset"],id:"dataset-encode1",theme:"light",title:"Encode and Matrix",difficulty:3},{category:["dataset","line","pie"],id:"dataset-link",title:"Share Dataset",difficulty:4},{category:["line","visualMap"],id:"area-pieces",title:"Area Pieces",difficulty:10},{category:["line"],id:"area-rainfall",title:"Rainfall",difficulty:10},{category:["line","dataZoom"],id:"area-simple",title:"Large scale area chart",difficulty:10},{category:["bar"],id:"bar-animation-delay",title:"柱状图动画延迟",difficulty:10},{category:["bar"],id:"bar-background",title:"Bar with Background",difficulty:10},{category:["bar"],id:"bar-brush",title:"柱状图框选",difficulty:10},{category:["bar"],id:"bar-gradient",title:"特性示例:渐变色 阴影 点击缩放",difficulty:10},{category:["custom"],id:"bar-histogram",title:"Girths of Black Cherry Trees",difficulty:10},{category:["bar"],id:"bar-label-rotation",title:"Bar Label Rotation",difficulty:10},{category:["bar"],id:"bar-large",title:"Large Scale Bar Chart",difficulty:10},{category:["bar"],id:"bar-negative",title:"正负条形图",difficulty:10},{category:["bar"],id:"bar-negative2",title:"交错正负轴标签",difficulty:10},{category:["bar"],id:"bar-polar-real-estate",title:"极坐标系下的堆叠柱状图",difficulty:10},{category:["bar"],id:"bar-polar-stack",title:"极坐标系下的堆叠柱状图",difficulty:10},{category:["bar"],id:"bar-polar-stack-radial",title:"极坐标系下的堆叠柱状图",difficulty:10},{category:["bar","rich"],id:"bar-rich-text",title:"Wheater Statistics",difficulty:10},{category:["bar"],id:"bar-simple",title:"Bar Simple",difficulty:10},{category:["bar"],id:"bar-stack",title:"堆叠柱状图",difficulty:10},{category:["bar"],id:"bar-tick-align",title:"坐标轴刻度与标签对齐",difficulty:10},{category:["bar"],id:"bar-waterfall",title:"深圳月最低生活费组成(单位:元)",difficulty:10},{category:["bar"],id:"bar-waterfall2",title:"阶梯瀑布图",difficulty:10},{category:["bar"],id:"bar-y-category",title:"World Total Population",difficulty:10},{category:["bar"],id:"bar-y-category-stack",title:"堆叠条形图",difficulty:10},{category:["bar"],id:"bar1",title:"Rainfall and Evaporation",difficulty:10},{category:["boxplot"],id:"boxplot-light-velocity",title:"Boxplot Light Velocity",difficulty:10},{category:["boxplot"],id:"boxplot-light-velocity2",title:"Boxplot Light Velocity2",difficulty:10},{category:["boxplot"],id:"boxplot-multi",title:"Multiple Categories",difficulty:10},{category:["scatter"],id:"bubble-gradient",title:"Bubble Chart",difficulty:10},{category:["calendar","scatter"],id:"calendar-charts",title:"Calendar Charts",difficulty:10},{category:["calendar"],id:"calendar-effectscatter",title:"Calendar Effectscatter",difficulty:10},{category:["calendar","graph"],id:"calendar-graph",title:"Calendar Graph",difficulty:10},{category:["calendar","heatmap"],id:"calendar-heatmap",title:"Calendar Heatmap",difficulty:10},{category:["calendar"],id:"calendar-horizontal",title:"Calendar Heatmap Horizontal",difficulty:10},{category:["calendar"],id:"calendar-lunar",title:"Calendar Lunar",difficulty:10},{category:["calendar","pie"],id:"calendar-pie",title:"Calendar Pie",difficulty:10},{category:["calendar"],id:"calendar-simple",title:"Simple Calendar",difficulty:10},{category:["calendar","heatmap"],id:"calendar-vertical",title:"Calendar Heatmap Vertical",difficulty:10},{category:["candlestick"],id:"candlestick-brush",title:"Candlestick Brush",difficulty:10},{category:["candlestick"],id:"candlestick-large",title:"Large Scale Candlestick",difficulty:10},{category:["candlestick"],id:"candlestick-sh",title:"ShangHai Index",difficulty:10},{category:["candlestick"],id:"candlestick-sh-2015",title:"ShangHai Index, 2015",difficulty:10},{category:["candlestick"],id:"candlestick-simple",title:"Basic Candlestick",difficulty:10},{category:["candlestick"],id:"candlestick-touch",title:"Axis Pointer Link and Touch",difficulty:10},{category:["line"],id:"confidence-band",title:"Confidence Band",difficulty:10},{category:["custom"],id:"custom-bar-trend",title:"Custom Bar Trend",difficulty:10},{category:["custom","calendar"],id:"custom-calendar-icon",title:"Custom Calendar Icon",difficulty:10},{category:["custom"],id:"custom-cartesian-polygon",title:"Custom Cartesian Polygon",difficulty:10},{category:["custom"],id:"custom-error-bar",title:"Error Bar on Catesian",difficulty:10},{category:["custom","dataZoom"],id:"custom-error-scatter",title:"Error Scatter on Catesian",difficulty:10},{category:["custom","dataZoom","drag"],id:"custom-gantt-flight",title:"Gantt Chart of Airport Flights",difficulty:10},{category:["custom","map"],id:"custom-hexbin",title:"Hexagonal Binning",difficulty:10},{category:["candlestick"],id:"custom-ohlc",title:"OHLC Chart",difficulty:10},{category:["custom"],id:"custom-polar-heatmap",title:"Polar Heatmap",difficulty:10},{category:["custom"],id:"custom-profile",title:"Profile",difficulty:10},{category:["custom"],id:"custom-profit",title:"Profit",difficulty:10},{category:["custom"],id:"custom-wind",title:"Use custom series to draw wind vectors",difficulty:10},{category:["custom"],id:"cycle-plot",title:"Cycle Plot",difficulty:10},{category:["bar"],id:"dynamic-data",title:"Dynamic Data",difficulty:10},{category:["line"],id:"dynamic-data2",title:"Dynamic Data + Time Axis",difficulty:10},{category:["scatter","map"],id:"effectScatter-bmap",title:"Air Quality - Baidu Map",difficulty:10},{category:["scatter"],id:"effectScatter-map",title:"Air Quality",difficulty:10},{category:["funnel"],id:"funnel",title:"Funnel Chart",difficulty:10},{category:["funnel"],id:"funnel-align",title:"Funnel (align)",difficulty:10},{category:["funnel"],id:"funnel-customize",title:"Customized Funnel",difficulty:10},{category:["funnel"],id:"funnel-mutiple",title:"Multiple Funnels",difficulty:10},{category:["gauge"],id:"gauge",title:"Gauge",difficulty:10},{category:["gauge"],id:"gauge-car",title:"Gauge Car",difficulty:10},{category:["gauge"],id:"gauge-car-dark",title:"Gauge Car Dark",difficulty:10},{category:["map"],id:"geo-lines",title:"Migration",difficulty:10},{category:["map"],id:"geo-map-scatter",title:"map and scatter share a geo",difficulty:10},{category:["graph"],id:"graph",title:"Les Miserables",difficulty:10},{category:["graph"],id:"graph-circular-layout",title:"Les Miserables",difficulty:10},{category:["graph"],id:"graph-force",title:"Force Layout",difficulty:10},{category:["graph"],id:"graph-force-dynamic",title:"Graph Dynamic",difficulty:10},{category:["graph"],id:"graph-force2",title:"Force Layout",difficulty:10},{category:["graph"],id:"graph-grid",title:"Graph on Cartesian",difficulty:10},{category:["graph"],id:"graph-life-expectancy",title:"Graph Life Expectancy",difficulty:10},{category:["graph"],id:"graph-npm",title:"NPM Dependencies",difficulty:10},{category:["graph"],id:"graph-simple",title:"Simple Graph",difficulty:10},{category:["graph"],id:"graph-webkit-dep",title:"Graph Webkit Dep",difficulty:10},{category:["line"],id:"grid-multiple",title:"Rainfall and Water Flow",difficulty:10},{category:["heatmap"],id:"heatmap-bmap",title:"Heatmap on Baidu Map Extension",difficulty:10},{category:["heatmap"],id:"heatmap-cartesian",title:"Heatmap on Cartesian",difficulty:10},{category:["heatmap"],id:"heatmap-large",title:"Heatmap - 2w data",difficulty:10},{category:["heatmap"],id:"heatmap-large-piecewise",title:"Heatmap - Discrete Mapping of Color",difficulty:10},{category:["heatmap"],id:"heatmap-map",title:"Air Qulity",difficulty:10},{category:["line"],id:"line-aqi",title:"Beijing AQI",difficulty:10},{category:["line","drag"],id:"line-draggable",title:"Try Dragging these Points",difficulty:10},{category:["line"],id:"line-easing",title:"Line Easing Visualizing",difficulty:10},{category:["line"],id:"line-function",title:"Function Plot",difficulty:10},{category:["line"],id:"line-gradient",title:"Line Gradient",difficulty:10},{category:["line"],id:"line-graphic",title:"Custom Graphic Component",difficulty:10},{category:["line"],id:"line-in-cartesian-coordinate-system",title:"Line Chart in Cartesian Coordinate System",difficulty:10},{category:["line"],id:"line-log",title:"Log Axis",difficulty:10},{category:["line"],id:"line-marker",title:"Temperature Change in the coming week",difficulty:10},{category:["line"],id:"line-markline",title:"Line with Marklines",difficulty:10},{category:["line"],id:"line-pen",title:"Click to Add Points",difficulty:10},{category:["line"],id:"line-polar",title:"Two Value-Axes in Polar",difficulty:10},{category:["line"],id:"line-polar2",title:"Two Value-Axes in Polar",difficulty:10},{category:["line"],id:"line-sections",title:"Distribution of Electricity",difficulty:10},{category:["line"],id:"line-step",title:"Step Line",difficulty:10},{category:["line"],id:"line-style",title:"Line Style and Item Style",difficulty:10},{category:["line","dataZoom"],id:"line-tooltip-touch",title:"Tooltip and DataZoom on Mobile",difficulty:10},{category:["line"],id:"line-y-category",title:"Line Y Category",difficulty:10},{category:["map","lines"],id:"lines-airline",title:"65k+ Airline",difficulty:10},{category:["map","lines"],id:"lines-bmap",title:"A Hiking Trail in Hangzhou - Baidu Map",difficulty:10},{category:["map","lines"],id:"lines-bmap-bus",title:"Bus Lines of Beijing - Baidu Map",difficulty:10},{category:["map","lines"],id:"lines-bmap-effect",title:"Bus Lines of Beijing - Line Effect",difficulty:10},{category:["map","lines"],id:"lines-ny",title:"Use lines to draw 1 million ny streets.",difficulty:10},{category:["map"],id:"map-bin",title:"Binning on Map",difficulty:10},{category:["map"],id:"map-china",title:"Map China",difficulty:10},{category:["map"],id:"map-china-dataRange",title:"Sales of iphone",difficulty:10},{category:["map"],id:"map-HK",title:"Population Density of HongKong (2011)",difficulty:10},{category:["map"],id:"map-labels",title:"Rich Text Labels on Map",difficulty:10},{category:["map"],id:"map-locate",title:"Map Locate",difficulty:10},{category:["parallel","map"],id:"map-parallel-prices",title:"Prices and Earnings 2012",difficulty:10},{category:["map"],id:"map-polygon",title:"Draw Polygon on Map",difficulty:10},{category:["map"],id:"map-province",title:"Switch among 34 Provinces",difficulty:10},{category:["map"],id:"map-usa",title:"USA Population Estimates (2012)",difficulty:10},{category:["map"],id:"map-world",title:"Map World",difficulty:10},{category:["map"],id:"map-world-dataRange",title:"World Population (2010)",difficulty:10},{category:["bar"],id:"mix-line-bar",title:"Mixed Line and Bar",difficulty:10},{category:["bar"],id:"mix-timeline-finance",title:"Finance Indices 2002",difficulty:10},{category:["bar"],id:"mix-zoom-on-value",title:"Mix Zoom On Value",difficulty:10},{category:["line"],id:"multiple-x-axis",title:"Multiple X Axes",difficulty:10},{category:["bar"],id:"multiple-y-axis",title:"Multiple Y Axes",difficulty:10},{category:["parallel"],id:"parallel-aqi",title:"Parallel Aqi",difficulty:10},{category:["parallel"],id:"parallel-nutrients",title:"Parallel Nutrients",difficulty:10},{category:["parallel"],id:"parallel-simple",title:"Basic Parallel",difficulty:10},{category:["pictorialBar"],id:"pictorialBar-body-fill",title:"Water Content",difficulty:10},{category:["pictorialBar"],id:"pictorialBar-dotted",title:"Dotted bar",difficulty:10},{category:["pictorialBar"],id:"pictorialBar-forest",title:"Expansion of forest",difficulty:10},{category:["pictorialBar"],id:"pictorialBar-hill",title:"Wish List and Mountain Height",difficulty:10},{category:["pictorialBar"],id:"pictorialBar-spirit",title:"Spirits",difficulty:10},{category:["pictorialBar"],id:"pictorialBar-vehicle",title:"Vehicles",difficulty:10},{category:["pictorialBar"],id:"pictorialBar-velocity",title:"Velocity of Christmas Reindeers",difficulty:10},{category:["pie"],id:"pie-alignTo",title:"Pie Label Align",difficulty:10},{category:["pie"],id:"pie-custom",title:"Customized Pie",difficulty:10},{category:["pie"],id:"pie-doughnut",title:"Doughnut Chart",difficulty:10},{category:["pie"],id:"pie-legend",title:"Pie with Scrollable Legend",difficulty:10},{category:["pie","rich"],id:"pie-nest",title:"Nested Pies",difficulty:10},{category:["pie"],id:"pie-pattern",title:"Texture on Pie Chart",difficulty:10},{category:["pie","rich"],id:"pie-rich-text",title:"Pie Special Label",difficulty:10},{category:["pie"],id:"pie-roseType",title:"Nightingale's Rose Diagram",difficulty:10},{category:["pie"],id:"pie-simple",title:"Referer of a website",difficulty:10},{category:["bar"],id:"polar-roundCap",title:"Rounded Bar on Polar",difficulty:10},{category:["radar"],id:"radar",title:"Basic Radar Chart",difficulty:10},{category:["radar"],id:"radar-aqi",title:"AQI - Radar Chart",difficulty:10},{category:["radar"],id:"radar-custom",title:"Customized Radar Chart",difficulty:10},{category:["radar"],id:"radar-multiple",title:"Multiple Radar",difficulty:10},{category:["radar"],id:"radar2",title:"Proportion of Browsers",difficulty:10},{category:["sankey"],id:"sankey-energy",title:"Sankey Diagram",difficulty:10},{category:["sankey"],id:"sankey-itemstyle",title:"Specify ItemStyle for Each Node in Sankey",difficulty:10},{category:["sankey"],id:"sankey-levels",title:"Sankey with Levels Setting",difficulty:10},{category:["sankey"],id:"sankey-nodeAlign-left",title:"Node Align Left in Sankey",difficulty:10},{category:["sankey"],id:"sankey-nodeAlign-right",title:"Node Align Right in Sankey",difficulty:10},{category:["sankey"],id:"sankey-simple",title:"Basic Sankey",difficulty:10},{category:["sankey"],id:"sankey-vertical",title:"Sankey Orient Vertical",difficulty:10},{category:["scatter"],id:"scatter-anscombe-quartet",title:"Anscombe&#39;s quartet",difficulty:10},{category:["scatter"],id:"scatter-aqi-color",title:"Scatter Aqi Color",difficulty:10},{category:["scatter"],id:"scatter-clustering-process",title:"Clustering Process",difficulty:10},{category:["scatter"],id:"scatter-effect",title:"Effect Scatter Chart",difficulty:10},{category:["scatter"],id:"scatter-exponential-regression",title:"Exponential Regression",difficulty:10},{category:["scatter"],id:"scatter-large",theme:"light",title:"Large Scatter",difficulty:10},{category:["scatter"],id:"scatter-life-expectancy-timeline",title:"Life Expectancy and GDP",difficulty:10},{category:["scatter"],id:"scatter-linear-regression",title:"Linear Regression",difficulty:10},{category:["scatter"],id:"scatter-logarithmic-regression",title:"Logarithmic Regression",difficulty:10},{category:["scatter"],id:"scatter-map",title:"Air Quality",difficulty:10},{category:["scatter"],id:"scatter-map-brush",title:"Scatter Map Brush",difficulty:10},{category:["parallel","scatter"],id:"scatter-matrix",title:"Scatter Matrix",difficulty:10},{category:["scatter"],id:"scatter-nebula",title:"Scatter Nebula",difficulty:10},{category:["scatter"],id:"scatter-nutrients",title:"Scatter Nutrients",difficulty:10},{category:["scatter"],id:"scatter-nutrients-matrix",title:"Scatter Nutrients Matrix",difficulty:10},{category:["scatter"],id:"scatter-painter-choice",title:"Master Painter Color Choices Throughout History",difficulty:10},{category:["scatter"],id:"scatter-polar-punchCard",title:"Punch Card of Github",difficulty:10},{category:["scatter"],id:"scatter-polynomial-regression",title:"Polynomial Regression",difficulty:10},{category:["scatter"],id:"scatter-punchCard",title:"Punch Card of Github",difficulty:10},{category:["scatter"],id:"scatter-single-axis",title:"Scatter on Single Axis",difficulty:10},{category:["scatter"],id:"scatter-stream-visual",title:"Visual interaction with stream",difficulty:10},{category:["scatter"],id:"scatter-weibo",title:"Sign in of weibo",difficulty:10},{category:["scatter"],id:"scatter-weight",title:"Distribution of Height and Weight",difficulty:10},{category:["scatter"],id:"scatter-world-population",title:"World Population (2011)",difficulty:10},{category:["sunburst"],id:"sunburst-book",title:"Book Records",difficulty:10},{category:["sunburst"],id:"sunburst-drink",title:"Drink Flavors",difficulty:10},{category:["sunburst"],id:"sunburst-label-rotate",title:"Sunburst Label Rotate",difficulty:10},{category:["sunburst"],id:"sunburst-monochrome",title:"Monochrome Sunburst",difficulty:10},{category:["sunburst"],id:"sunburst-simple",title:"Basic Sunburst",difficulty:10},{category:["sunburst"],id:"sunburst-visualMap",title:"Sunburst VisualMap",difficulty:10},{category:["themeRiver"],id:"themeRiver-basic",title:"ThemeRiver",difficulty:10},{category:["themeRiver"],id:"themeRiver-lastfm",title:"ThemeRiver Lastfm",difficulty:10},{category:["tree"],id:"tree-basic",title:"From Left to Right Tree",difficulty:10},{category:["tree"],id:"tree-legend",title:"Multiple Trees",difficulty:10},{category:["tree"],id:"tree-orient-bottom-top",title:"From Bottom to Top Tree",difficulty:10},{category:["tree"],id:"tree-orient-right-left",title:"From Right to Left Tree",difficulty:10},{category:["tree"],id:"tree-polyline",title:"Tree with Polyline Edge",difficulty:10},{category:["tree"],id:"tree-radial",title:"Radial Tree",difficulty:10},{category:["tree"],id:"tree-vertical",title:"From Top to Bottom Tree",difficulty:10},{category:["treemap"],id:"treemap-disk",title:"Disk Usage",difficulty:10},{category:["treemap"],id:"treemap-drill-down",title:"ECharts Option Query",difficulty:10},{category:["treemap"],id:"treemap-obama",title:"How $3.7 Trillion is Spent",difficulty:10},{category:["treemap"],id:"treemap-show-parent",title:"Show Parent Labels",difficulty:10},{category:["treemap"],id:"treemap-simple",title:"Basic Treemap",difficulty:10},{category:["treemap"],id:"treemap-visual",title:"Gradient Mapping",difficulty:10},{category:["bar"],id:"watermark",title:"Watermark - ECharts Download",difficulty:10},{category:["custom","dataZoom"],id:"wind-barb",title:"Wind Barb",difficulty:10}];
\ No newline at end of file
+var EXAMPLES=[{category:["line"],id:"line-simple",title:"Basic Line Chart",difficulty:0},{category:["scatter"],id:"scatter-simple",title:"Basic Scatter Chart",difficulty:0},{category:["line"],id:"area-basic",title:"Basic area chart",difficulty:1},{category:["dataset","bar"],id:"dataset-simple0",title:"Simple Example of Dataset",difficulty:1},{category:["dataset","bar"],id:"dataset-simple1",title:"Dataset in Object Array",difficulty:1},{category:["line"],id:"line-smooth",title:"Smoothed Line Chart",difficulty:1},{category:["line"],id:"area-stack",title:"Stacked area chart",difficulty:2},{category:["dataset","pie"],id:"dataset-default",title:"Default arrangement",difficulty:2},{category:["dataset","bar"],id:"dataset-encode0",theme:"light",title:"Simple Encode",difficulty:2},{category:["dataset","bar"],id:"dataset-series-layout-by",theme:"light",title:"Series Layout By Column or Row",difficulty:2},{category:["line"],id:"line-stack",title:"Stacked Line Chart",difficulty:2},{category:["dataset"],id:"dataset-encode1",theme:"light",title:"Encode and Matrix",difficulty:3},{category:["dataset","line","pie"],id:"dataset-link",title:"Share Dataset",difficulty:4},{category:["line","visualMap"],id:"area-pieces",title:"Area Pieces",difficulty:10},{category:["line"],id:"area-rainfall",title:"Rainfall",difficulty:10},{category:["line","dataZoom"],id:"area-simple",title:"Large scale area chart",difficulty:10},{category:["bar"],id:"bar-animation-delay",title:"柱状图动画延迟",difficulty:10},{category:["bar"],id:"bar-background",title:"Bar with Background",difficulty:10},{category:["bar"],id:"bar-brush",title:"柱状图框选",difficulty:10},{category:["bar"],id:"bar-gradient",title:"特性示例:渐变色 阴影 点击缩放",difficulty:10},{category:["custom"],id:"bar-histogram",title:"Girths of Black Cherry Trees",difficulty:10},{category:["bar"],id:"bar-label-rotation",title:"Bar Label Rotation",difficulty:10},{category:["bar"],id:"bar-large",title:"Large Scale Bar Chart",difficulty:10},{category:["bar"],id:"bar-negative",title:"正负条形图",difficulty:10},{category:["bar"],id:"bar-negative2",title:"交错正负轴标签",difficulty:10},{category:["bar"],id:"bar-polar-real-estate",title:"极坐标系下的堆叠柱状图",difficulty:10},{category:["bar"],id:"bar-polar-stack",title:"极坐标系下的堆叠柱状图",difficulty:10},{category:["bar"],id:"bar-polar-stack-radial",title:"极坐标系下的堆叠柱状图",difficulty:10},{category:["bar","rich"],id:"bar-rich-text",title:"Wheater Statistics",difficulty:10},{category:["bar"],id:"bar-simple",title:"Bar Simple",difficulty:10},{category:["bar"],id:"bar-stack",title:"堆叠柱状图",difficulty:10},{category:["bar"],id:"bar-tick-align",title:"坐标轴刻度与标签对齐",difficulty:10},{category:["bar"],id:"bar-waterfall",title:"深圳月最低生活费组成(单位:元)",difficulty:10},{category:["bar"],id:"bar-waterfall2",title:"阶梯瀑布图",difficulty:10},{category:["bar"],id:"bar-y-category",title:"World Total Population",difficulty:10},{category:["bar"],id:"bar-y-category-stack",title:"堆叠条形图",difficulty:10},{category:["bar"],id:"bar1",title:"Rainfall and Evaporation",difficulty:10},{category:["boxplot"],id:"boxplot-light-velocity",title:"Boxplot Light Velocity",difficulty:10},{category:["boxplot"],id:"boxplot-light-velocity2",title:"Boxplot Light Velocity2",difficulty:10},{category:["boxplot"],id:"boxplot-multi",title:"Multiple Categories",difficulty:10},{category:["scatter"],id:"bubble-gradient",title:"Bubble Chart",difficulty:10},{category:["calendar","scatter"],id:"calendar-charts",title:"Calendar Charts",difficulty:10},{category:["calendar"],id:"calendar-effectscatter",title:"Calendar Effectscatter",difficulty:10},{category:["calendar","graph"],id:"calendar-graph",title:"Calendar Graph",difficulty:10},{category:["calendar","heatmap"],id:"calendar-heatmap",title:"Calendar Heatmap",difficulty:10},{category:["calendar"],id:"calendar-horizontal",title:"Calendar Heatmap Horizontal",difficulty:10},{category:["calendar"],id:"calendar-lunar",title:"Calendar Lunar",difficulty:10},{category:["calendar","pie"],id:"calendar-pie",title:"Calendar Pie",difficulty:10},{category:["calendar"],id:"calendar-simple",title:"Simple Calendar",difficulty:10},{category:["calendar","heatmap"],id:"calendar-vertical",title:"Calendar Heatmap Vertical",difficulty:10},{category:["candlestick"],id:"candlestick-brush",title:"Candlestick Brush",difficulty:10},{category:["candlestick"],id:"candlestick-large",title:"Large Scale Candlestick",difficulty:10},{category:["candlestick"],id:"candlestick-sh",title:"ShangHai Index",difficulty:10},{category:["candlestick"],id:"candlestick-sh-2015",title:"ShangHai Index, 2015",difficulty:10},{category:["candlestick"],id:"candlestick-simple",title:"Basic Candlestick",difficulty:10},{category:["candlestick"],id:"candlestick-touch",title:"Axis Pointer Link and Touch",difficulty:10},{category:["line"],id:"confidence-band",title:"Confidence Band",difficulty:10},{category:["custom"],id:"custom-bar-trend",title:"Custom Bar Trend",difficulty:10},{category:["custom","calendar"],id:"custom-calendar-icon",title:"Custom Calendar Icon",difficulty:10},{category:["custom"],id:"custom-cartesian-polygon",title:"Custom Cartesian Polygon",difficulty:10},{category:["custom"],id:"custom-error-bar",title:"Error Bar on Catesian",difficulty:10},{category:["custom","dataZoom"],id:"custom-error-scatter",title:"Error Scatter on Catesian",difficulty:10},{category:["custom","dataZoom","drag"],id:"custom-gantt-flight",title:"Gantt Chart of Airport Flights",difficulty:10},{category:["custom","map"],id:"custom-hexbin",title:"Hexagonal Binning",difficulty:10},{category:["candlestick"],id:"custom-ohlc",title:"OHLC Chart",difficulty:10},{category:["custom"],id:"custom-polar-heatmap",title:"Polar Heatmap",difficulty:10},{category:["custom"],id:"custom-profile",title:"Profile",difficulty:10},{category:["custom"],id:"custom-profit",title:"Profit",difficulty:10},{category:["custom"],id:"custom-wind",title:"Use custom series to draw wind vectors",difficulty:10},{category:["custom"],id:"cycle-plot",title:"Cycle Plot",difficulty:10},{category:["bar"],id:"dynamic-data",title:"Dynamic Data",difficulty:10},{category:["line"],id:"dynamic-data2",title:"Dynamic Data + Time Axis",difficulty:10},{category:["scatter","map"],id:"effectScatter-bmap",title:"Air Quality - Baidu Map",difficulty:10},{category:["scatter"],id:"effectScatter-map",title:"Air Quality",difficulty:10},{category:["funnel"],id:"funnel",title:"Funnel Chart",difficulty:10},{category:["funnel"],id:"funnel-align",title:"Funnel (align)",difficulty:10},{category:["funnel"],id:"funnel-customize",title:"Customized Funnel",difficulty:10},{category:["funnel"],id:"funnel-mutiple",title:"Multiple Funnels",difficulty:10},{category:["gauge"],id:"gauge",title:"Gauge",difficulty:10},{category:["gauge"],id:"gauge-car",title:"Gauge Car",difficulty:10},{category:["gauge"],id:"gauge-car-dark",title:"Gauge Car Dark",difficulty:10},{category:["map"],id:"geo-lines",title:"Migration",difficulty:10},{category:["map"],id:"geo-map-scatter",title:"map and scatter share a geo",difficulty:10},{category:["graph"],id:"graph",title:"Les Miserables",difficulty:10},{category:["graph"],id:"graph-circular-layout",title:"Les Miserables",difficulty:10},{category:["graph"],id:"graph-force",title:"Force Layout",difficulty:10},{category:["graph"],id:"graph-force-dynamic",title:"Graph Dynamic",difficulty:10},{category:["graph"],id:"graph-force2",title:"Force Layout",difficulty:10},{category:["graph"],id:"graph-grid",title:"Graph on Cartesian",difficulty:10},{category:["graph"],id:"graph-life-expectancy",title:"Graph Life Expectancy",difficulty:10},{category:["graph"],id:"graph-npm",title:"NPM Dependencies",difficulty:10},{category:["graph"],id:"graph-simple",title:"Simple Graph",difficulty:10},{category:["graph"],id:"graph-webkit-dep",title:"Graph Webkit Dep",difficulty:10},{category:["line"],id:"grid-multiple",title:"Rainfall and Water Flow",difficulty:10},{category:["heatmap"],id:"heatmap-bmap",title:"Heatmap on Baidu Map Extension",difficulty:10},{category:["heatmap"],id:"heatmap-cartesian",title:"Heatmap on Cartesian",difficulty:10},{category:["heatmap"],id:"heatmap-large",title:"Heatmap - 2w data",difficulty:10},{category:["heatmap"],id:"heatmap-large-piecewise",title:"Heatmap - Discrete Mapping of Color",difficulty:10},{category:["heatmap"],id:"heatmap-map",title:"Air Qulity",difficulty:10},{category:["line"],id:"line-aqi",title:"Beijing AQI",difficulty:10},{category:["line","drag"],id:"line-draggable",title:"Try Dragging these Points",difficulty:10},{category:["line"],id:"line-easing",title:"Line Easing Visualizing",difficulty:10},{category:["line"],id:"line-function",title:"Function Plot",difficulty:10},{category:["line"],id:"line-gradient",title:"Line Gradient",difficulty:10},{category:["line"],id:"line-graphic",title:"Custom Graphic Component",difficulty:10},{category:["line"],id:"line-in-cartesian-coordinate-system",title:"Line Chart in Cartesian Coordinate System",difficulty:10},{category:["line"],id:"line-log",title:"Log Axis",difficulty:10},{category:["line"],id:"line-marker",title:"Temperature Change in the coming week",difficulty:10},{category:["line"],id:"line-markline",title:"Line with Marklines",difficulty:10},{category:["line"],id:"line-pen",title:"Click to Add Points",difficulty:10},{category:["line"],id:"line-polar",title:"Two Value-Axes in Polar",difficulty:10},{category:["line"],id:"line-polar2",title:"Two Value-Axes in Polar",difficulty:10},{category:["line"],id:"line-sections",title:"Distribution of Electricity",difficulty:10},{category:["line"],id:"line-step",title:"Step Line",difficulty:10},{category:["line"],id:"line-style",title:"Line Style and Item Style",difficulty:10},{category:["line","dataZoom"],id:"line-tooltip-touch",title:"Tooltip and DataZoom on Mobile",difficulty:10},{category:["line"],id:"line-y-category",title:"Line Y Category",difficulty:10},{category:["map","lines"],id:"lines-airline",title:"65k+ Airline",difficulty:10},{category:["map","lines"],id:"lines-bmap",title:"A Hiking Trail in Hangzhou - Baidu Map",difficulty:10},{category:["map","lines"],id:"lines-bmap-bus",title:"Bus Lines of Beijing - Baidu Map",difficulty:10},{category:["map","lines"],id:"lines-bmap-effect",title:"Bus Lines of Beijing - Line Effect",difficulty:10},{category:["map","lines"],id:"lines-ny",title:"Use lines to draw 1 million ny streets.",difficulty:10},{category:["map"],id:"map-bin",title:"Binning on Map",difficulty:10},{category:["map"],id:"map-china",title:"Map China",difficulty:10},{category:["map"],id:"map-china-dataRange",title:"Sales of iphone",difficulty:10},{category:["map"],id:"map-HK",title:"Population Density of HongKong (2011)",difficulty:10},{category:["map"],id:"map-labels",title:"Rich Text Labels on Map",difficulty:10},{category:["map"],id:"map-locate",title:"Map Locate",difficulty:10},{category:["map"],id:"map-polygon",title:"Draw Polygon on Map",difficulty:10},{category:["map"],id:"map-province",title:"Switch among 34 Provinces",difficulty:10},{category:["map"],id:"map-usa",title:"USA Population Estimates (2012)",difficulty:10},{category:["map"],id:"map-world",title:"Map World",difficulty:10},{category:["map"],id:"map-world-dataRange",title:"World Population (2010)",difficulty:10},{category:["bar"],id:"mix-line-bar",title:"Mixed Line and Bar",difficulty:10},{category:["bar"],id:"mix-timeline-finance",title:"Finance Indices 2002",difficulty:10},{category:["bar"],id:"mix-zoom-on-value",title:"Mix Zoom On Value",difficulty:10},{category:["line"],id:"multiple-x-axis",title:"Multiple X Axes",difficulty:10},{category:["bar"],id:"multiple-y-axis",title:"Multiple Y Axes",difficulty:10},{category:["parallel"],id:"parallel-aqi",title:"Parallel Aqi",difficulty:10},{category:["parallel"],id:"parallel-nutrients",title:"Parallel Nutrients",difficulty:10},{category:["parallel"],id:"parallel-simple",title:"Basic Parallel",difficulty:10},{category:["pictorialBar"],id:"pictorialBar-body-fill",title:"Water Content",difficulty:10},{category:["pictorialBar"],id:"pictorialBar-dotted",title:"Dotted bar",difficulty:10},{category:["pictorialBar"],id:"pictorialBar-forest",title:"Expansion of forest",difficulty:10},{category:["pictorialBar"],id:"pictorialBar-hill",title:"Wish List and Mountain Height",difficulty:10},{category:["pictorialBar"],id:"pictorialBar-spirit",title:"Spirits",difficulty:10},{category:["pictorialBar"],id:"pictorialBar-vehicle",title:"Vehicles",difficulty:10},{category:["pictorialBar"],id:"pictorialBar-velocity",title:"Velocity of Christmas Reindeers",difficulty:10},{category:["pie"],id:"pie-alignTo",title:"Pie Label Align",difficulty:10},{category:["pie"],id:"pie-custom",title:"Customized Pie",difficulty:10},{category:["pie"],id:"pie-doughnut",title:"Doughnut Chart",difficulty:10},{category:["pie"],id:"pie-legend",title:"Pie with Scrollable Legend",difficulty:10},{category:["pie","rich"],id:"pie-nest",title:"Nested Pies",difficulty:10},{category:["pie"],id:"pie-pattern",title:"Texture on Pie Chart",difficulty:10},{category:["pie","rich"],id:"pie-rich-text",title:"Pie Special Label",difficulty:10},{category:["pie"],id:"pie-roseType",title:"Nightingale's Rose Diagram",difficulty:10},{category:["pie"],id:"pie-simple",title:"Referer of a website",difficulty:10},{category:["bar"],id:"polar-roundCap",title:"Rounded Bar on Polar",difficulty:10},{category:["radar"],id:"radar",title:"Basic Radar Chart",difficulty:10},{category:["radar"],id:"radar-aqi",title:"AQI - Radar Chart",difficulty:10},{category:["radar"],id:"radar-custom",title:"Customized Radar Chart",difficulty:10},{category:["radar"],id:"radar-multiple",title:"Multiple Radar",difficulty:10},{category:["radar"],id:"radar2",title:"Proportion of Browsers",difficulty:10},{category:["sankey"],id:"sankey-energy",title:"Sankey Diagram",difficulty:10},{category:["sankey"],id:"sankey-itemstyle",title:"Specify ItemStyle for Each Node in Sankey",difficulty:10},{category:["sankey"],id:"sankey-levels",title:"Sankey with Levels Setting",difficulty:10},{category:["sankey"],id:"sankey-nodeAlign-left",title:"Node Align Left in Sankey",difficulty:10},{category:["sankey"],id:"sankey-nodeAlign-right",title:"Node Align Right in Sankey",difficulty:10},{category:["sankey"],id:"sankey-simple",title:"Basic Sankey",difficulty:10},{category:["sankey"],id:"sankey-vertical",title:"Sankey Orient Vertical",difficulty:10},{category:["scatter"],id:"scatter-anscombe-quartet",title:"Anscombe&#39;s quartet",difficulty:10},{category:["scatter"],id:"scatter-aqi-color",title:"Scatter Aqi Color",difficulty:10},{category:["scatter"],id:"scatter-clustering-process",title:"Clustering Process",difficulty:10},{category:["scatter"],id:"scatter-effect",title:"Effect Scatter Chart",difficulty:10},{category:["scatter"],id:"scatter-exponential-regression",title:"Exponential Regression",difficulty:10},{category:["scatter"],id:"scatter-large",theme:"light",title:"Large Scatter",difficulty:10},{category:["scatter"],id:"scatter-life-expectancy-timeline",title:"Life Expectancy and GDP",difficulty:10},{category:["scatter"],id:"scatter-linear-regression",title:"Linear Regression",difficulty:10},{category:["scatter"],id:"scatter-logarithmic-regression",title:"Logarithmic Regression",difficulty:10},{category:["scatter"],id:"scatter-map",title:"Air Quality",difficulty:10},{category:["scatter"],id:"scatter-map-brush",title:"Scatter Map Brush",difficulty:10},{category:["parallel","scatter"],id:"scatter-matrix",title:"Scatter Matrix",difficulty:10},{category:["scatter"],id:"scatter-nebula",title:"Scatter Nebula",difficulty:10},{category:["scatter"],id:"scatter-nutrients",title:"Scatter Nutrients",difficulty:10},{category:["scatter"],id:"scatter-nutrients-matrix",title:"Scatter Nutrients Matrix",difficulty:10},{category:["scatter"],id:"scatter-painter-choice",title:"Master Painter Color Choices Throughout History",difficulty:10},{category:["scatter"],id:"scatter-polar-punchCard",title:"Punch Card of Github",difficulty:10},{category:["scatter"],id:"scatter-polynomial-regression",title:"Polynomial Regression",difficulty:10},{category:["scatter"],id:"scatter-punchCard",title:"Punch Card of Github",difficulty:10},{category:["scatter"],id:"scatter-single-axis",title:"Scatter on Single Axis",difficulty:10},{category:["scatter"],id:"scatter-stream-visual",title:"Visual interaction with stream",difficulty:10},{category:["scatter"],id:"scatter-weibo",title:"Sign in of weibo",difficulty:10},{category:["scatter"],id:"scatter-weight",title:"Distribution of Height and Weight",difficulty:10},{category:["scatter"],id:"scatter-world-population",title:"World Population (2011)",difficulty:10},{category:["sunburst"],id:"sunburst-book",title:"Book Records",difficulty:10},{category:["sunburst"],id:"sunburst-drink",title:"Drink Flavors",difficulty:10},{category:["sunburst"],id:"sunburst-label-rotate",title:"Sunburst Label Rotate",difficulty:10},{category:["sunburst"],id:"sunburst-monochrome",title:"Monochrome Sunburst",difficulty:10},{category:["sunburst"],id:"sunburst-simple",title:"Basic Sunburst",difficulty:10},{category:["sunburst"],id:"sunburst-visualMap",title:"Sunburst VisualMap",difficulty:10},{category:["themeRiver"],id:"themeRiver-basic",title:"ThemeRiver",difficulty:10},{category:["themeRiver"],id:"themeRiver-lastfm",title:"ThemeRiver Lastfm",difficulty:10},{category:["tree"],id:"tree-basic",title:"From Left to Right Tree",difficulty:10},{category:["tree"],id:"tree-legend",title:"Multiple Trees",difficulty:10},{category:["tree"],id:"tree-orient-bottom-top",title:"From Bottom to Top Tree",difficulty:10},{category:["tree"],id:"tree-orient-right-left",title:"From Right to Left Tree",difficulty:10},{category:["tree"],id:"tree-polyline",title:"Tree with Polyline Edge",difficulty:10},{category:["tree"],id:"tree-radial",title:"Radial Tree",difficulty:10},{category:["tree"],id:"tree-vertical",title:"From Top to Bottom Tree",difficulty:10},{category:["treemap"],id:"treemap-disk",title:"Disk Usage",difficulty:10},{category:["treemap"],id:"treemap-drill-down",title:"ECharts Option Query",difficulty:10},{category:["treemap"],id:"treemap-obama",title:"How $3.7 Trillion is Spent",difficulty:10},{category:["treemap"],id:"treemap-show-parent",title:"Show Parent Labels",difficulty:10},{category:["treemap"],id:"treemap-simple",title:"Basic Treemap",difficulty:10},{category:["treemap"],id:"treemap-visual",title:"Gradient Mapping",difficulty:10},{category:["bar"],id:"watermark",title:"Watermark - ECharts Download",difficulty:10},{category:["custom","dataZoom"],id:"wind-barb",title:"Wind Barb",difficulty:10}];
\ No newline at end of file
diff --git a/examples/zh/editor.html b/examples/zh/editor.html
index 2c1d78d..9d9f870 100644
--- a/examples/zh/editor.html
+++ b/examples/zh/editor.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/examples/images/favicon.png?_v_=20200710_1"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/examples/stylesheets/main.css?_v_=1597861062346"><title>Examples - Apache ECharts (incubating)</title><script type="text/javascript">window.EC_DEMO_LANG = 'zh';
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/examples/images/favicon.png?_v_=20200710_1"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/examples/stylesheets/main.css?_v_=1598523330519"><title>Examples - Apache ECharts (incubating)</title><script type="text/javascript">window.EC_DEMO_LANG = 'zh';
 </script></head><body><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网以获取最新版的网站信息。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><nav 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://echarts-www.cdn.bcebos.com/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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=20200710_1" width="18"></a></li></ul></div></div></nav><script type="text/javascript">var selector = window.EC_DEMO_LANG === 'en' ? 'nav-start' : 'nav-examples';
 var menu = document.getElementById(selector);
 if (menu) {
@@ -8,7 +8,7 @@
     var nav = document.getElementsByClassName('navbar')[0];
     nav.parentNode.removeChild(nav);
     document.getElementById('main-container').style.top = 0;
-}</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@1.11.3/dist/jquery.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lodash@3.10.1/index.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/examples/javascripts/common.js?_v_=1597861062346"></script><script type="text/javascript">function changeLang(lang) {
+}</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@1.11.3/dist/jquery.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lodash@3.10.1/index.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/examples/javascripts/common.js?_v_=1598523330519"></script><script type="text/javascript">function changeLang(lang) {
     if (lang === 'en') {
         if (location.hostname !== 'echarts.apache.org') {
             var re = new RegExp('/zh/', 'g');
@@ -40,9 +40,9 @@
 // But echarts-gl do not support CORS yet, still use same origin.
 window.ROOT_PATH = EC_EXAMPLE_IS_GL ? 'https://echarts.apache.org/examples' : 'https://echarts-www.cdn.bcebos.com/examples';
 window.CDN_PAY_ROOT_PATH = 'https://echarts-www.cdn.bcebos.com/examples';
-window.CDN_PAY_VERSION = '20200710_2';
+window.CDN_PAY_VERSION = '20200710_1';
 window.CDN_THIRD_PARTY_ECHARTS_GL = 'https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js'
-</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/dat.gui@0.6.5/build/dat.gui.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js?_v_=1597861062346"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js?_v_=1597861062346"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js?_v_=1597861062346"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.js?_v_=1597861062346"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ace-builds@1.2.5/src-noconflict/ace.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ace-builds@1.2.5/src-noconflict/ext-language_tools.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/examples/javascripts/editor.js?_v_=1597861062346"></script><script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&amp;ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu&amp;__ec_v__=20190126"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.js?_v_=1597861062346"></script><script type="text/javascript">document.getElementById('nav-examples').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/dat.gui@0.6.5/build/dat.gui.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js?_v_=1598523330519"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js?_v_=1598523330519"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js?_v_=1598523330519"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.js?_v_=1598523330519"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ace-builds@1.2.5/src-noconflict/ace.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ace-builds@1.2.5/src-noconflict/ext-language_tools.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/examples/javascripts/editor.js?_v_=1598523330519"></script><script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&amp;ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu&amp;__ec_v__=20190126"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.js?_v_=1598523330519"></script><script type="text/javascript">document.getElementById('nav-examples').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
 
diff --git a/examples/zh/index.html b/examples/zh/index.html
index 8ff1d9a..c4ecd33 100644
--- a/examples/zh/index.html
+++ b/examples/zh/index.html
@@ -1,10 +1,10 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/examples/images/favicon.png?_v_=20200710_1"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/examples/stylesheets/main.css?_v_=1597861062346"><title>Examples - Apache ECharts (incubating)</title><script type="text/javascript">window.EC_DEMO_LANG = 'zh';
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/examples/images/favicon.png?_v_=20200710_1"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/examples/stylesheets/main.css?_v_=1598523330519"><title>Examples - Apache ECharts (incubating)</title><script type="text/javascript">window.EC_DEMO_LANG = 'zh';
 </script></head><body><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网以获取最新版的网站信息。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><nav 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://echarts-www.cdn.bcebos.com/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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=20200710_1" width="18"></a></li></ul></div></div></nav><script type="text/javascript">var selector = window.EC_DEMO_LANG === 'en' ? 'nav-start' : 'nav-examples';
 var menu = document.getElementById(selector);
 if (menu) {
     menu.className = 'active';
 }
-</script><div id="left-chart-nav"><ul></ul></div><div id="explore-container"><div id="toolbar"><div id="theme"><span>Theme:</span><a href="./index.html" title="default" data-theme="default" class="default"><span></span></a><a href="./index.html?theme=light" title="light" data-theme="light" class="light"><span></span></a><a href="./index.html?theme=dark" title="dark" data-theme="dark" class="dark"><span></span></a></div></div><div class="chart-list-panel"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@1.11.3/dist/jquery.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lodash@3.10.1/index.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/examples/javascripts/common.js?_v_=1597861062346"></script><script type="text/javascript">function changeLang(lang) {
+</script><div id="left-chart-nav"><ul></ul></div><div id="explore-container"><div id="toolbar"><div id="theme"><span>Theme:</span><a href="./index.html" title="default" data-theme="default" class="default"><span></span></a><a href="./index.html?theme=light" title="light" data-theme="light" class="light"><span></span></a><a href="./index.html?theme=dark" title="dark" data-theme="dark" class="dark"><span></span></a></div></div><div class="chart-list-panel"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@1.11.3/dist/jquery.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lodash@3.10.1/index.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/examples/javascripts/common.js?_v_=1598523330519"></script><script type="text/javascript">function changeLang(lang) {
     if (lang === 'en') {
         if (location.hostname !== 'echarts.apache.org') {
             var re = new RegExp('/zh/', 'g');
@@ -38,7 +38,7 @@
 window.CDN_PAY_ROOT_PATH = 'https://echarts-www.cdn.bcebos.com/examples';
 window.CDN_PAY_VERSION = '20200710_1';
 window.CDN_THIRD_PARTY_ECHARTS_GL = 'https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js'
-</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/waypoints@4.0.0/lib/jquery.waypoints.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-lazyload@1.9.7/jquery.lazyload.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/examples/javascripts/chart-list-data.js?_v_=1597861062346"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/examples/javascripts/chart-list-data-gl.js?_v_=1597861062346"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/examples/javascripts/chart-list.js?_v_=1597861062346"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/waypoints@4.0.0/lib/jquery.waypoints.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-lazyload@1.9.7/jquery.lazyload.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/examples/javascripts/chart-list-data.js?_v_=1598523330519"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/examples/javascripts/chart-list-data-gl.js?_v_=1598523330519"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/examples/javascripts/chart-list.js?_v_=1598523330519"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
 
diff --git a/examples/zh/view.html b/examples/zh/view.html
index cb1e4f9..fd56a18 100644
--- a/examples/zh/view.html
+++ b/examples/zh/view.html
@@ -1,5 +1,5 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/examples/images/favicon.png?_v_=20200710_1"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/examples/stylesheets/main.css?_v_=1597861062346"><title>Examples - Apache ECharts (incubating)</title><script type="text/javascript">window.EC_DEMO_LANG = 'zh';
-</script></head><body><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网以获取最新版的网站信息。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="view-main"><div class="control-panel"></div><div id="view-chart" class="chart"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@1.11.3/dist/jquery.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lodash@3.10.1/index.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/examples/javascripts/common.js?_v_=1597861062346"></script><script type="text/javascript">function changeLang(lang) {
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/examples/images/favicon.png?_v_=20200710_1"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/examples/stylesheets/main.css?_v_=1598523330519"><title>Examples - Apache ECharts (incubating)</title><script type="text/javascript">window.EC_DEMO_LANG = 'zh';
+</script></head><body><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网以获取最新版的网站信息。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="view-main"><div class="control-panel"></div><div id="view-chart" class="chart"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@1.11.3/dist/jquery.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lodash@3.10.1/index.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/examples/javascripts/common.js?_v_=1598523330519"></script><script type="text/javascript">function changeLang(lang) {
     if (lang === 'en') {
         if (location.hostname !== 'echarts.apache.org') {
             var re = new RegExp('/zh/', 'g');
@@ -33,7 +33,7 @@
 window.CDN_PAY_ROOT_PATH = 'https://echarts-www.cdn.bcebos.com/examples';
 window.CDN_PAY_VERSION = '20200710_1';
 window.CDN_THIRD_PARTY_ECHARTS_GL = 'https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js'
-</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/dat.gui@0.6.5/build/dat.gui.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js?_v_=1597861062346"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script><script id="echarts-js" type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js?_v_=1597861062346"></script><script id="echarts-js" type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js?_v_=1597861062346"></script><script id="echarts-js" type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.js?_v_=1597861062346"></script><script id="echarts-js" type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&amp;ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu&amp;__ec_v__=20190126"></script><script id="echarts-js" type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.js?_v_=1597861062346"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/examples/javascripts/view.js?_v_=1597861062346"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/dat.gui@0.6.5/build/dat.gui.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js?_v_=1598523330519"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script><script id="echarts-js" type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js?_v_=1598523330519"></script><script id="echarts-js" type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js?_v_=1598523330519"></script><script id="echarts-js" type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.js?_v_=1598523330519"></script><script id="echarts-js" type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&amp;ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu&amp;__ec_v__=20190126"></script><script id="echarts-js" type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.js?_v_=1598523330519"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/examples/javascripts/view.js?_v_=1598523330519"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
 
diff --git a/layouts/basic.html b/layouts/basic.html
index 1984848..be80c1d 100644
--- a/layouts/basic.html
+++ b/layouts/basic.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -7,7 +7,7 @@
     document.head.insertBefore(el, document.getElementById('font-hack'));
 }
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=1597861067124"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=1598523334942"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
 
diff --git a/layouts/doc-old.html b/layouts/doc-old.html
index c19d636..8473c79 100644
--- a/layouts/doc-old.html
+++ b/layouts/doc-old.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -6,13 +6,13 @@
         + '@font-face {font-family:"noto-light";src:local("Microsoft Yahei");}';
     document.head.insertBefore(el, document.getElementById('font-hack'));
 }
-</script><title>ECharts Documentation</title><link rel="stylesheet" type="text/css" href="css/ecOption.css?_v_=1597861067124"><link rel="stylesheet" type="text/css" href="vendors/prettify/prettify.css"><link rel="stylesheet" type="text/css" href="vendors/perfect-scrollbar/0.6.8/css/perfect-scrollbar.min.css"><link rel="stylesheet" type="text/css" href="vendors/jquery-autocomplete/jquery.auto-complete.css"><link rel="stylesheet" type="text/css" href="vendors/twentytwenty/twentytwenty.css"><script src="vendors/prettify/prettify.js"></script><script src="vendors/prettify/lang-css.js"></script><script src="vendors/esl.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://echarts.apache.org/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="ecdoc-apidoc"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=1597861067124"></script><script src="vendors/twentytwenty/jquery.event.move.js"></script><script src="vendors/twentytwenty/jquery.twentytwenty.js"></script><script src="vendors/jquery-autocomplete/jquery.auto-complete.min.js"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
+</script><title>ECharts Documentation</title><link rel="stylesheet" type="text/css" href="css/ecOption.css?_v_=1598523334942"><link rel="stylesheet" type="text/css" href="vendors/prettify/prettify.css"><link rel="stylesheet" type="text/css" href="vendors/perfect-scrollbar/0.6.8/css/perfect-scrollbar.min.css"><link rel="stylesheet" type="text/css" href="vendors/jquery-autocomplete/jquery.auto-complete.css"><link rel="stylesheet" type="text/css" href="vendors/twentytwenty/twentytwenty.css"><script src="vendors/prettify/prettify.js"></script><script src="vendors/prettify/lang-css.js"></script><script src="vendors/esl.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://echarts.apache.org/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="ecdoc-apidoc"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=1598523334942"></script><script src="vendors/twentytwenty/jquery.event.move.js"></script><script src="vendors/twentytwenty/jquery.twentytwenty.js"></script><script src="vendors/jquery-autocomplete/jquery.auto-complete.min.js"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
 
 var vendorPath = '../vendors';
 
 define('globalArgs', extend({
-    version: '1597861067124',
+    version: '1598523334942',
     basePath: './',
     // Schema url is added by each doc page
     schemaUrl: '',
@@ -39,7 +39,7 @@
         hasher: vendorPath + '/hasher/1.2.0/hasher.min',
         perfectScrollbar: vendorPath + '/perfect-scrollbar/0.6.8/js/perfect-scrollbar'
     },
-    urlArgs: '_v_=1597861067124'
+    urlArgs: '_v_=1598523334942'
 });
 
 require(['docTool/main'], function (main) {
diff --git a/layouts/doc.html b/layouts/doc.html
index 64671e6..ba9f743 100644
--- a/layouts/doc.html
+++ b/layouts/doc.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -9,10 +9,10 @@
 </script><title>Documentation - Apache ECharts(incubating)</title><style>html, body {
     /* position: sticky should not have overflow parents.*/
     overflow-x: hidden;
-}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/zh/css/doc-bundle.css?_v_=1597861067124"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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://echarts.apache.org/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-doc-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=1597861067124"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts.apache.org/zh/js/doc-bundle.js?_v_=1597861067124"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
+}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/zh/css/doc-bundle.css?_v_=1598523334942"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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://echarts.apache.org/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-doc-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=1598523334942"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts.apache.org/zh/js/doc-bundle.js?_v_=1598523334942"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
 </script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
-window.globalArgsExtra.version = '1597861067124';
+window.globalArgsExtra.version = '1598523334942';
 echartsDoc.init('#ec-doc-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
diff --git a/layouts/next-doc.html b/layouts/next-doc.html
index 39c138f..c062cfa 100644
--- a/layouts/next-doc.html
+++ b/layouts/next-doc.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -9,10 +9,10 @@
 </script><title>Documentation - Apache ECharts(incubating)</title><style>html, body {
     /* position: sticky should not have overflow parents.*/
     overflow-x: hidden;
-}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/next/zh/css/doc-bundle.css?_v_=1597861067124"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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://echarts.apache.org/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-doc-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=1597861067124"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts.apache.org/next/zh/js/doc-bundle.js?_v_=1597861067124"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
+}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/next/zh/css/doc-bundle.css?_v_=1598523334942"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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://echarts.apache.org/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-doc-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=1598523334942"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts.apache.org/next/zh/js/doc-bundle.js?_v_=1598523334942"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
 </script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
-window.globalArgsExtra.version = '1597861067124';
+window.globalArgsExtra.version = '1598523334942';
 echartsDoc.init('#ec-doc-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
diff --git a/layouts/next-example-simple.html b/layouts/next-example-simple.html
index e376054..25b4f63 100644
--- a/layouts/next-example-simple.html
+++ b/layouts/next-example-simple.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -9,9 +9,9 @@
 </script><title>Examples - Apache ECharts(incubating)</title><style>html, body {
     /* position: sticky should not have overflow parents.*/
     overflow-x: hidden;
-}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/next/examples/css/example-bundle.css?_v_=1597861067124"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><div id="ec-example-main"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=1597861067124"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://echarts.apache.org/next/examples/js/example-bundle.js?_v_=1597861067124"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
-</script><script type="text/javascript">window.globalArgsExtra.version = '1597861067124';
+}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/next/examples/css/example-bundle.css?_v_=1598523334942"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><div id="ec-example-main"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=1598523334942"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://echarts.apache.org/next/examples/js/example-bundle.js?_v_=1598523334942"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
+</script><script type="text/javascript">window.globalArgsExtra.version = '1598523334942';
 window.globalArgsExtra.cdnRoot = EC_WWW_CDN_PAY_ROOT + '/next/examples';
 echartsExample.init('#ec-example-main', window.globalArgsExtra);
 
diff --git a/layouts/next-example.html b/layouts/next-example.html
index 95c32e5..7b111d3 100644
--- a/layouts/next-example.html
+++ b/layouts/next-example.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -9,10 +9,10 @@
 </script><title>Examples - Apache ECharts(incubating)</title><style>html, body {
     /* position: sticky should not have overflow parents.*/
     overflow-x: hidden;
-}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/next/examples/css/example-bundle.css?_v_=1597861067124"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-example-nav" 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://echarts.apache.org/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-example-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=1597861067124"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://echarts.apache.org/next/examples/js/example-bundle.js?_v_=1597861067124"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
+}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/next/examples/css/example-bundle.css?_v_=1598523334942"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-example-nav" 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://echarts.apache.org/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-example-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=1598523334942"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://echarts.apache.org/next/examples/js/example-bundle.js?_v_=1598523334942"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
 </script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
-window.globalArgsExtra.version = '1597861067124';
+window.globalArgsExtra.version = '1598523334942';
 window.globalArgsExtra.cdnRoot = EC_WWW_CDN_PAY_ROOT + '/next/examples';
 echartsExample.init('#ec-example-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
diff --git a/manually-redirect.html b/manually-redirect.html
index 658ceac..e59ea14 100644
--- a/manually-redirect.html
+++ b/manually-redirect.html
@@ -11,4 +11,5 @@
 }
 .content {
     transform: translate(-50%, -50%);
-}</style></head><body><div class="main"><div class="content"><span>该域名已不再使用,请访问 &nbsp;</span><a id="a" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div></div><script type="text/javascript">document.getElementById('a').setAttribute('href', 'https://echarts.apache.org/zh/index.html'+((!location.pathname||location.pathname==='/')?'':location.pathname+(!location.search?'':location.search+(!location.hash?'':location.hash))));</script></body>
\ No newline at end of file
+}</style></head><body><div class="main"><div class="content"><div><span>ECharts 正在 Apache 开源基金会孵化中,因此本域名不再使用,请访问 &nbsp;</span><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><div><span>ECharts is now under incubation at the Apache Software Foundation. So this domain name is no longer in use. Visit</span><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a><span>please</span></div></div></div><script type="text/javascript">document.getElementById('a1').setAttribute('href', 'https://echarts.apache.org/zh/index.html'+((!location.pathname||location.pathname==='/')?'':location.pathname+(!location.search?'':location.search)+(!location.hash?'':location.hash)));
+document.getElementById('a2').setAttribute('href', document.getElementById('a1').getAttribute('href'));</script></body>
\ No newline at end of file
diff --git a/next/en/api.html b/next/en/api.html
index dbc80b2..dc8f0f8 100644
--- a/next/en/api.html
+++ b/next/en/api.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'en';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -9,8 +9,8 @@
 </script><title>Documentation - Apache ECharts(incubating)</title><style>html, body {
     /* position: sticky should not have overflow parents.*/
     overflow-x: hidden;
-}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/next/en/css/doc-bundle.css?_v_=1597861067124"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-doc-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1597861067124"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts.apache.org/next/en/js/doc-bundle.js?_v_=1597861067124"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
+}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/next/en/css/doc-bundle.css?_v_=1598523334942"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-doc-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1598523334942"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts.apache.org/next/en/js/doc-bundle.js?_v_=1598523334942"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
 </script><script type="text/javascript">window.globalArgsExtra = {
     baseUrl: 'documents/api-parts',
     docType: 'api',
@@ -19,7 +19,7 @@
 if (window.EC_WWW_CDN_PAY_ROOT) {
     window.globalArgsExtra.cdnRoot = window.EC_WWW_CDN_PAY_ROOT + '/next/en/' + window.globalArgsExtra.baseUrl
 }</script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
-window.globalArgsExtra.version = '1597861067124';
+window.globalArgsExtra.version = '1598523334942';
 echartsDoc.init('#ec-doc-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
diff --git a/next/en/option-gl.html b/next/en/option-gl.html
index b877c0c..82fe390 100644
--- a/next/en/option-gl.html
+++ b/next/en/option-gl.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'en';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -9,8 +9,8 @@
 </script><title>Documentation - Apache ECharts(incubating)</title><style>html, body {
     /* position: sticky should not have overflow parents.*/
     overflow-x: hidden;
-}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/next/en/css/doc-bundle.css?_v_=1597861067124"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-doc-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1597861067124"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts.apache.org/next/en/js/doc-bundle.js?_v_=1597861067124"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
+}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/next/en/css/doc-bundle.css?_v_=1598523334942"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-doc-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1598523334942"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts.apache.org/next/en/js/doc-bundle.js?_v_=1598523334942"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
 </script><script type="text/javascript">window.globalArgsExtra = {
     baseUrl: 'documents/option-gl-parts',
     docType: 'option-gl',
@@ -19,7 +19,7 @@
 if (window.EC_WWW_CDN_PAY_ROOT) {
     window.globalArgsExtra.cdnRoot = window.EC_WWW_CDN_PAY_ROOT + '/next/en/' + window.globalArgsExtra.baseUrl
 }</script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
-window.globalArgsExtra.version = '1597861067124';
+window.globalArgsExtra.version = '1598523334942';
 echartsDoc.init('#ec-doc-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
diff --git a/next/en/option.html b/next/en/option.html
index 172c366..9159ba7 100644
--- a/next/en/option.html
+++ b/next/en/option.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'en';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -9,8 +9,8 @@
 </script><title>Documentation - Apache ECharts(incubating)</title><style>html, body {
     /* position: sticky should not have overflow parents.*/
     overflow-x: hidden;
-}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/next/en/css/doc-bundle.css?_v_=1597861067124"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-doc-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1597861067124"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts.apache.org/next/en/js/doc-bundle.js?_v_=1597861067124"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
+}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/next/en/css/doc-bundle.css?_v_=1598523334942"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-doc-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1598523334942"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts.apache.org/next/en/js/doc-bundle.js?_v_=1598523334942"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
 </script><script type="text/javascript">window.globalArgsExtra = {
     baseUrl: 'documents/option-parts',
     docType: 'option',
@@ -19,7 +19,7 @@
 if (window.EC_WWW_CDN_PAY_ROOT) {
     window.globalArgsExtra.cdnRoot = window.EC_WWW_CDN_PAY_ROOT + '/next/en/' + window.globalArgsExtra.baseUrl
 }</script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
-window.globalArgsExtra.version = '1597861067124';
+window.globalArgsExtra.version = '1598523334942';
 echartsDoc.init('#ec-doc-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
diff --git a/next/en/tutorial.html b/next/en/tutorial.html
index 0188a9c..010883f 100644
--- a/next/en/tutorial.html
+++ b/next/en/tutorial.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'en';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -9,8 +9,8 @@
 </script><title>Documentation - Apache ECharts(incubating)</title><style>html, body {
     /* position: sticky should not have overflow parents.*/
     overflow-x: hidden;
-}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/next/en/css/doc-bundle.css?_v_=1597861067124"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-doc-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1597861067124"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts.apache.org/next/en/js/doc-bundle.js?_v_=1597861067124"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
+}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/next/en/css/doc-bundle.css?_v_=1598523334942"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-doc-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1598523334942"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts.apache.org/next/en/js/doc-bundle.js?_v_=1598523334942"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
 </script><script type="text/javascript">window.globalArgsExtra = {
     baseUrl: 'documents/tutorial-parts',
     docType: 'tutorial',
@@ -19,7 +19,7 @@
 if (window.EC_WWW_CDN_PAY_ROOT) {
     window.globalArgsExtra.cdnRoot = window.EC_WWW_CDN_PAY_ROOT + '/next/en/' + window.globalArgsExtra.baseUrl
 }</script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
-window.globalArgsExtra.version = '1597861067124';
+window.globalArgsExtra.version = '1598523334942';
 echartsDoc.init('#ec-doc-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
diff --git a/next/examples/en/editor.html b/next/examples/en/editor.html
index cba146e..d798bfa 100644
--- a/next/examples/en/editor.html
+++ b/next/examples/en/editor.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'en';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -9,13 +9,13 @@
 </script><title>Examples - Apache ECharts(incubating)</title><style>html, body {
     /* position: sticky should not have overflow parents.*/
     overflow-x: hidden;
-}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/next/examples/css/example-bundle.css?_v_=1597861067124"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-example-nav" 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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-example-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1597861067124"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://echarts.apache.org/next/examples/js/example-bundle.js?_v_=1597861067124"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
+}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/next/examples/css/example-bundle.css?_v_=1598523334942"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-example-nav" 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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-example-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1598523334942"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://echarts.apache.org/next/examples/js/example-bundle.js?_v_=1598523334942"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
 </script><script type="text/javascript">window.globalArgsExtra = {
     page: 'editor',
     locale: 'en'
 };</script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
-window.globalArgsExtra.version = '1597861067124';
+window.globalArgsExtra.version = '1598523334942';
 window.globalArgsExtra.cdnRoot = EC_WWW_CDN_PAY_ROOT + '/next/examples';
 echartsExample.init('#ec-example-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
diff --git a/next/examples/en/index.html b/next/examples/en/index.html
index 137cd64..d768815 100644
--- a/next/examples/en/index.html
+++ b/next/examples/en/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'en';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -9,13 +9,13 @@
 </script><title>Examples - Apache ECharts(incubating)</title><style>html, body {
     /* position: sticky should not have overflow parents.*/
     overflow-x: hidden;
-}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/next/examples/css/example-bundle.css?_v_=1597861067124"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-example-nav" 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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-example-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1597861067124"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://echarts.apache.org/next/examples/js/example-bundle.js?_v_=1597861067124"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
+}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/next/examples/css/example-bundle.css?_v_=1598523334942"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-example-nav" 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></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/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/incubator-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/incubator-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">Others<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">Licenses<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-example-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1598523334942"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://echarts.apache.org/next/examples/js/example-bundle.js?_v_=1598523334942"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
 </script><script type="text/javascript">window.globalArgsExtra = {
     page: 'explore',
     locale: 'en'
 };</script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
-window.globalArgsExtra.version = '1597861067124';
+window.globalArgsExtra.version = '1598523334942';
 window.globalArgsExtra.cdnRoot = EC_WWW_CDN_PAY_ROOT + '/next/examples';
 echartsExample.init('#ec-example-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
diff --git a/next/examples/en/view.html b/next/examples/en/view.html
index 3594e6d..a2b4814 100644
--- a/next/examples/en/view.html
+++ b/next/examples/en/view.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'en';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -9,12 +9,12 @@
 </script><title>Examples - Apache ECharts(incubating)</title><style>html, body {
     /* position: sticky should not have overflow parents.*/
     overflow-x: hidden;
-}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/next/examples/css/example-bundle.css?_v_=1597861067124"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><div id="ec-example-main"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1597861067124"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://echarts.apache.org/next/examples/js/example-bundle.js?_v_=1597861067124"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
+}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/next/examples/css/example-bundle.css?_v_=1598523334942"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><div id="ec-example-main"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=1598523334942"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://echarts.apache.org/next/examples/js/example-bundle.js?_v_=1598523334942"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
 </script><script type="text/javascript">window.globalArgsExtra = {
     page: 'view',
     locale: 'en'
-};</script><script type="text/javascript">window.globalArgsExtra.version = '1597861067124';
+};</script><script type="text/javascript">window.globalArgsExtra.version = '1598523334942';
 window.globalArgsExtra.cdnRoot = EC_WWW_CDN_PAY_ROOT + '/next/examples';
 echartsExample.init('#ec-example-main', window.globalArgsExtra);
 
diff --git a/next/examples/zh/editor.html b/next/examples/zh/editor.html
index 4c93adc..6130e58 100644
--- a/next/examples/zh/editor.html
+++ b/next/examples/zh/editor.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -9,13 +9,13 @@
 </script><title>Examples - Apache ECharts(incubating)</title><style>html, body {
     /* position: sticky should not have overflow parents.*/
     overflow-x: hidden;
-}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/next/examples/css/example-bundle.css?_v_=1597861067124"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-example-nav" 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://echarts.apache.org/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-example-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=1597861067124"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://echarts.apache.org/next/examples/js/example-bundle.js?_v_=1597861067124"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
+}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/next/examples/css/example-bundle.css?_v_=1598523334942"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-example-nav" 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://echarts.apache.org/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-example-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=1598523334942"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://echarts.apache.org/next/examples/js/example-bundle.js?_v_=1598523334942"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
 </script><script type="text/javascript">window.globalArgsExtra = {
     page: 'editor',
     locale: 'zh'
 };</script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
-window.globalArgsExtra.version = '1597861067124';
+window.globalArgsExtra.version = '1598523334942';
 window.globalArgsExtra.cdnRoot = EC_WWW_CDN_PAY_ROOT + '/next/examples';
 echartsExample.init('#ec-example-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
diff --git a/next/examples/zh/index.html b/next/examples/zh/index.html
index fe23313..9d0009f 100644
--- a/next/examples/zh/index.html
+++ b/next/examples/zh/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -9,13 +9,13 @@
 </script><title>Examples - Apache ECharts(incubating)</title><style>html, body {
     /* position: sticky should not have overflow parents.*/
     overflow-x: hidden;
-}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/next/examples/css/example-bundle.css?_v_=1597861067124"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-example-nav" 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://echarts.apache.org/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-example-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=1597861067124"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://echarts.apache.org/next/examples/js/example-bundle.js?_v_=1597861067124"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
+}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/next/examples/css/example-bundle.css?_v_=1598523334942"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-example-nav" 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://echarts.apache.org/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-example-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=1598523334942"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://echarts.apache.org/next/examples/js/example-bundle.js?_v_=1598523334942"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
 </script><script type="text/javascript">window.globalArgsExtra = {
     page: 'explore',
     locale: 'zh'
 };</script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
-window.globalArgsExtra.version = '1597861067124';
+window.globalArgsExtra.version = '1598523334942';
 window.globalArgsExtra.cdnRoot = EC_WWW_CDN_PAY_ROOT + '/next/examples';
 echartsExample.init('#ec-example-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
diff --git a/next/examples/zh/view.html b/next/examples/zh/view.html
index cd665df..adc5361 100644
--- a/next/examples/zh/view.html
+++ b/next/examples/zh/view.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -9,12 +9,12 @@
 </script><title>Examples - Apache ECharts(incubating)</title><style>html, body {
     /* position: sticky should not have overflow parents.*/
     overflow-x: hidden;
-}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/next/examples/css/example-bundle.css?_v_=1597861067124"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><div id="ec-example-main"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=1597861067124"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://echarts.apache.org/next/examples/js/example-bundle.js?_v_=1597861067124"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
+}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/next/examples/css/example-bundle.css?_v_=1598523334942"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><div id="ec-example-main"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=1598523334942"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://echarts.apache.org/next/examples/js/example-bundle.js?_v_=1598523334942"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
 </script><script type="text/javascript">window.globalArgsExtra = {
     page: 'view',
     locale: 'zh'
-};</script><script type="text/javascript">window.globalArgsExtra.version = '1597861067124';
+};</script><script type="text/javascript">window.globalArgsExtra.version = '1598523334942';
 window.globalArgsExtra.cdnRoot = EC_WWW_CDN_PAY_ROOT + '/next/examples';
 echartsExample.init('#ec-example-main', window.globalArgsExtra);
 
diff --git a/next/zh/api.html b/next/zh/api.html
index b896394..5cfb5b7 100644
--- a/next/zh/api.html
+++ b/next/zh/api.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -9,8 +9,8 @@
 </script><title>Documentation - Apache ECharts(incubating)</title><style>html, body {
     /* position: sticky should not have overflow parents.*/
     overflow-x: hidden;
-}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/next/zh/css/doc-bundle.css?_v_=1597861067124"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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://echarts.apache.org/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-doc-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=1597861067124"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts.apache.org/next/zh/js/doc-bundle.js?_v_=1597861067124"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
+}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/next/zh/css/doc-bundle.css?_v_=1598523334942"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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://echarts.apache.org/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-doc-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=1598523334942"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts.apache.org/next/zh/js/doc-bundle.js?_v_=1598523334942"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
 </script><script type="text/javascript">window.globalArgsExtra = {
     baseUrl: 'documents/api-parts',
     docType: 'api',
@@ -19,7 +19,7 @@
 if (window.EC_WWW_CDN_PAY_ROOT) {
     window.globalArgsExtra.cdnRoot = window.EC_WWW_CDN_PAY_ROOT + '/next/zh/' + window.globalArgsExtra.baseUrl
 }</script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
-window.globalArgsExtra.version = '1597861067124';
+window.globalArgsExtra.version = '1598523334942';
 echartsDoc.init('#ec-doc-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
diff --git a/next/zh/option-gl.html b/next/zh/option-gl.html
index 5934e8e..5aa79fe 100644
--- a/next/zh/option-gl.html
+++ b/next/zh/option-gl.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -9,8 +9,8 @@
 </script><title>Documentation - Apache ECharts(incubating)</title><style>html, body {
     /* position: sticky should not have overflow parents.*/
     overflow-x: hidden;
-}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/next/zh/css/doc-bundle.css?_v_=1597861067124"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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://echarts.apache.org/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-doc-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=1597861067124"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts.apache.org/next/zh/js/doc-bundle.js?_v_=1597861067124"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
+}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/next/zh/css/doc-bundle.css?_v_=1598523334942"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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://echarts.apache.org/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-doc-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=1598523334942"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts.apache.org/next/zh/js/doc-bundle.js?_v_=1598523334942"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
 </script><script type="text/javascript">window.globalArgsExtra = {
     baseUrl: 'documents/option-gl-parts',
     docType: 'option-gl',
@@ -19,7 +19,7 @@
 if (window.EC_WWW_CDN_PAY_ROOT) {
     window.globalArgsExtra.cdnRoot = window.EC_WWW_CDN_PAY_ROOT + '/next/zh/' + window.globalArgsExtra.baseUrl
 }</script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
-window.globalArgsExtra.version = '1597861067124';
+window.globalArgsExtra.version = '1598523334942';
 echartsDoc.init('#ec-doc-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
diff --git a/next/zh/option.html b/next/zh/option.html
index 4b357f1..7b71b50 100644
--- a/next/zh/option.html
+++ b/next/zh/option.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -9,8 +9,8 @@
 </script><title>Documentation - Apache ECharts(incubating)</title><style>html, body {
     /* position: sticky should not have overflow parents.*/
     overflow-x: hidden;
-}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/next/zh/css/doc-bundle.css?_v_=1597861067124"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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://echarts.apache.org/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-doc-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=1597861067124"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts.apache.org/next/zh/js/doc-bundle.js?_v_=1597861067124"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
+}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/next/zh/css/doc-bundle.css?_v_=1598523334942"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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://echarts.apache.org/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-doc-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=1598523334942"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts.apache.org/next/zh/js/doc-bundle.js?_v_=1598523334942"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
 </script><script type="text/javascript">window.globalArgsExtra = {
     baseUrl: 'documents/option-parts',
     docType: 'option',
@@ -19,7 +19,7 @@
 if (window.EC_WWW_CDN_PAY_ROOT) {
     window.globalArgsExtra.cdnRoot = window.EC_WWW_CDN_PAY_ROOT + '/next/zh/' + window.globalArgsExtra.baseUrl
 }</script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
-window.globalArgsExtra.version = '1597861067124';
+window.globalArgsExtra.version = '1598523334942';
 echartsDoc.init('#ec-doc-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
diff --git a/next/zh/tutorial.html b/next/zh/tutorial.html
index 531c28f..0742fc0 100644
--- a/next/zh/tutorial.html
+++ b/next/zh/tutorial.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -9,8 +9,8 @@
 </script><title>Documentation - Apache ECharts(incubating)</title><style>html, body {
     /* position: sticky should not have overflow parents.*/
     overflow-x: hidden;
-}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/next/zh/css/doc-bundle.css?_v_=1597861067124"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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://echarts.apache.org/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-doc-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=1597861067124"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts.apache.org/next/zh/js/doc-bundle.js?_v_=1597861067124"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
+}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/next/zh/css/doc-bundle.css?_v_=1598523334942"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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://echarts.apache.org/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-doc-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=1598523334942"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts.apache.org/next/zh/js/doc-bundle.js?_v_=1598523334942"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
 </script><script type="text/javascript">window.globalArgsExtra = {
     baseUrl: 'documents/tutorial-parts',
     docType: 'tutorial',
@@ -19,7 +19,7 @@
 if (window.EC_WWW_CDN_PAY_ROOT) {
     window.globalArgsExtra.cdnRoot = window.EC_WWW_CDN_PAY_ROOT + '/next/zh/' + window.globalArgsExtra.baseUrl
 }</script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
-window.globalArgsExtra.version = '1597861067124';
+window.globalArgsExtra.version = '1598523334942';
 echartsDoc.init('#ec-doc-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
diff --git a/zh/404.html b/zh/404.html
index b923292..965fd04 100644
--- a/zh/404.html
+++ b/zh/404.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -7,7 +7,7 @@
     document.head.insertBefore(el, document.getElementById('font-hack'));
 }
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts-www.cdn.bcebos.com/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="not-found"><img src="https://echarts-www.cdn.bcebos.com/zh/images/404.png?_v_=20200710_1" alt="404"><div class="text">非常抱歉,您所访问的网页找不到了!您可以选择<a href="./index.html" class="link">返回首页</a></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1597861067124"></script><script type="text/javascript"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="not-found"><img src="https://echarts-www.cdn.bcebos.com/zh/images/404.png?_v_=20200710_1" alt="404"><div class="text">非常抱歉,您所访问的网页找不到了!您可以选择<a href="./index.html" class="link">返回首页</a></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1598523334942"></script><script type="text/javascript"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
 
diff --git a/zh/api.html b/zh/api.html
index 43711d4..c597b7f 100644
--- a/zh/api.html
+++ b/zh/api.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -9,8 +9,8 @@
 </script><title>Documentation - Apache ECharts(incubating)</title><style>html, body {
     /* position: sticky should not have overflow parents.*/
     overflow-x: hidden;
-}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts-www.cdn.bcebos.com/zh/css/doc-bundle.css?_v_=1597861067124"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts-www.cdn.bcebos.com/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-doc-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1597861067124"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts-www.cdn.bcebos.com/zh/js/doc-bundle.js?_v_=1597861067124"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts-www.cdn.bcebos.com';
+}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts-www.cdn.bcebos.com/zh/css/doc-bundle.css?_v_=1598523334942"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts-www.cdn.bcebos.com/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-doc-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1598523334942"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts-www.cdn.bcebos.com/zh/js/doc-bundle.js?_v_=1598523334942"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts-www.cdn.bcebos.com';
 </script><script type="text/javascript">window.globalArgsExtra = {
     baseUrl: 'documents/api-parts',
     docType: 'api',
@@ -19,7 +19,7 @@
 if (window.EC_WWW_CDN_PAY_ROOT) {
     window.globalArgsExtra.cdnRoot = window.EC_WWW_CDN_PAY_ROOT + '/zh/' + window.globalArgsExtra.baseUrl
 }</script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
-window.globalArgsExtra.version = '1597861067124';
+window.globalArgsExtra.version = '1598523334942';
 echartsDoc.init('#ec-doc-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
diff --git a/zh/builder.html b/zh/builder.html
index 1f0e3fc..af8a86c 100644
--- a/zh/builder.html
+++ b/zh/builder.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -7,7 +7,7 @@
     document.head.insertBefore(el, document.getElementById('font-hack'));
 }
 </script><title>ECharts 在线构建</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts-www.cdn.bcebos.com/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="builder"><div class="page-info"><div id="title" class="container"><h1>在线定制</h1><p>可自由选择所需图表、坐标系、组件进行打包下载,并且可对渲染引擎、兼容及压缩问题进行设置</p><div class="download-version">(version: 4.8.0)</div></div></div><div class="page-content"><div id="configuration" class="container"><a href="builder3.html" style="float: right">前往定制 3.x 版本</a><section id="charts"><h3>图表<span>chart</span></h3><p class="desc">选择要打包的图表<span class="warn">(注:开发环境建议不压缩代码,代码压缩会去掉大部分常见的警告和错误提示)</span></p><ul><li class="checked"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/bar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="bar"><h5>柱状图 <div>Bar</div></h5></li><li class="checked"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/line.svg?_v_=20200710_1" alt=""><input type="checkbox" name="line"><h5>折线图 <div>Line</div></h5></li><li class="checked"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/pie.svg?_v_=20200710_1" alt=""><input type="checkbox" name="pie"><h5>饼图 <div>Pie</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/scatter.svg?_v_=20200710_1" alt=""><input type="checkbox" name="scatter"><h5>散点图 <div>Scatter</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/effectScatter.svg?_v_=20200710_1" alt=""><input type="checkbox" name="effectScatter"><h5>涟漪散点图 <div>EffectScatter</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/candlestick.svg?_v_=20200710_1" alt=""><input type="checkbox" name="candlestick"><h5>K线图 <div>Candlestick</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/radar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="radar"><h5>雷达图 <div>Radar</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/heatmap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="heatmap"><h5>热力图 <div>Heatmap</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/tree.svg?_v_=20200710_1" alt=""><input type="checkbox" name="tree"><h5>树图 <div>Tree</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/treemap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="treemap"><h5>矩形树图 <div>Treemap</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/sunburst.svg?_v_=20200710_1" alt=""><input type="checkbox" name="sunburst"><h5>旭日图 <div>Sunburst</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/map.svg?_v_=20200710_1" alt=""><input type="checkbox" name="map"><h5>地图 <div>Map</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/lines.svg?_v_=20200710_1" alt=""><input type="checkbox" name="lines"><h5>线图 <div>Lines</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/graph.svg?_v_=20200710_1" alt=""><input type="checkbox" name="graph"><h5>关系图 <div>Graph</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/boxplot.svg?_v_=20200710_1" alt=""><input type="checkbox" name="boxplot"><h5>箱线图 <div>Boxplot</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/parallel.svg?_v_=20200710_1" alt=""><input type="checkbox" name="parallel"><h5>平行坐标 <div>Parallel</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/gauge.svg?_v_=20200710_1" alt=""><input type="checkbox" name="gauge"><h5>仪表盘 <div>Gauge</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/funnel.svg?_v_=20200710_1" alt=""><input type="checkbox" name="funnel"><h5>漏斗图 <div>Funnel</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/sankey.svg?_v_=20200710_1" alt=""><input type="checkbox" name="sankey"><h5>桑基图 <div>Sankey</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/themeRiver.svg?_v_=20200710_1" alt=""><input type="checkbox" name="themeRiver"><h5>主题河流图 <div>ThemeRiver</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/pictorialBar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="pictorialBar"><h5>象形柱图 <div>PictorialBar</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/custom.svg?_v_=20200710_1" alt=""><input type="checkbox" name="custom"><h5>自定义系列 <div>Custom</div></h5></li></ul></section><section id="coords"><h3>坐标系<span>coordinate systems</span></h3><p class="desc">选择要打包的坐标系,有些图表像散点图,折线图可以被应用到多个坐标系上</p><ul><li class="checked"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/gridSimple.svg?_v_=20200710_1" alt=""><input type="checkbox" name="gridSimple"><h5>直角坐标系 <div>Grid</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/polar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="polar"><h5>极坐标系 <div>Polar</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/geo.svg?_v_=20200710_1" alt=""><input type="checkbox" name="geo"><h5>地理坐标系 <div>Geo</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/singleAxis.svg?_v_=20200710_1" alt=""><input type="checkbox" name="singleAxis"><h5>单轴 <div>SingleAxis</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/calendar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="calendar"><h5>日历 <div>Calendar</div></h5></li></ul></section><section id="components"><h3>组件<span>component</span></h3><p class="desc">选择要打包的组件</p><ul><li class="checked"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/title.svg?_v_=20200710_1" alt=""><input type="checkbox" name="title"><h5>标题 <div>Title</div></h5></li><li class="checked"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/legend.svg?_v_=20200710_1" alt=""><input type="checkbox" name="legendScroll"><h5>图例 <div>Legend</div></h5></li><li class="checked"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/tooltip.svg?_v_=20200710_1" alt=""><input type="checkbox" name="tooltip"><h5>提示框 <div>Tooltip</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/markPoint.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markPoint"><h5>标注 <div>MarkPoint</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/markLine.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markLine"><h5>标线 <div>MarkLine</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/markArea.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markArea"><h5>标域 <div>MarkArea</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/timeline.svg?_v_=20200710_1" alt=""><input type="checkbox" name="timeline"><h5>时间轴 <div>Timeline</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/dataZoom.svg?_v_=20200710_1" alt=""><input type="checkbox" name="dataZoom"><h5>数据区域缩放 <div>DataZoom</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/brush.svg?_v_=20200710_1" alt=""><input type="checkbox" name="brush"><h5>刷选 <div>Brush</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/visualMap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="visualMap"><h5>视觉映射 <div>VisualMap</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/toolbox.svg?_v_=20200710_1" alt=""><input type="checkbox" name="toolbox"><h5>工具栏 <div>Toolbox</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/graphic.svg?_v_=20200710_1" alt=""><input type="checkbox" name="graphic"><h5>自定义图形 <div>Graphic</div></h5></li></ul></section><section id="other"><h3>其它选项<span>others</span></h3><div class="other-option"><input type="checkbox" id="svg" name="svg"><label for="svg">SVG 渲染</label><p class="desc">是否包括 SVG 渲染器,从而能支持使用 SVG 来绘制图表</p></div><div class="other-option"><input type="checkbox" id="vml" name="vml"><label for="vml">兼容 IE8</label><p class="desc">是否包括对 IE8 的兼容代码</p></div><div class="other-option"><input type="checkbox" id="api" name="api" checked="checked"><label for="api">工具集</label><p class="desc">是否在 echarts 对象上挂载常用工具集。一般都会挂载,除非对生成的文件的体积有苛求,并且不需要用这些工具集。</p></div><div class="other-option"><input type="checkbox" id="compress" name="compress" checked="checked"><label for="compress">代码压缩</label><p class="desc">是否使用 UglifyJS 压缩后的代码,开发环境建议不压缩代码,代码压缩会去掉大部分常见的警告和错误提示。</p></div></section></div><div id="action"><a id="build" href="javascript:;" class="btn btn-main btn-thirdary">下载</a></div></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1597861067124"></script><script>function updateCheckbox() {
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="builder"><div class="page-info"><div id="title" class="container"><h1>在线定制</h1><p>可自由选择所需图表、坐标系、组件进行打包下载,并且可对渲染引擎、兼容及压缩问题进行设置</p><div class="download-version">(version: 4.8.0)</div></div></div><div class="page-content"><div id="configuration" class="container"><a href="builder3.html" style="float: right">前往定制 3.x 版本</a><section id="charts"><h3>图表<span>chart</span></h3><p class="desc">选择要打包的图表<span class="warn">(注:开发环境建议不压缩代码,代码压缩会去掉大部分常见的警告和错误提示)</span></p><ul><li class="checked"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/bar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="bar"><h5>柱状图 <div>Bar</div></h5></li><li class="checked"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/line.svg?_v_=20200710_1" alt=""><input type="checkbox" name="line"><h5>折线图 <div>Line</div></h5></li><li class="checked"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/pie.svg?_v_=20200710_1" alt=""><input type="checkbox" name="pie"><h5>饼图 <div>Pie</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/scatter.svg?_v_=20200710_1" alt=""><input type="checkbox" name="scatter"><h5>散点图 <div>Scatter</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/effectScatter.svg?_v_=20200710_1" alt=""><input type="checkbox" name="effectScatter"><h5>涟漪散点图 <div>EffectScatter</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/candlestick.svg?_v_=20200710_1" alt=""><input type="checkbox" name="candlestick"><h5>K线图 <div>Candlestick</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/radar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="radar"><h5>雷达图 <div>Radar</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/heatmap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="heatmap"><h5>热力图 <div>Heatmap</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/tree.svg?_v_=20200710_1" alt=""><input type="checkbox" name="tree"><h5>树图 <div>Tree</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/treemap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="treemap"><h5>矩形树图 <div>Treemap</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/sunburst.svg?_v_=20200710_1" alt=""><input type="checkbox" name="sunburst"><h5>旭日图 <div>Sunburst</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/map.svg?_v_=20200710_1" alt=""><input type="checkbox" name="map"><h5>地图 <div>Map</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/lines.svg?_v_=20200710_1" alt=""><input type="checkbox" name="lines"><h5>线图 <div>Lines</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/graph.svg?_v_=20200710_1" alt=""><input type="checkbox" name="graph"><h5>关系图 <div>Graph</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/boxplot.svg?_v_=20200710_1" alt=""><input type="checkbox" name="boxplot"><h5>箱线图 <div>Boxplot</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/parallel.svg?_v_=20200710_1" alt=""><input type="checkbox" name="parallel"><h5>平行坐标 <div>Parallel</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/gauge.svg?_v_=20200710_1" alt=""><input type="checkbox" name="gauge"><h5>仪表盘 <div>Gauge</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/funnel.svg?_v_=20200710_1" alt=""><input type="checkbox" name="funnel"><h5>漏斗图 <div>Funnel</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/sankey.svg?_v_=20200710_1" alt=""><input type="checkbox" name="sankey"><h5>桑基图 <div>Sankey</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/themeRiver.svg?_v_=20200710_1" alt=""><input type="checkbox" name="themeRiver"><h5>主题河流图 <div>ThemeRiver</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/pictorialBar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="pictorialBar"><h5>象形柱图 <div>PictorialBar</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/custom.svg?_v_=20200710_1" alt=""><input type="checkbox" name="custom"><h5>自定义系列 <div>Custom</div></h5></li></ul></section><section id="coords"><h3>坐标系<span>coordinate systems</span></h3><p class="desc">选择要打包的坐标系,有些图表像散点图,折线图可以被应用到多个坐标系上</p><ul><li class="checked"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/gridSimple.svg?_v_=20200710_1" alt=""><input type="checkbox" name="gridSimple"><h5>直角坐标系 <div>Grid</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/polar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="polar"><h5>极坐标系 <div>Polar</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/geo.svg?_v_=20200710_1" alt=""><input type="checkbox" name="geo"><h5>地理坐标系 <div>Geo</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/singleAxis.svg?_v_=20200710_1" alt=""><input type="checkbox" name="singleAxis"><h5>单轴 <div>SingleAxis</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/calendar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="calendar"><h5>日历 <div>Calendar</div></h5></li></ul></section><section id="components"><h3>组件<span>component</span></h3><p class="desc">选择要打包的组件</p><ul><li class="checked"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/title.svg?_v_=20200710_1" alt=""><input type="checkbox" name="title"><h5>标题 <div>Title</div></h5></li><li class="checked"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/legend.svg?_v_=20200710_1" alt=""><input type="checkbox" name="legendScroll"><h5>图例 <div>Legend</div></h5></li><li class="checked"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/tooltip.svg?_v_=20200710_1" alt=""><input type="checkbox" name="tooltip"><h5>提示框 <div>Tooltip</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/markPoint.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markPoint"><h5>标注 <div>MarkPoint</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/markLine.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markLine"><h5>标线 <div>MarkLine</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/markArea.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markArea"><h5>标域 <div>MarkArea</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/timeline.svg?_v_=20200710_1" alt=""><input type="checkbox" name="timeline"><h5>时间轴 <div>Timeline</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/dataZoom.svg?_v_=20200710_1" alt=""><input type="checkbox" name="dataZoom"><h5>数据区域缩放 <div>DataZoom</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/brush.svg?_v_=20200710_1" alt=""><input type="checkbox" name="brush"><h5>刷选 <div>Brush</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/visualMap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="visualMap"><h5>视觉映射 <div>VisualMap</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/toolbox.svg?_v_=20200710_1" alt=""><input type="checkbox" name="toolbox"><h5>工具栏 <div>Toolbox</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/graphic.svg?_v_=20200710_1" alt=""><input type="checkbox" name="graphic"><h5>自定义图形 <div>Graphic</div></h5></li></ul></section><section id="other"><h3>其它选项<span>others</span></h3><div class="other-option"><input type="checkbox" id="svg" name="svg"><label for="svg">SVG 渲染</label><p class="desc">是否包括 SVG 渲染器,从而能支持使用 SVG 来绘制图表</p></div><div class="other-option"><input type="checkbox" id="vml" name="vml"><label for="vml">兼容 IE8</label><p class="desc">是否包括对 IE8 的兼容代码</p></div><div class="other-option"><input type="checkbox" id="api" name="api" checked="checked"><label for="api">工具集</label><p class="desc">是否在 echarts 对象上挂载常用工具集。一般都会挂载,除非对生成的文件的体积有苛求,并且不需要用这些工具集。</p></div><div class="other-option"><input type="checkbox" id="compress" name="compress" checked="checked"><label for="compress">代码压缩</label><p class="desc">是否使用 UglifyJS 压缩后的代码,开发环境建议不压缩代码,代码压缩会去掉大部分常见的警告和错误提示。</p></div></section></div><div id="action"><a id="build" href="javascript:;" class="btn btn-main btn-thirdary">下载</a></div></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1598523334942"></script><script>function updateCheckbox() {
     $('#charts input, #components input, #coords input').each(function () {
         $(this).attr('checked', $(this).parent().hasClass('checked'));
     });
diff --git a/zh/builder/echarts.html b/zh/builder/echarts.html
index 6a45a75..3057543 100644
--- a/zh/builder/echarts.html
+++ b/zh/builder/echarts.html
@@ -56,7 +56,7 @@
                 'esprima': 'lib/esprima',
                 'estraverse': 'lib/estraverse'
             },
-            urlArgs: 'v=1597861067124'
+            urlArgs: 'v=1598523334942'
         });
 
         require(['build']);
diff --git a/zh/builder3.html b/zh/builder3.html
index e35b2a5..072df8d 100644
--- a/zh/builder3.html
+++ b/zh/builder3.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -7,7 +7,7 @@
     document.head.insertBefore(el, document.getElementById('font-hack'));
 }
 </script><title>ECharts 在线构建</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts-www.cdn.bcebos.com/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="builder"><div class="page-info"><div id="title" class="container"><h1>在线定制</h1><p>可自由选择所需图表、坐标系、组件进行打包下载,并且可对渲染引擎、兼容及压缩问题进行设置</p><div class="download-version">(version: 3.8.4)</div></div></div><div class="page-content"><div id="configuration" class="container"><a href="builder.html" style="float: right">前往定制 4.x 版本</a><section id="charts"><h3>图表<span>chart</span></h3><p class="desc">选择要打包的图表<span class="warn">(注:开发环境建议不压缩代码,代码压缩会去掉大部分常见的警告和错误提示)</span></p><ul><li class="checked"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/bar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="bar"><h5>柱状图 <div>Bar</div></h5></li><li class="checked"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/line.svg?_v_=20200710_1" alt=""><input type="checkbox" name="line"><h5>折线图 <div>Line</div></h5></li><li class="checked"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/pie.svg?_v_=20200710_1" alt=""><input type="checkbox" name="pie"><h5>饼图 <div>Pie</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/scatter.svg?_v_=20200710_1" alt=""><input type="checkbox" name="scatter"><h5>散点图 <div>Scatter</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/effectScatter.svg?_v_=20200710_1" alt=""><input type="checkbox" name="effectScatter"><h5>涟漪散点图 <div>EffectScatter</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/candlestick.svg?_v_=20200710_1" alt=""><input type="checkbox" name="candlestick"><h5>K线图 <div>Candlestick</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/radar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="radar"><h5>雷达图 <div>Radar</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/heatmap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="heatmap"><h5>热力图 <div>Heatmap</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/tree.svg?_v_=20200710_1" alt=""><input type="checkbox" name="tree"><h5>树图 <div>Tree</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/treemap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="treemap"><h5>矩形树图 <div>Treemap</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/sunburst.svg?_v_=20200710_1" alt=""><input type="checkbox" name="sunburst"><h5>旭日图 <div>Sunburst</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/map.svg?_v_=20200710_1" alt=""><input type="checkbox" name="map"><h5>地图 <div>Map</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/lines.svg?_v_=20200710_1" alt=""><input type="checkbox" name="lines"><h5>线图 <div>Lines</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/graph.svg?_v_=20200710_1" alt=""><input type="checkbox" name="graph"><h5>关系图 <div>Graph</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/boxplot.svg?_v_=20200710_1" alt=""><input type="checkbox" name="boxplot"><h5>箱线图 <div>Boxplot</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/parallel.svg?_v_=20200710_1" alt=""><input type="checkbox" name="parallel"><h5>平行坐标 <div>Parallel</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/gauge.svg?_v_=20200710_1" alt=""><input type="checkbox" name="gauge"><h5>仪表盘 <div>Gauge</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/funnel.svg?_v_=20200710_1" alt=""><input type="checkbox" name="funnel"><h5>漏斗图 <div>Funnel</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/sankey.svg?_v_=20200710_1" alt=""><input type="checkbox" name="sankey"><h5>桑基图 <div>Sankey</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/themeRiver.svg?_v_=20200710_1" alt=""><input type="checkbox" name="themeRiver"><h5>主题河流图 <div>ThemeRiver</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/pictorialBar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="pictorialBar"><h5>象形柱图 <div>PictorialBar</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/custom.svg?_v_=20200710_1" alt=""><input type="checkbox" name="custom"><h5>自定义系列 <div>Custom</div></h5></li></ul></section><section id="coords"><h3>坐标系<span>coordinate systems</span></h3><p class="desc">选择要打包的坐标系,有些图表像散点图,折线图可以被应用到多个坐标系上</p><ul><li class="checked"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/gridSimple.svg?_v_=20200710_1" alt=""><input type="checkbox" name="gridSimple"><h5>直角坐标系 <div>Grid</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/polar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="polar"><h5>极坐标系 <div>Polar</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/geo.svg?_v_=20200710_1" alt=""><input type="checkbox" name="geo"><h5>地理坐标系 <div>Geo</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/singleAxis.svg?_v_=20200710_1" alt=""><input type="checkbox" name="singleAxis"><h5>单轴 <div>SingleAxis</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/calendar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="calendar"><h5>日历 <div>Calendar</div></h5></li></ul></section><section id="components"><h3>组件<span>component</span></h3><p class="desc">选择要打包的组件</p><ul><li class="checked"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/title.svg?_v_=20200710_1" alt=""><input type="checkbox" name="title"><h5>标题 <div>Title</div></h5></li><li class="checked"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/legend.svg?_v_=20200710_1" alt=""><input type="checkbox" name="legendScroll"><h5>图例 <div>Legend</div></h5></li><li class="checked"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/tooltip.svg?_v_=20200710_1" alt=""><input type="checkbox" name="tooltip"><h5>提示框 <div>Tooltip</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/markPoint.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markPoint"><h5>标注 <div>MarkPoint</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/markLine.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markLine"><h5>标线 <div>MarkLine</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/markArea.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markArea"><h5>标域 <div>MarkArea</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/timeline.svg?_v_=20200710_1" alt=""><input type="checkbox" name="timeline"><h5>时间轴 <div>Timeline</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/dataZoom.svg?_v_=20200710_1" alt=""><input type="checkbox" name="dataZoom"><h5>数据区域缩放 <div>DataZoom</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/brush.svg?_v_=20200710_1" alt=""><input type="checkbox" name="brush"><h5>刷选 <div>Brush</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/visualMap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="visualMap"><h5>视觉映射 <div>VisualMap</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/toolbox.svg?_v_=20200710_1" alt=""><input type="checkbox" name="toolbox"><h5>工具栏 <div>Toolbox</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/graphic.svg?_v_=20200710_1" alt=""><input type="checkbox" name="graphic"><h5>自定义图形 <div>Graphic</div></h5></li></ul></section><section id="other"><h3>其它选项<span>others</span></h3><div class="other-option"><input type="checkbox" id="svg" name="svg"><label for="svg">SVG 渲染</label><p class="desc">是否包括 SVG 渲染器,从而能支持使用 SVG 来绘制图表</p></div><div class="other-option"><input type="checkbox" id="vml" name="vml"><label for="vml">兼容 IE8</label><p class="desc">是否包括对 IE8 的兼容代码</p></div><div class="other-option"><input type="checkbox" id="api" name="api" checked="checked"><label for="api">工具集</label><p class="desc">是否在 echarts 对象上挂载常用工具集。一般都会挂载,除非对生成的文件的体积有苛求,并且不需要用这些工具集。</p></div><div class="other-option"><input type="checkbox" id="compress" name="compress" checked="checked"><label for="compress">代码压缩</label><p class="desc">是否使用 UglifyJS 压缩后的代码,开发环境建议不压缩代码,代码压缩会去掉大部分常见的警告和错误提示。</p></div></section></div><div id="action"><a id="build" href="javascript:;" class="btn btn-main btn-thirdary">下载</a></div></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1597861067124"></script><script>function updateCheckbox() {
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="builder"><div class="page-info"><div id="title" class="container"><h1>在线定制</h1><p>可自由选择所需图表、坐标系、组件进行打包下载,并且可对渲染引擎、兼容及压缩问题进行设置</p><div class="download-version">(version: 3.8.4)</div></div></div><div class="page-content"><div id="configuration" class="container"><a href="builder.html" style="float: right">前往定制 4.x 版本</a><section id="charts"><h3>图表<span>chart</span></h3><p class="desc">选择要打包的图表<span class="warn">(注:开发环境建议不压缩代码,代码压缩会去掉大部分常见的警告和错误提示)</span></p><ul><li class="checked"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/bar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="bar"><h5>柱状图 <div>Bar</div></h5></li><li class="checked"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/line.svg?_v_=20200710_1" alt=""><input type="checkbox" name="line"><h5>折线图 <div>Line</div></h5></li><li class="checked"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/pie.svg?_v_=20200710_1" alt=""><input type="checkbox" name="pie"><h5>饼图 <div>Pie</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/scatter.svg?_v_=20200710_1" alt=""><input type="checkbox" name="scatter"><h5>散点图 <div>Scatter</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/effectScatter.svg?_v_=20200710_1" alt=""><input type="checkbox" name="effectScatter"><h5>涟漪散点图 <div>EffectScatter</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/candlestick.svg?_v_=20200710_1" alt=""><input type="checkbox" name="candlestick"><h5>K线图 <div>Candlestick</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/radar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="radar"><h5>雷达图 <div>Radar</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/heatmap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="heatmap"><h5>热力图 <div>Heatmap</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/tree.svg?_v_=20200710_1" alt=""><input type="checkbox" name="tree"><h5>树图 <div>Tree</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/treemap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="treemap"><h5>矩形树图 <div>Treemap</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/sunburst.svg?_v_=20200710_1" alt=""><input type="checkbox" name="sunburst"><h5>旭日图 <div>Sunburst</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/map.svg?_v_=20200710_1" alt=""><input type="checkbox" name="map"><h5>地图 <div>Map</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/lines.svg?_v_=20200710_1" alt=""><input type="checkbox" name="lines"><h5>线图 <div>Lines</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/graph.svg?_v_=20200710_1" alt=""><input type="checkbox" name="graph"><h5>关系图 <div>Graph</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/boxplot.svg?_v_=20200710_1" alt=""><input type="checkbox" name="boxplot"><h5>箱线图 <div>Boxplot</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/parallel.svg?_v_=20200710_1" alt=""><input type="checkbox" name="parallel"><h5>平行坐标 <div>Parallel</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/gauge.svg?_v_=20200710_1" alt=""><input type="checkbox" name="gauge"><h5>仪表盘 <div>Gauge</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/funnel.svg?_v_=20200710_1" alt=""><input type="checkbox" name="funnel"><h5>漏斗图 <div>Funnel</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/sankey.svg?_v_=20200710_1" alt=""><input type="checkbox" name="sankey"><h5>桑基图 <div>Sankey</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/themeRiver.svg?_v_=20200710_1" alt=""><input type="checkbox" name="themeRiver"><h5>主题河流图 <div>ThemeRiver</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/pictorialBar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="pictorialBar"><h5>象形柱图 <div>PictorialBar</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/custom.svg?_v_=20200710_1" alt=""><input type="checkbox" name="custom"><h5>自定义系列 <div>Custom</div></h5></li></ul></section><section id="coords"><h3>坐标系<span>coordinate systems</span></h3><p class="desc">选择要打包的坐标系,有些图表像散点图,折线图可以被应用到多个坐标系上</p><ul><li class="checked"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/gridSimple.svg?_v_=20200710_1" alt=""><input type="checkbox" name="gridSimple"><h5>直角坐标系 <div>Grid</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/polar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="polar"><h5>极坐标系 <div>Polar</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/geo.svg?_v_=20200710_1" alt=""><input type="checkbox" name="geo"><h5>地理坐标系 <div>Geo</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/singleAxis.svg?_v_=20200710_1" alt=""><input type="checkbox" name="singleAxis"><h5>单轴 <div>SingleAxis</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/calendar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="calendar"><h5>日历 <div>Calendar</div></h5></li></ul></section><section id="components"><h3>组件<span>component</span></h3><p class="desc">选择要打包的组件</p><ul><li class="checked"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/title.svg?_v_=20200710_1" alt=""><input type="checkbox" name="title"><h5>标题 <div>Title</div></h5></li><li class="checked"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/legend.svg?_v_=20200710_1" alt=""><input type="checkbox" name="legendScroll"><h5>图例 <div>Legend</div></h5></li><li class="checked"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/tooltip.svg?_v_=20200710_1" alt=""><input type="checkbox" name="tooltip"><h5>提示框 <div>Tooltip</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/markPoint.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markPoint"><h5>标注 <div>MarkPoint</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/markLine.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markLine"><h5>标线 <div>MarkLine</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/markArea.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markArea"><h5>标域 <div>MarkArea</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/timeline.svg?_v_=20200710_1" alt=""><input type="checkbox" name="timeline"><h5>时间轴 <div>Timeline</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/dataZoom.svg?_v_=20200710_1" alt=""><input type="checkbox" name="dataZoom"><h5>数据区域缩放 <div>DataZoom</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/brush.svg?_v_=20200710_1" alt=""><input type="checkbox" name="brush"><h5>刷选 <div>Brush</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/visualMap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="visualMap"><h5>视觉映射 <div>VisualMap</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/toolbox.svg?_v_=20200710_1" alt=""><input type="checkbox" name="toolbox"><h5>工具栏 <div>Toolbox</div></h5></li><li><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/graphic.svg?_v_=20200710_1" alt=""><input type="checkbox" name="graphic"><h5>自定义图形 <div>Graphic</div></h5></li></ul></section><section id="other"><h3>其它选项<span>others</span></h3><div class="other-option"><input type="checkbox" id="svg" name="svg"><label for="svg">SVG 渲染</label><p class="desc">是否包括 SVG 渲染器,从而能支持使用 SVG 来绘制图表</p></div><div class="other-option"><input type="checkbox" id="vml" name="vml"><label for="vml">兼容 IE8</label><p class="desc">是否包括对 IE8 的兼容代码</p></div><div class="other-option"><input type="checkbox" id="api" name="api" checked="checked"><label for="api">工具集</label><p class="desc">是否在 echarts 对象上挂载常用工具集。一般都会挂载,除非对生成的文件的体积有苛求,并且不需要用这些工具集。</p></div><div class="other-option"><input type="checkbox" id="compress" name="compress" checked="checked"><label for="compress">代码压缩</label><p class="desc">是否使用 UglifyJS 压缩后的代码,开发环境建议不压缩代码,代码压缩会去掉大部分常见的警告和错误提示。</p></div></section></div><div id="action"><a id="build" href="javascript:;" class="btn btn-main btn-thirdary">下载</a></div></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1598523334942"></script><script>function updateCheckbox() {
     $('#charts input, #components input, #coords input').each(function () {
         $(this).attr('checked', $(this).parent().hasClass('checked'));
     });
diff --git a/zh/changelog.html b/zh/changelog.html
index ec07c57..5e8d5ae 100644
--- a/zh/changelog.html
+++ b/zh/changelog.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -1759,7 +1759,7 @@
 <ul>
 <li>The new echarts</li>
 </ul>
-<footer class="inner-footer"><div class="container"><div class="row"><div class="col-md-8"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-4"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1597861067124"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<footer class="inner-footer"><div class="container"><div class="row"><div class="col-md-8"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-4"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1598523334942"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
 
diff --git a/zh/cheat-sheet.html b/zh/cheat-sheet.html
index 434295b..242be5e 100644
--- a/zh/cheat-sheet.html
+++ b/zh/cheat-sheet.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -7,8 +7,8 @@
     document.head.insertBefore(el, document.getElementById('font-hack'));
 }
 </script><title>术语速查手册 - Apache ECharts (incubating)</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts-www.cdn.bcebos.com/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><h1>术语速查手册</h1><p>快速了解功能名称,帮助定位到配置项手册</p><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div><div class="page-content container page-cheatsheet"><h2>常用组件说明</h2><div id="cheat-chart-container"><div class="row"><div class="col-lg-9"><div id="cheat-chart"></div></div><div class="col-lg-3"><div id="cheat-detail"></div></div></div></div><h2>系列类型文档速查</h2><ul><li class="cheat-chart-item"><a href="option.html#series-bar" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/bar.svg?_v_=20200710_1" alt=""><h5>柱状图<div>Bar</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-line" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/line.svg?_v_=20200710_1" alt=""><h5>折线图<div>Line</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-pie" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/pie.svg?_v_=20200710_1" alt=""><h5>饼图<div>Pie</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-scatter" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/scatter.svg?_v_=20200710_1" alt=""><h5>散点图<div>Scatter</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-effectScatter" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/effectScatter.svg?_v_=20200710_1" alt=""><h5>涟漪散点图<div>EffectScatter</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-candlestick" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/candlestick.svg?_v_=20200710_1" alt=""><h5>K线图<div>Candlestick</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-radar" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/radar.svg?_v_=20200710_1" alt=""><h5>雷达图<div>Radar</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-heatmap" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/heatmap.svg?_v_=20200710_1" alt=""><h5>热力图<div>Heatmap</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-tree" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/tree.svg?_v_=20200710_1" alt=""><h5>树图<div>Tree</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-treemap" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/treemap.svg?_v_=20200710_1" alt=""><h5>矩形树图<div>Treemap</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-sunburst" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/sunburst.svg?_v_=20200710_1" alt=""><h5>旭日图<div>Sunburst</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-map" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/map.svg?_v_=20200710_1" alt=""><h5>地图<div>Map</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-lines" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/lines.svg?_v_=20200710_1" alt=""><h5>线图<div>Lines</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-graph" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/graph.svg?_v_=20200710_1" alt=""><h5>关系图<div>Graph</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-boxplot" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/boxplot.svg?_v_=20200710_1" alt=""><h5>箱线图<div>Boxplot</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-parallel" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/parallel.svg?_v_=20200710_1" alt=""><h5>平行坐标<div>Parallel</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-gauge" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/gauge.svg?_v_=20200710_1" alt=""><h5>仪表盘<div>Gauge</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-funnel" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/funnel.svg?_v_=20200710_1" alt=""><h5>漏斗图<div>Funnel</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-sankey" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/sankey.svg?_v_=20200710_1" alt=""><h5>桑基图<div>Sankey</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-themeRiver" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/themeRiver.svg?_v_=20200710_1" alt=""><h5>主题河流图<div>ThemeRiver</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-pictorialBar" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/pictorialBar.svg?_v_=20200710_1" alt=""><h5>象形柱图<div>PictorialBar</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-custom" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/custom.svg?_v_=20200710_1" alt=""><h5>自定义系列<div>Custom</div></h5></a></li></ul><h2>坐标系文档速查</h2><ul><li class="cheat-chart-item"><a href="option.html#grid" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/gridSimple.svg?_v_=20200710_1" alt=""><h5>直角坐标系<div>Grid</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#polar" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/polar.svg?_v_=20200710_1" alt=""><h5>极坐标系<div>Polar</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#geo" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/geo.svg?_v_=20200710_1" alt=""><h5>地理坐标系<div>Geo</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#singleAxis" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/singleAxis.svg?_v_=20200710_1" alt=""><h5>单轴<div>SingleAxis</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#calendar" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/calendar.svg?_v_=20200710_1" alt=""><h5>日历<div>Calendar</div></h5></a></li></ul><h2>组件文档速查</h2><ul><li class="cheat-chart-item"><a href="option.html#title" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/title.svg?_v_=20200710_1" alt=""><h5>标题<div>Title</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#legend" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/legend.svg?_v_=20200710_1" alt=""><h5>图例<div>Legend</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#tooltip" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/tooltip.svg?_v_=20200710_1" alt=""><h5>提示框<div>Tooltip</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-line.markPoint" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/markPoint.svg?_v_=20200710_1" alt=""><h5>标注<div>MarkPoint</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-line.markLine" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/markLine.svg?_v_=20200710_1" alt=""><h5>标线<div>MarkLine</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-line.markArea" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/markArea.svg?_v_=20200710_1" alt=""><h5>标域<div>MarkArea</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#timeline" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/timeline.svg?_v_=20200710_1" alt=""><h5>时间轴<div>Timeline</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#dataZoom" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/dataZoom.svg?_v_=20200710_1" alt=""><h5>数据区域缩放<div>DataZoom</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#brush" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/brush.svg?_v_=20200710_1" alt=""><h5>刷选<div>Brush</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#visualMap" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/visualMap.svg?_v_=20200710_1" alt=""><h5>视觉映射<div>VisualMap</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#toolbox" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/toolbox.svg?_v_=20200710_1" alt=""><h5>工具栏<div>Toolbox</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#graphic" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/graphic.svg?_v_=20200710_1" alt=""><h5>自定义图形<div>Graphic</div></h5></a></li></ul></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1597861067124"></script><script type="text/javascript">document.getElementById('nav-resources').className = 'active';
-</script><script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script><script src="https://echarts-www.cdn.bcebos.com/zh/js/cheat-sheet.js?_v_=1597861067124"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><h1>术语速查手册</h1><p>快速了解功能名称,帮助定位到配置项手册</p><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div><div class="page-content container page-cheatsheet"><h2>常用组件说明</h2><div id="cheat-chart-container"><div class="row"><div class="col-lg-9"><div id="cheat-chart"></div></div><div class="col-lg-3"><div id="cheat-detail"></div></div></div></div><h2>系列类型文档速查</h2><ul><li class="cheat-chart-item"><a href="option.html#series-bar" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/bar.svg?_v_=20200710_1" alt=""><h5>柱状图<div>Bar</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-line" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/line.svg?_v_=20200710_1" alt=""><h5>折线图<div>Line</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-pie" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/pie.svg?_v_=20200710_1" alt=""><h5>饼图<div>Pie</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-scatter" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/scatter.svg?_v_=20200710_1" alt=""><h5>散点图<div>Scatter</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-effectScatter" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/effectScatter.svg?_v_=20200710_1" alt=""><h5>涟漪散点图<div>EffectScatter</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-candlestick" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/candlestick.svg?_v_=20200710_1" alt=""><h5>K线图<div>Candlestick</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-radar" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/radar.svg?_v_=20200710_1" alt=""><h5>雷达图<div>Radar</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-heatmap" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/heatmap.svg?_v_=20200710_1" alt=""><h5>热力图<div>Heatmap</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-tree" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/tree.svg?_v_=20200710_1" alt=""><h5>树图<div>Tree</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-treemap" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/treemap.svg?_v_=20200710_1" alt=""><h5>矩形树图<div>Treemap</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-sunburst" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/sunburst.svg?_v_=20200710_1" alt=""><h5>旭日图<div>Sunburst</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-map" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/map.svg?_v_=20200710_1" alt=""><h5>地图<div>Map</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-lines" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/lines.svg?_v_=20200710_1" alt=""><h5>线图<div>Lines</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-graph" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/graph.svg?_v_=20200710_1" alt=""><h5>关系图<div>Graph</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-boxplot" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/boxplot.svg?_v_=20200710_1" alt=""><h5>箱线图<div>Boxplot</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-parallel" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/parallel.svg?_v_=20200710_1" alt=""><h5>平行坐标<div>Parallel</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-gauge" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/gauge.svg?_v_=20200710_1" alt=""><h5>仪表盘<div>Gauge</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-funnel" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/funnel.svg?_v_=20200710_1" alt=""><h5>漏斗图<div>Funnel</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-sankey" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/sankey.svg?_v_=20200710_1" alt=""><h5>桑基图<div>Sankey</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-themeRiver" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/themeRiver.svg?_v_=20200710_1" alt=""><h5>主题河流图<div>ThemeRiver</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-pictorialBar" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/pictorialBar.svg?_v_=20200710_1" alt=""><h5>象形柱图<div>PictorialBar</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-custom" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/chart/custom.svg?_v_=20200710_1" alt=""><h5>自定义系列<div>Custom</div></h5></a></li></ul><h2>坐标系文档速查</h2><ul><li class="cheat-chart-item"><a href="option.html#grid" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/gridSimple.svg?_v_=20200710_1" alt=""><h5>直角坐标系<div>Grid</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#polar" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/polar.svg?_v_=20200710_1" alt=""><h5>极坐标系<div>Polar</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#geo" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/geo.svg?_v_=20200710_1" alt=""><h5>地理坐标系<div>Geo</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#singleAxis" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/singleAxis.svg?_v_=20200710_1" alt=""><h5>单轴<div>SingleAxis</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#calendar" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/calendar.svg?_v_=20200710_1" alt=""><h5>日历<div>Calendar</div></h5></a></li></ul><h2>组件文档速查</h2><ul><li class="cheat-chart-item"><a href="option.html#title" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/title.svg?_v_=20200710_1" alt=""><h5>标题<div>Title</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#legend" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/legend.svg?_v_=20200710_1" alt=""><h5>图例<div>Legend</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#tooltip" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/tooltip.svg?_v_=20200710_1" alt=""><h5>提示框<div>Tooltip</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-line.markPoint" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/markPoint.svg?_v_=20200710_1" alt=""><h5>标注<div>MarkPoint</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-line.markLine" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/markLine.svg?_v_=20200710_1" alt=""><h5>标线<div>MarkLine</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-line.markArea" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/markArea.svg?_v_=20200710_1" alt=""><h5>标域<div>MarkArea</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#timeline" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/timeline.svg?_v_=20200710_1" alt=""><h5>时间轴<div>Timeline</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#dataZoom" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/dataZoom.svg?_v_=20200710_1" alt=""><h5>数据区域缩放<div>DataZoom</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#brush" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/brush.svg?_v_=20200710_1" alt=""><h5>刷选<div>Brush</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#visualMap" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/visualMap.svg?_v_=20200710_1" alt=""><h5>视觉映射<div>VisualMap</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#toolbox" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/toolbox.svg?_v_=20200710_1" alt=""><h5>工具栏<div>Toolbox</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#graphic" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/builder/component/graphic.svg?_v_=20200710_1" alt=""><h5>自定义图形<div>Graphic</div></h5></a></li></ul></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1598523334942"></script><script type="text/javascript">document.getElementById('nav-resources').className = 'active';
+</script><script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script><script src="https://echarts-www.cdn.bcebos.com/zh/js/cheat-sheet.js?_v_=1598523334942"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
 
diff --git a/zh/coding-standard.html b/zh/coding-standard.html
index f340f8d..fd666f8 100644
--- a/zh/coding-standard.html
+++ b/zh/coding-standard.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -573,7 +573,7 @@
 <p><strong>[强制]</strong> 不要使用 <code>for in</code> 语句对数组进行遍历。</p>
 <h3 id="其他">其他</h3>
 <p><strong>[强制]</strong> 不要使用 <code>eval</code> 和 <code>with</code>。允许使用<code>new Function</code>。</p>
-<footer class="inner-footer"><div class="container"><div class="row"><div class="col-md-8"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-4"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1597861067124"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';
+<footer class="inner-footer"><div class="container"><div class="row"><div class="col-md-8"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-4"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1598523334942"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';
 
 var $list = $('#standard-nav');
 $('.page-detail h2, .page-detail h3, .page-detail h4')
diff --git a/zh/committers.html b/zh/committers.html
index 01e403e..e298263 100644
--- a/zh/committers.html
+++ b/zh/committers.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -7,7 +7,7 @@
     document.head.insertBefore(el, document.getElementById('font-hack'));
 }
 </script><title>Committers - Apache ECharts (incubating)</title></title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts-www.cdn.bcebos.com/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><h1>贡献者列表</h1><p>ECharts 的发展离不开其背后很多人的卓越贡献,他们有着不同的技能,甚至来自不同的岗位和公司</p><p>感谢每一个人的帮助与支持,更希望以后能有更多的人助力 ECharts 的成长</p><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div><div id="about-page"><section class="container contributor"><h4 class="group mentors">Apache Mentors</h4><div class="row"><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/dave.jpg?_v_=20200710_1"><h5 class="about-name">Dave Fisher</h5><div class="about-desc">美国 · 旧金山</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/kevin.jpg?_v_=20200710_1"><h5 class="about-name">Kevin A. McGrail</h5><div class="about-desc">美国 · 华盛顿</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/shengwu.jpg?_v_=20200710_1"><h5 class="about-name">吴晟</h5><div class="about-desc">北京 · 中国</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/tedliu.jpg?_v_=20200710_1"><h5 class="about-name">Ted Liu</h5><div class="about-desc">北京 · 中国</div></div></div></div><h4 class="group code">PPMC</h4><div class="row"><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/pissang" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/沈毅.jpg?_v_=20200710_1"></a><h5 class="about-name">沈毅</h5><div class="about-desc">百度</div><div class="about-desc">中国 · 上海</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/100pah" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/宿爽.jpg?_v_=20200710_1"></a><h5 class="about-name">宿爽</h5><div class="about-desc">百度</div><div class="about-desc">中国 · 北京</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/Ovilia" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/羡辙.jpg?_v_=20200710_1"></a><h5 class="about-name">羡辙</h5><div class="about-desc">百度</div><div class="about-desc">中国 · 上海</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/deqingli" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/德清.jpg?_v_=20200710_1"></a><h5 class="about-name">德清</h5><div class="about-desc">阿里巴巴</div><div class="about-desc">中国 · 杭州</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://www.behance.net/wjtjiayouac8aa" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/王俊婷.jpg"></a><h5 class="about-name">王俊婷</h5><div class="about-desc">百度</div><div class="about-desc">中国 · 上海</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/kener" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/林峰.jpg?_v_=20200710_1"></a><h5 class="about-name">林峰</h5><div class="about-desc">阿里巴巴</div><div class="about-desc">中国 · 杭州</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/erik168" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/erik.jpg?_v_=20200710_1"></a><h5 class="about-name">董睿</h5><div class="about-desc">百度</div><div class="about-desc">中国 · 北京</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/chriswong" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/大佛.jpg?_v_=20200710_1"></a><h5 class="about-name">黄后锦</h5><div class="about-desc">跟谁学</div><div class="about-desc">中国 · 北京</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/susiwen8" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/苏思文.jpg?_v_=20200710_1"></a><h5 class="about-name">苏思文</h5><div class="about-desc">百度</div><div class="about-desc">中国 · 北京</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/plainheart" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/plainheart.jpg?_v_=20200710_1"></a><h5 class="about-name">王忠祥</h5><div class="about-desc">中国 · 河南</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/wf123537200" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/zakwu.jpg?_v_=20200710_1"></a><h5 class="about-name">巫枫</h5><div class="about-desc">腾讯</div><div class="about-desc">中国 · 深圳</div></div></div></div><h4 class="group code">Committers</h4><div class="row"><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/cuijian-dexter" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/崔健.jpg?_v_=20200710_1"></a><h5 class="about-name">崔健</h5><div class="about-desc">百度</div><div class="about-desc">中国 · 北京</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/ClemMakesApps" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/clement.jpg?_v_=20200710_1"></a><h5 class="about-name">Clement Ho</h5><div class="about-desc">GitLab</div><div class="about-desc">美国 · 得克萨斯州</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/yufeng04" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/禹峰.jpg?_v_=20200710_1"></a><h5 class="about-name">禹峰</h5><div class="about-desc">百度</div><div class="about-desc">中国 · 上海</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/SnailSword" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/韩天.jpg?_v_=20200710_1"></a><h5 class="about-name">韩天</h5><div class="about-desc">学生</div><div class="about-desc">中国 · 北京</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/alex2wong" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/黄益修.jpg?_v_=20200710_1"></a><h5 class="about-name">黄益修</h5><div class="about-desc">字节跳动</div><div class="about-desc">中国 · 上海</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/chfw" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/chfw.jpg?_v_=20200710_1"></a><h5 class="about-name">chfw</h5><div class="about-desc">英国</div></div></div></div><h4 class="group contributor">Contributors</h4><div class="row"><p></p><p>在 <a href="https://github.com/apache/incubator-echarts/graphs/contributors">ECharts 贡献者列表</a>中,记录了更多为 ECharts 做出过贡献的人 。</p><p>感谢所有贡献者,一起助力 ECharts 更好地成长。</p></div></section></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1597861067124"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><h1>贡献者列表</h1><p>ECharts 的发展离不开其背后很多人的卓越贡献,他们有着不同的技能,甚至来自不同的岗位和公司</p><p>感谢每一个人的帮助与支持,更希望以后能有更多的人助力 ECharts 的成长</p><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div><div id="about-page"><section class="container contributor"><h4 class="group mentors">Apache Mentors</h4><div class="row"><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/dave.jpg?_v_=20200710_1"><h5 class="about-name">Dave Fisher</h5><div class="about-desc">美国 · 旧金山</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/kevin.jpg?_v_=20200710_1"><h5 class="about-name">Kevin A. McGrail</h5><div class="about-desc">美国 · 华盛顿</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/shengwu.jpg?_v_=20200710_1"><h5 class="about-name">吴晟</h5><div class="about-desc">北京 · 中国</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/tedliu.jpg?_v_=20200710_1"><h5 class="about-name">Ted Liu</h5><div class="about-desc">北京 · 中国</div></div></div></div><h4 class="group code">PPMC</h4><div class="row"><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/pissang" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/沈毅.jpg?_v_=20200710_1"></a><h5 class="about-name">沈毅</h5><div class="about-desc">百度</div><div class="about-desc">中国 · 上海</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/100pah" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/宿爽.jpg?_v_=20200710_1"></a><h5 class="about-name">宿爽</h5><div class="about-desc">百度</div><div class="about-desc">中国 · 北京</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/Ovilia" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/羡辙.jpg?_v_=20200710_1"></a><h5 class="about-name">羡辙</h5><div class="about-desc">百度</div><div class="about-desc">中国 · 上海</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/deqingli" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/德清.jpg?_v_=20200710_1"></a><h5 class="about-name">德清</h5><div class="about-desc">阿里巴巴</div><div class="about-desc">中国 · 杭州</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://www.behance.net/wjtjiayouac8aa" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/王俊婷.jpg"></a><h5 class="about-name">王俊婷</h5><div class="about-desc">百度</div><div class="about-desc">中国 · 上海</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/kener" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/林峰.jpg?_v_=20200710_1"></a><h5 class="about-name">林峰</h5><div class="about-desc">阿里巴巴</div><div class="about-desc">中国 · 杭州</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/erik168" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/erik.jpg?_v_=20200710_1"></a><h5 class="about-name">董睿</h5><div class="about-desc">百度</div><div class="about-desc">中国 · 北京</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/chriswong" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/大佛.jpg?_v_=20200710_1"></a><h5 class="about-name">黄后锦</h5><div class="about-desc">跟谁学</div><div class="about-desc">中国 · 北京</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/susiwen8" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/苏思文.jpg?_v_=20200710_1"></a><h5 class="about-name">苏思文</h5><div class="about-desc">百度</div><div class="about-desc">中国 · 北京</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/plainheart" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/plainheart.jpg?_v_=20200710_1"></a><h5 class="about-name">王忠祥</h5><div class="about-desc">中国 · 河南</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/wf123537200" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/zakwu.jpg?_v_=20200710_1"></a><h5 class="about-name">巫枫</h5><div class="about-desc">腾讯</div><div class="about-desc">中国 · 深圳</div></div></div></div><h4 class="group code">Committers</h4><div class="row"><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/cuijian-dexter" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/崔健.jpg?_v_=20200710_1"></a><h5 class="about-name">崔健</h5><div class="about-desc">百度</div><div class="about-desc">中国 · 北京</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/ClemMakesApps" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/clement.jpg?_v_=20200710_1"></a><h5 class="about-name">Clement Ho</h5><div class="about-desc">GitLab</div><div class="about-desc">美国 · 得克萨斯州</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/yufeng04" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/禹峰.jpg?_v_=20200710_1"></a><h5 class="about-name">禹峰</h5><div class="about-desc">百度</div><div class="about-desc">中国 · 上海</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/SnailSword" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/韩天.jpg?_v_=20200710_1"></a><h5 class="about-name">韩天</h5><div class="about-desc">学生</div><div class="about-desc">中国 · 北京</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/alex2wong" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/黄益修.jpg?_v_=20200710_1"></a><h5 class="about-name">黄益修</h5><div class="about-desc">字节跳动</div><div class="about-desc">中国 · 上海</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/chfw" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/people/chfw.jpg?_v_=20200710_1"></a><h5 class="about-name">chfw</h5><div class="about-desc">英国</div></div></div></div><h4 class="group contributor">Contributors</h4><div class="row"><p></p><p>在 <a href="https://github.com/apache/incubator-echarts/graphs/contributors">ECharts 贡献者列表</a>中,记录了更多为 ECharts 做出过贡献的人 。</p><p>感谢所有贡献者,一起助力 ECharts 更好地成长。</p></div></section></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1598523334942"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';
 
 var recommendId = 3;
 setInterval(function () {
diff --git a/zh/contributing.html b/zh/contributing.html
index 39bbc73..7e7dc42 100644
--- a/zh/contributing.html
+++ b/zh/contributing.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -7,7 +7,7 @@
     document.head.insertBefore(el, document.getElementById('font-hack'));
 }
 </script><title>如何贡献 - Apache ECharts (incubating)</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts-www.cdn.bcebos.com/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="ECharts FAQ"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><div class="container"><h1>如何贡献</h1><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div></div><div class="page-content"><div class="container"><h2>如何为 Apache ECharts (incubating) 项目贡献一份力量</h2><p>ECharts 欢迎各种形式的贡献!</p><h3>Issues</h3><p>查看 <a href="https://github.com/apache/incubator-echarts/issues" target="_blank">issue</a> 中是否有可以提供帮助的问题。</p><ul><li>如果是一个报 bug 或者提问如何使用 ECharts 的 issue,可以帮忙提醒创建者提供一个可复现的在线例子。例子可以通过 <a href="https://codepen.io/Ovilia/pen/dyYWXWM" target="_blank">Codepen</a> 或者 <a href="https://gallery.echartsjs.com/editor.html" target="_blank">ECharts Gallery</a> 创建。</li><li>如果是一个提新需求的 issue,可以帮忙确保创建者对预期的效果有清晰的表述。很多情况下,一个简单的设计图对清晰地表达需求是有必要的。</li><li>帮助复现问题,并根据<a href="https://echarts.apache.org/zh/option.html" target="_blank">文档</a>判断这是否是一个 bug。</li><li>没有标记 "pending" 标签的 issue,是我们明确是 bug 或新需求的 issue。欢迎提 pull request 帮忙修复这些问题。</li></ul><h3>Pull Requests</h3><p>我们非常欢迎社区贡献者以 PR 的形式作贡献!</p><p>在开始之前,请先阅读我们的<a href="./coding-standard.html">代码规范</a>以及<a href="https://www.apache.org/foundation/policies/conduct.html" target="_blank">Apache 行为规范</a>。</p><p>具体操作请参考 <a href="https://github.com/apache/incubator-echarts/wiki/How-to-setup-the-dev-environment" target="_blank">How to setup the dev environment</a> 以及 <a href="https://github.com/apache/incubator-echarts/wiki/How-to-make-a-pull-request" target="_blank">How to make a pull request</a>。</p><p>如果在提 PR 过程中碰到问题,欢迎在 issue 或 PR 中评论,或者给 <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a> 发邮件咨询。</p><h3>邮件组</h3><p>欢迎订阅<a href="./maillist.html">邮件组</a>参与我们的讨论。</p><h3>文档</h3><p>文档的修缮可能是 Apache ECharts (incubating) 最需要帮助的地方。如果你对此感兴趣,无论是对某个页面文字的小修改,还是纠正一个链接或者其他的小改动,我们都非常欢迎!</p><p>文档的源代码可以在 <a href="https://github.com/apache/incubator-echarts-doc" target="_blank">GitHub</a> 找到。如果想要知道应该修改项目中的哪个文件,通常最简单的方式是在项目中搜索关键字。</p><p>在 issue 列表中,<a href="https://github.com/apache/incubator-echarts/labels/doc" target="_blank">"doc"</a> 标签表示相关文档需要修改。我们非常欢迎提 PR 修改这些问题!</p><h2>成为 PPMC 成员或 Committer!</h2><p>正如上面所说,我们非常欢迎社区以任何形式为 ECharts 项目作贡献。当我们发现社区中长期持续贡献的伙伴,会邀请他们成为 PPMC 成员或者 Committer。</p><p>成为 Committer 意味着你拥有对 ECharts 项目的“写”权限,可以更方便高效地为项目贡献。</p><p>PPMC(Podling Project Management Committee)是孵化项目管理委员会的意思。PPMC 成员帮助 ECharts 项目在孵化期间学习自我管理。更多详细信息请参考 <a href="https://incubator.apache.org/guides/ppmc.html">Podling Project Management Committee</a>。</p><p>成为 PPMC 成员和 Committer 没有唯一固定的标准,因为我们鼓励不同形式的贡献。通常来说,现在的 PPMC 成员会考察社区贡献者的表现,在发现有符合标准的人选后,会在内部发起讨论和投票,投票通过后将邀请其成为 PPMC 成员或 Committer。</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1597861067124"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="ECharts FAQ"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><div class="container"><h1>如何贡献</h1><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div></div><div class="page-content"><div class="container"><h2>如何为 Apache ECharts (incubating) 项目贡献一份力量</h2><p>ECharts 欢迎各种形式的贡献!</p><h3>Issues</h3><p>查看 <a href="https://github.com/apache/incubator-echarts/issues" target="_blank">issue</a> 中是否有可以提供帮助的问题。</p><ul><li>如果是一个报 bug 或者提问如何使用 ECharts 的 issue,可以帮忙提醒创建者提供一个可复现的在线例子。例子可以通过 <a href="https://codepen.io/Ovilia/pen/dyYWXWM" target="_blank">Codepen</a> 或者 <a href="https://gallery.echartsjs.com/editor.html" target="_blank">ECharts Gallery</a> 创建。</li><li>如果是一个提新需求的 issue,可以帮忙确保创建者对预期的效果有清晰的表述。很多情况下,一个简单的设计图对清晰地表达需求是有必要的。</li><li>帮助复现问题,并根据<a href="https://echarts.apache.org/zh/option.html" target="_blank">文档</a>判断这是否是一个 bug。</li><li>没有标记 "pending" 标签的 issue,是我们明确是 bug 或新需求的 issue。欢迎提 pull request 帮忙修复这些问题。</li></ul><h3>Pull Requests</h3><p>我们非常欢迎社区贡献者以 PR 的形式作贡献!</p><p>在开始之前,请先阅读我们的<a href="./coding-standard.html">代码规范</a>以及<a href="https://www.apache.org/foundation/policies/conduct.html" target="_blank">Apache 行为规范</a>。</p><p>具体操作请参考 <a href="https://github.com/apache/incubator-echarts/wiki/How-to-setup-the-dev-environment" target="_blank">How to setup the dev environment</a> 以及 <a href="https://github.com/apache/incubator-echarts/wiki/How-to-make-a-pull-request" target="_blank">How to make a pull request</a>。</p><p>如果在提 PR 过程中碰到问题,欢迎在 issue 或 PR 中评论,或者给 <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a> 发邮件咨询。</p><h3>邮件组</h3><p>欢迎订阅<a href="./maillist.html">邮件组</a>参与我们的讨论。</p><h3>文档</h3><p>文档的修缮可能是 Apache ECharts (incubating) 最需要帮助的地方。如果你对此感兴趣,无论是对某个页面文字的小修改,还是纠正一个链接或者其他的小改动,我们都非常欢迎!</p><p>文档的源代码可以在 <a href="https://github.com/apache/incubator-echarts-doc" target="_blank">GitHub</a> 找到。如果想要知道应该修改项目中的哪个文件,通常最简单的方式是在项目中搜索关键字。</p><p>在 issue 列表中,<a href="https://github.com/apache/incubator-echarts/labels/doc" target="_blank">"doc"</a> 标签表示相关文档需要修改。我们非常欢迎提 PR 修改这些问题!</p><h2>成为 PPMC 成员或 Committer!</h2><p>正如上面所说,我们非常欢迎社区以任何形式为 ECharts 项目作贡献。当我们发现社区中长期持续贡献的伙伴,会邀请他们成为 PPMC 成员或者 Committer。</p><p>成为 Committer 意味着你拥有对 ECharts 项目的“写”权限,可以更方便高效地为项目贡献。</p><p>PPMC(Podling Project Management Committee)是孵化项目管理委员会的意思。PPMC 成员帮助 ECharts 项目在孵化期间学习自我管理。更多详细信息请参考 <a href="https://incubator.apache.org/guides/ppmc.html">Podling Project Management Committee</a>。</p><p>成为 PPMC 成员和 Committer 没有唯一固定的标准,因为我们鼓励不同形式的贡献。通常来说,现在的 PPMC 成员会考察社区贡献者的表现,在发现有符合标准的人选后,会在内部发起讨论和投票,投票通过后将邀请其成为 PPMC 成员或 Committer。</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1598523334942"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
 
diff --git a/zh/css/doc-bundle.css b/zh/css/doc-bundle.css
index 8a42e1f..1936d54 100644
--- a/zh/css/doc-bundle.css
+++ b/zh/css/doc-bundle.css
@@ -961,6 +961,7 @@
     top: 0;
 }
 #example-panel .preview-main {
+    position: relative;
     padding: 0 10px;
     background: #fefefe;
     box-sizing: border-box;
@@ -1285,7 +1286,8 @@
     width: 100%;
 }
 .el-autocomplete-suggestion.search-input-popper {
-  width: 300px !important;
+  width: auto !important;
+  min-width: 300px;
 }
 .el-autocomplete-suggestion.search-input-popper li {
     line-height: 28px;
diff --git a/zh/css/only_for_cdn_ready_check.css b/zh/css/only_for_cdn_ready_check.css
index 288fa46..55cc523 100644
--- a/zh/css/only_for_cdn_ready_check.css
+++ b/zh/css/only_for_cdn_ready_check.css
@@ -1 +1 @@
-/* 1597861067124 OK */
\ No newline at end of file
+/* 1598523334942 OK */
\ No newline at end of file
diff --git a/zh/demo.html b/zh/demo.html
index 1de936f..0226020 100644
--- a/zh/demo.html
+++ b/zh/demo.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -8,11 +8,11 @@
 }
 </script><title>Examples - Apache ECharts (incubating)</title><script>var chartId = location.hash.slice(1);
 window.location ='./examples/editor.html?c=' + chartId;</script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/perfect-scrollbar@0.6.8/dist/css/perfect-scrollbar.min.css"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts-www.cdn.bcebos.com/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div id="left-chart-nav"><ul></ul></div><div id="nav-mask"></div><div id="nav-layer"><ul class="chart-list"></ul></div><div id="chart-demo"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1597861067124"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lodash@3.10.1/index.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/perfect-scrollbar@0.6.8/dist/js/min/perfect-scrollbar.min.js"></script><script type="text/javascript">var GALLERY_PATH = 'https://www.echartsjs.com/gallery/';
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div id="left-chart-nav"><ul></ul></div><div id="nav-mask"></div><div id="nav-layer"><ul class="chart-list"></ul></div><div id="chart-demo"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1598523334942"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lodash@3.10.1/index.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/perfect-scrollbar@0.6.8/dist/js/min/perfect-scrollbar.min.js"></script><script type="text/javascript">var GALLERY_PATH = 'https://www.echartsjs.com/gallery/';
 var GALLERY_EDITOR_PATH = GALLERY_PATH + 'editor.html?c=';
 var GALLERY_VIEW_PATH = GALLERY_PATH + 'view.html?c=';
 var GALLERY_THUMB_PATH = GALLERY_PATH + 'data/thumb/';
-</script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/config.js?_v_=1597861067124"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/examples-nav.js?_v_=1597861067124"></script><script type="text/javascript">document.getElementById('nav-examples').className = 'active';
+</script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/config.js?_v_=1598523334942"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/examples-nav.js?_v_=1598523334942"></script><script type="text/javascript">document.getElementById('nav-examples').className = 'active';
 function encodeHTML(source) {
     return String(source)
         .replace(/&/g, '&amp;')
diff --git a/zh/dependencies.html b/zh/dependencies.html
index 0e1192c..1a009be 100644
--- a/zh/dependencies.html
+++ b/zh/dependencies.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -7,7 +7,7 @@
     document.head.insertBefore(el, document.getElementById('font-hack'));
 }
 </script><title>依赖项 - Apache ECharts (incubating)</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts-www.cdn.bcebos.com/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="ECharts FAQ"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><h1>依赖项</h1><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div><div class="page-content"><div class="container"><h2>ZRender</h2><p>Apache ECharts (incubating)<sup>TM</sup> 底层依赖 <a href="https://github.com/ecomfe/zrender">ZRender</a>,一个轻量级的二维绘制库。</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1597861067124"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="ECharts FAQ"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><h1>依赖项</h1><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div><div class="page-content"><div class="container"><h2>ZRender</h2><p>Apache ECharts (incubating)<sup>TM</sup> 底层依赖 <a href="https://github.com/ecomfe/zrender">ZRender</a>,一个轻量级的二维绘制库。</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1598523334942"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
 
diff --git a/zh/download-extension.html b/zh/download-extension.html
index 72fa83a..93cddd1 100644
--- a/zh/download-extension.html
+++ b/zh/download-extension.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -7,7 +7,7 @@
     document.head.insertBefore(el, document.getElementById('font-hack'));
 }
 </script><title>扩展下载 - Apache ECharts (incubating)</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts-www.cdn.bcebos.com/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><h1>扩展下载</h1><p>可在此免费下载各类 ECharts 扩展插件,获取更丰富的图表类型和增强功能</p><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div><div id="extension" class="page-content container"><div class="nav-container"><ul class="nav nav-tabs"><li class="active"><a href="#chart-type" data-toggle="tab">图表及组件</a></li><li><a href="#functional" data-toggle="tab">功能增强</a></li><li><a href="#framework" data-toggle="tab">框架协作</a></li><li><a href="#language" data-toggle="tab">其他语言</a></li></ul></div><div class="tab-content"><div id="chart-type" class="tab-pane active"><div class="row"><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-gl" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/gl.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-gl" class="extension-name">ECharts GL</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/pissang" class="extension-author-name">沈毅</a></div><div class="extension-desc">3D 图表、地理可视化、WebGL 加速渲染</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-wordcloud" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/word-cloud.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-wordcloud" class="extension-name">字符云</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/pissang" class="extension-author-name">沈毅</a></div><div class="extension-desc">字符云可以将文字根据不同的权重布局为大小、颜色各异的图,支持使用图片作为遮罩。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-liquidfill" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/liquidfill.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-liquidfill" class="extension-name">水球图</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/Ovilia" class="extension-author-name">羡辙</a></div><div class="extension-desc">水球图是一种适合于展现单个百分比数据的图表,支持多条水波和动画。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts/tree/master/extension/bmap" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/bmap.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts/tree/master/extension/bmap" class="extension-name">百度地图</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/pissang" class="extension-author-name">沈毅</a></div><div class="extension-desc">百度地图扩展,可以在百度地图上展现点图,线图,热力图等。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/wandergis/arcgis-echarts3" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/arcgis.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/wandergis/arcgis-echarts3" class="extension-name">ArcGIS 地图</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/wandergis" class="extension-author-name">wandergis</a></div><div class="extension-desc">ArcGIS 地图和 ECharts 的结合,支持 ECharts 2 和 ECharts 3。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/wandergis/leaflet-echarts3" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/leaflet.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/wandergis/leaflet-echarts3" class="extension-name">Leaflet 地图</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/wandergis" class="extension-author-name">wandergis</a></div><div class="extension-desc">Leaflet 地图和 ECharts 的结合,支持 ECharts 2 和 ECharts 3。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/gnijuohz/echarts-leaflet" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/leaflet-2.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/gnijuohz/echarts-leaflet" class="extension-name">echarts-leaflet</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/gnijuohz" class="extension-author-name">gnijuohz</a></div><div class="extension-desc">ECharts extension for visualizing data on leaftlet.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/lzxue/echartsLayer" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/mapbox.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/lzxue/echartsLayer" class="extension-name">Mapbox 地图</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/lzxue" class="extension-author-name">lzxue</a></div><div class="extension-desc">Mapbox 地图和 ECharts 的结合。</div></div></div></div></div></div><div id="functional" class="tab-pane"><div class="row"><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-graph-modularity" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/modularity.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-graph-modularity" class="extension-name">图的模块化</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/pissang" class="extension-author-name">沈毅</a></div><div class="extension-desc">该插件可以对 ECharts Graph 图作社群检测,并将图中的顶点分成若干子集。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-stat" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/stat.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-stat" class="extension-name">统计工具</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/deqingli" class="extension-author-name">李德清</a></div><div class="extension-desc">统计扩展是一个专门用来进行数据分析的工具。</div></div></div></div></div></div><div id="framework" class="tab-pane"><div class="row"><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/wangshijun/angular-echarts" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/wangshijun/angular-echarts" class="extension-name">angular-echarts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/wangshijun" class="extension-author-name">wangshijun</a></div><div class="extension-desc">AngularJs bindings for Baidu ECharts.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/bornkiller/echarts-ng" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/bornkiller/echarts-ng" class="extension-name">echarts-ng</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/bornkiller" class="extension-author-name">bornkiller</a></div><div class="extension-desc">使用 Angular 封装 ECharts 为指令。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/liekkas/ng-echarts" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/liekkas/ng-echarts" class="extension-name">ng-echarts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/liekkas" class="extension-author-name">liekkas</a></div><div class="extension-desc">AngularJs 版 ECharts,支持最新 ECharts3.x。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/Justineo/vue-echarts" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/Justineo/vue-echarts" class="extension-name">vue-echarts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/Justineo" class="extension-author-name">Justineo</a></div><div class="extension-desc">ECharts component for Vue.js.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/panteng/vue-echarts" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/panteng/vue-echarts" class="extension-name">vue-echarts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/panteng" class="extension-author-name">panteng</a></div><div class="extension-desc">A custom directive for using Echarts in Vue.js apps.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/PUGE/echarts-middleware" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/PUGE/echarts-middleware" class="extension-name">echarts-middleware</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/PUGE" class="extension-author-name">PUGE</a></div><div class="extension-desc">在 Vue 中优雅高效地使用 ECharts。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/hustcc/echarts-for-react" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/hustcc/echarts-for-react" class="extension-name">echarts-for-react</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/hustcc" class="extension-author-name">hustcc</a></div><div class="extension-desc">一个简单的 ECharts 的 react 封装。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/somonus/react-echarts" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/somonus/react-echarts" class="extension-name">react-echarts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/somonus" class="extension-author-name">somonus</a></div><div class="extension-desc">ECharts + react.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/liekkas/re-echarts" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/liekkas/re-echarts" class="extension-name">re-echarts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/liekkas" class="extension-author-name">liekkas</a></div><div class="extension-desc">ECharts + react.</div></div></div></div></div></div><div id="language" class="tab-pane"><div class="row"><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/pyecharts/pyecharts/" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/pyecharts/pyecharts/" class="extension-name">pyecharts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/chenjiandongx" class="extension-author-name">chenjiandongx</a><a href="https://github.com/chfw" class="extension-author-name">chfw</a><a href="https://github.com/kinegratii" class="extension-author-name">kinegratii</a></div><div class="extension-desc">Python Echarts Plotting Library.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/yufeiminds/echarts-python" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/yufeiminds/echarts-python" class="extension-name">echarts-python</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/yufeiminds" class="extension-author-name">yufeiminds</a></div><div class="extension-desc">Generate Echarts options with Python.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/napjon/krisk" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/napjon/krisk" class="extension-name">krisk</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/napjon" class="extension-author-name">napjon</a></div><div class="extension-desc">Krisk bring Echarts to Python, and helpful tools for statistical interactive visualization.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/taiyun/recharts" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/taiyun/recharts" class="extension-name">recharts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/taiyun" class="extension-author-name">taiyun</a></div><div class="extension-desc">recharts 提供了 ECharts 的 R 语言接口。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/yihui/recharts" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/yihui/recharts" class="extension-name">recharts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/yihui" class="extension-author-name">yihui</a></div><div class="extension-desc">An R Interface to ECharts.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/XD-DENG/ECharts2Shiny" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/XD-DENG/ECharts2Shiny" class="extension-name">ECharts2Shiny</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/XD-DENG" class="extension-author-name">XD-DENG</a></div><div class="extension-desc">To insert interactive charts from ECharts into R Shiny applications.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/randyzwitch/ECharts.jl" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/randyzwitch/ECharts.jl" class="extension-name">ECharts.jl</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/randyzwitch" class="extension-author-name">randyzwitch</a></div><div class="extension-desc">Julia package for the ECharts 3 visualization library.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/slamdata/purescript-echarts/" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/slamdata/purescript-echarts/" class="extension-name">purescript-echarts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/slamdata" class="extension-author-name">slamdata</a></div><div class="extension-desc">Purescript bindings for Echarts library.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/Pluto-Y/iOS-Echarts" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/Pluto-Y/iOS-Echarts" class="extension-name">iOS-Echarts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/Pluto-Y/" class="extension-author-name">Pluto-Y</a></div><div class="extension-desc">This is a highly custom chart control for iOS and Mac apps, which build with ECharts 2.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/abel533/ECharts" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/abel533/ECharts" class="extension-name">ECharts-Java</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/abel533" class="extension-author-name">abel533</a></div><div class="extension-desc">这是一个针对 ECharts2.x 版本的 Java 类库,实现了所有 ECharts 中的 JSON 结构对应的 Java 对象。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/idoku/EChartsSDK" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/idoku/EChartsSDK" class="extension-name">EChartsSDK</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/idoku" class="extension-author-name">idoku</a></div><div class="extension-desc">ECharts 的 .NET 类库,从 ECharts 的 Java 类库移植。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/hisune/Echarts-PHP" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/hisune/Echarts-PHP" class="extension-name">Echarts-PHP</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/hisune" class="extension-author-name">hisune</a></div><div class="extension-desc">A PHP library that works as a wrapper for Echarts.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/entronad/flutter_echarts" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/entronad/flutter_echarts" class="extension-name">flutter_echarts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/entronad" class="extension-author-name">entronad</a></div><div class="extension-desc">A Flutter widget to use Echarts in a reactive way.</div></div></div></div></div></div></div></div><div id="submit-extension"><div class="container"><h3>提交您的 ECharts 插件</h3><p>我们会尽快与您取得联系,之后您制作的插件将会在此页面提供给广大 ECharts 用户使用。</p><p>再次感谢您对 ECharts 的支持与贡献!</p><a href="mailto:dev@echarts.apache.org" class="btn btn-main btn-thirdary"><img src="https://echarts-www.cdn.bcebos.com/zh/images/btn-email.png?_v_=20200710_1"><span>发邮件提交</span></a></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1597861067124"></script><script type="text/javascript">document.getElementById('nav-download').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><h1>扩展下载</h1><p>可在此免费下载各类 ECharts 扩展插件,获取更丰富的图表类型和增强功能</p><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div><div id="extension" class="page-content container"><div class="nav-container"><ul class="nav nav-tabs"><li class="active"><a href="#chart-type" data-toggle="tab">图表及组件</a></li><li><a href="#functional" data-toggle="tab">功能增强</a></li><li><a href="#framework" data-toggle="tab">框架协作</a></li><li><a href="#language" data-toggle="tab">其他语言</a></li></ul></div><div class="tab-content"><div id="chart-type" class="tab-pane active"><div class="row"><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-gl" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/gl.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-gl" class="extension-name">ECharts GL</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/pissang" class="extension-author-name">沈毅</a></div><div class="extension-desc">3D 图表、地理可视化、WebGL 加速渲染</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-wordcloud" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/word-cloud.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-wordcloud" class="extension-name">字符云</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/pissang" class="extension-author-name">沈毅</a></div><div class="extension-desc">字符云可以将文字根据不同的权重布局为大小、颜色各异的图,支持使用图片作为遮罩。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-liquidfill" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/liquidfill.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-liquidfill" class="extension-name">水球图</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/Ovilia" class="extension-author-name">羡辙</a></div><div class="extension-desc">水球图是一种适合于展现单个百分比数据的图表,支持多条水波和动画。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts/tree/master/extension/bmap" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/bmap.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts/tree/master/extension/bmap" class="extension-name">百度地图</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/pissang" class="extension-author-name">沈毅</a></div><div class="extension-desc">百度地图扩展,可以在百度地图上展现点图,线图,热力图等。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/wandergis/arcgis-echarts3" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/arcgis.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/wandergis/arcgis-echarts3" class="extension-name">ArcGIS 地图</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/wandergis" class="extension-author-name">wandergis</a></div><div class="extension-desc">ArcGIS 地图和 ECharts 的结合,支持 ECharts 2 和 ECharts 3。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/wandergis/leaflet-echarts3" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/leaflet.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/wandergis/leaflet-echarts3" class="extension-name">Leaflet 地图</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/wandergis" class="extension-author-name">wandergis</a></div><div class="extension-desc">Leaflet 地图和 ECharts 的结合,支持 ECharts 2 和 ECharts 3。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/gnijuohz/echarts-leaflet" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/leaflet-2.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/gnijuohz/echarts-leaflet" class="extension-name">echarts-leaflet</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/gnijuohz" class="extension-author-name">gnijuohz</a></div><div class="extension-desc">ECharts extension for visualizing data on leaftlet.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/lzxue/echartsLayer" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/mapbox.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/lzxue/echartsLayer" class="extension-name">Mapbox 地图</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/lzxue" class="extension-author-name">lzxue</a></div><div class="extension-desc">Mapbox 地图和 ECharts 的结合。</div></div></div></div></div></div><div id="functional" class="tab-pane"><div class="row"><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-graph-modularity" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/modularity.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-graph-modularity" class="extension-name">图的模块化</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/pissang" class="extension-author-name">沈毅</a></div><div class="extension-desc">该插件可以对 ECharts Graph 图作社群检测,并将图中的顶点分成若干子集。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-stat" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/stat.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-stat" class="extension-name">统计工具</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/deqingli" class="extension-author-name">李德清</a></div><div class="extension-desc">统计扩展是一个专门用来进行数据分析的工具。</div></div></div></div></div></div><div id="framework" class="tab-pane"><div class="row"><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/wangshijun/angular-echarts" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/wangshijun/angular-echarts" class="extension-name">angular-echarts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/wangshijun" class="extension-author-name">wangshijun</a></div><div class="extension-desc">AngularJs bindings for Baidu ECharts.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/bornkiller/echarts-ng" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/bornkiller/echarts-ng" class="extension-name">echarts-ng</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/bornkiller" class="extension-author-name">bornkiller</a></div><div class="extension-desc">使用 Angular 封装 ECharts 为指令。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/liekkas/ng-echarts" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/liekkas/ng-echarts" class="extension-name">ng-echarts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/liekkas" class="extension-author-name">liekkas</a></div><div class="extension-desc">AngularJs 版 ECharts,支持最新 ECharts3.x。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/Justineo/vue-echarts" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/Justineo/vue-echarts" class="extension-name">vue-echarts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/Justineo" class="extension-author-name">Justineo</a></div><div class="extension-desc">ECharts component for Vue.js.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/panteng/vue-echarts" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/panteng/vue-echarts" class="extension-name">vue-echarts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/panteng" class="extension-author-name">panteng</a></div><div class="extension-desc">A custom directive for using Echarts in Vue.js apps.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/PUGE/echarts-middleware" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/PUGE/echarts-middleware" class="extension-name">echarts-middleware</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/PUGE" class="extension-author-name">PUGE</a></div><div class="extension-desc">在 Vue 中优雅高效地使用 ECharts。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/hustcc/echarts-for-react" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/hustcc/echarts-for-react" class="extension-name">echarts-for-react</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/hustcc" class="extension-author-name">hustcc</a></div><div class="extension-desc">一个简单的 ECharts 的 react 封装。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/somonus/react-echarts" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/somonus/react-echarts" class="extension-name">react-echarts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/somonus" class="extension-author-name">somonus</a></div><div class="extension-desc">ECharts + react.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/liekkas/re-echarts" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/liekkas/re-echarts" class="extension-name">re-echarts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/liekkas" class="extension-author-name">liekkas</a></div><div class="extension-desc">ECharts + react.</div></div></div></div></div></div><div id="language" class="tab-pane"><div class="row"><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/pyecharts/pyecharts/" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/pyecharts/pyecharts/" class="extension-name">pyecharts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/chenjiandongx" class="extension-author-name">chenjiandongx</a><a href="https://github.com/chfw" class="extension-author-name">chfw</a><a href="https://github.com/kinegratii" class="extension-author-name">kinegratii</a></div><div class="extension-desc">Python Echarts Plotting Library.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/yufeiminds/echarts-python" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/yufeiminds/echarts-python" class="extension-name">echarts-python</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/yufeiminds" class="extension-author-name">yufeiminds</a></div><div class="extension-desc">Generate Echarts options with Python.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/napjon/krisk" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/napjon/krisk" class="extension-name">krisk</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/napjon" class="extension-author-name">napjon</a></div><div class="extension-desc">Krisk bring Echarts to Python, and helpful tools for statistical interactive visualization.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/taiyun/recharts" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/taiyun/recharts" class="extension-name">recharts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/taiyun" class="extension-author-name">taiyun</a></div><div class="extension-desc">recharts 提供了 ECharts 的 R 语言接口。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/yihui/recharts" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/yihui/recharts" class="extension-name">recharts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/yihui" class="extension-author-name">yihui</a></div><div class="extension-desc">An R Interface to ECharts.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/XD-DENG/ECharts2Shiny" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/XD-DENG/ECharts2Shiny" class="extension-name">ECharts2Shiny</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/XD-DENG" class="extension-author-name">XD-DENG</a></div><div class="extension-desc">To insert interactive charts from ECharts into R Shiny applications.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/randyzwitch/ECharts.jl" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/randyzwitch/ECharts.jl" class="extension-name">ECharts.jl</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/randyzwitch" class="extension-author-name">randyzwitch</a></div><div class="extension-desc">Julia package for the ECharts 3 visualization library.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/slamdata/purescript-echarts/" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/slamdata/purescript-echarts/" class="extension-name">purescript-echarts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/slamdata" class="extension-author-name">slamdata</a></div><div class="extension-desc">Purescript bindings for Echarts library.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/Pluto-Y/iOS-Echarts" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/Pluto-Y/iOS-Echarts" class="extension-name">iOS-Echarts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/Pluto-Y/" class="extension-author-name">Pluto-Y</a></div><div class="extension-desc">This is a highly custom chart control for iOS and Mac apps, which build with ECharts 2.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/abel533/ECharts" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/abel533/ECharts" class="extension-name">ECharts-Java</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/abel533" class="extension-author-name">abel533</a></div><div class="extension-desc">这是一个针对 ECharts2.x 版本的 Java 类库,实现了所有 ECharts 中的 JSON 结构对应的 Java 对象。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/idoku/EChartsSDK" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/idoku/EChartsSDK" class="extension-name">EChartsSDK</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/idoku" class="extension-author-name">idoku</a></div><div class="extension-desc">ECharts 的 .NET 类库,从 ECharts 的 Java 类库移植。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/hisune/Echarts-PHP" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/hisune/Echarts-PHP" class="extension-name">Echarts-PHP</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/hisune" class="extension-author-name">hisune</a></div><div class="extension-desc">A PHP library that works as a wrapper for Echarts.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/entronad/flutter_echarts" class="extension-head"><img src="https://echarts-www.cdn.bcebos.com/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/entronad/flutter_echarts" class="extension-name">flutter_echarts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/entronad" class="extension-author-name">entronad</a></div><div class="extension-desc">A Flutter widget to use Echarts in a reactive way.</div></div></div></div></div></div></div></div><div id="submit-extension"><div class="container"><h3>提交您的 ECharts 插件</h3><p>我们会尽快与您取得联系,之后您制作的插件将会在此页面提供给广大 ECharts 用户使用。</p><p>再次感谢您对 ECharts 的支持与贡献!</p><a href="mailto:dev@echarts.apache.org" class="btn btn-main btn-thirdary"><img src="https://echarts-www.cdn.bcebos.com/zh/images/btn-email.png?_v_=20200710_1"><span>发邮件提交</span></a></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1598523334942"></script><script type="text/javascript">document.getElementById('nav-download').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
 
diff --git a/zh/download-map.html b/zh/download-map.html
index a2d6e80..e944443 100644
--- a/zh/download-map.html
+++ b/zh/download-map.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -7,7 +7,7 @@
     document.head.insertBefore(el, document.getElementById('font-hack'));
 }
 </script><title>地图下载 - Apache ECharts (incubating)</title><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/vendors/prettify/prettify.css?_v_=20200710_1"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts-www.cdn.bcebos.com/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><h1>地图下载</h1><p>(暂不提供地图下载)</p><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div><div style="text-align: left; min-height: 300px; margin-top: 30px;" class="page-content container"><p>ECharts 之前提供下载的矢量地图数据来自第三方,由于部分数据不符合国家《测绘法》规定,目前暂时停止下载服务。</p><p>建议大家使用以百度地图为底图的形式,参考<a href="https://echarts.apache.org/examples/zh/editor.html?c=map-polygon">例子</a>。</p></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1597861067124"></script><script src="https://cdn.jsdelivr.net/npm/code-prettify@0.1.0/src/prettify.min.js"></script><script src="https://cdn.jsdelivr.net/npm/code-prettify@0.1.0/src/lang-css.js"></script><script>document.getElementById('nav-download').className = 'active';
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><h1>地图下载</h1><p>(暂不提供地图下载)</p><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div><div style="text-align: left; min-height: 300px; margin-top: 30px;" class="page-content container"><p>ECharts 之前提供下载的矢量地图数据来自第三方,由于部分数据不符合国家《测绘法》规定,目前暂时停止下载服务。</p><p>建议大家使用以百度地图为底图的形式,参考<a href="https://echarts.apache.org/examples/zh/editor.html?c=map-polygon">例子</a>。</p></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1598523334942"></script><script src="https://cdn.jsdelivr.net/npm/code-prettify@0.1.0/src/prettify.min.js"></script><script src="https://cdn.jsdelivr.net/npm/code-prettify@0.1.0/src/lang-css.js"></script><script>document.getElementById('nav-download').className = 'active';
 $('pre').addClass('prettyprint');
 prettyPrint();</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
diff --git a/zh/download-theme.html b/zh/download-theme.html
index 7780797..8058b7c 100644
--- a/zh/download-theme.html
+++ b/zh/download-theme.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -17,7 +17,7 @@
     ...
 });
 &lt;/script&gt;
-</pre></div></div></section><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1597861067124"></script><script src="https://cdn.jsdelivr.net/npm/code-prettify@0.1.0/src/prettify.min.js"></script><script src="https://cdn.jsdelivr.net/npm/code-prettify@0.1.0/src/lang-css.js"></script><script>document.getElementById('nav-download').className = 'active';
+</pre></div></div></section><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1598523334942"></script><script src="https://cdn.jsdelivr.net/npm/code-prettify@0.1.0/src/prettify.min.js"></script><script src="https://cdn.jsdelivr.net/npm/code-prettify@0.1.0/src/lang-css.js"></script><script>document.getElementById('nav-download').className = 'active';
 $('pre').addClass('prettyprint');
 prettyPrint();
 
diff --git a/zh/download.html b/zh/download.html
index f11babb..b7586f5 100644
--- a/zh/download.html
+++ b/zh/download.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -7,7 +7,7 @@
     document.head.insertBefore(el, document.getElementById('font-hack'));
 }
 </script><title>下载 - Apache ECharts (incubating)</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts-www.cdn.bcebos.com/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><h1>下载</h1></div><div id="download-main" class="page-content container"><div class="d-section-version d-section"><h3 class="first">方法一:从下载的源代码或编译产物安装</h3><table id="download-table" class="table"><tr><th>版本</th><th>发布日期</th><th>从镜像网站下载源码</th><th>从 GitHub 下载编译产物</th></tr></table><div class="checksum"><p><strong>注意:</strong>如果从镜像网站下载,请检查 <a href="https://www.apache.org/dev/release-signing#sha-checksum">SHA-512</a> 并且检验确认 <a href="https://www.apache.org/dev/release-signing#openpgp">OpenPGP</a> 与 <a href="https://www.apache.org">Apache 主站</a>的签名一致。链接在上面的 Source 旁。这个 <a href="https://www.apache.org/dist/incubator/echarts/KEYS">KEYS</a> 文件包含了用于签名发布版的公钥。如果可能的话,建议使用<a href="https://www.apache.org/dev/release-signing#web-of-trust">可信任的网络(web of trust)</a>确认 KEYS 的同一性。</p><h4>使用 GPG 验证 ECharts 发布版本</h4><ol><li>从镜像网站下载 apache-echarts-X.Y.Z-incubating-src.zip</li><li>从 <a href="https://www.apache.org/dist/incubator/echarts/">Apache</a> 下载 checksum apache-echarts-X.Y.Z-incubating-src.zip.asc</li><li>下载 <a href="https://www.apache.org/dist/incubator/echarts/KEYS">ECharts KEYS</a></li><li>gpg –import KEYS</li><li>gpg –verify apache-echarts-X.Y.Z-incubating-src.zip.asc</li></ol><h4>使用 SHA-512 验证</h4><ol><li>从镜像网站下载 apache-echarts-X.Y.Z-incubating-src.zip</li><li>从 <a href="https://www.apache.org/dist/incubator/echarts/">Apache</a> 下载 checksum apache-echarts-X.Y.Z-incubating-src.zip.sha512</li><li>shasum -a 512 apache-echarts-X.Y.Z-incubating-src.zip</li></ol><h4>License</h4><p>Apache ECharts (incubating) 基于 <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a> 发布</p></div><h3>方法二:从 npm 安装</h3><p><code>npm install echarts</code></p><h3>方法三:选择需要的模块,在线定制下载</h3><a href="builder.html" class="btn btn-main btn-thirdary more-btn">在线定制</a><p class="center">可自由选择所需图表和组件进行打包下载</p><h3>下载后……</h3><p><a href="./tutorial.html">5 分钟上手 ECharts</a></p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1597861067124"></script><script src="https://echarts-www.cdn.bcebos.com/zh/js/download.js?_v_=1597861067124"></script><script type="text/javascript">document.getElementById('nav-download').className = 'active';
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><h1>下载</h1></div><div id="download-main" class="page-content container"><div class="d-section-version d-section"><h3 class="first">方法一:从下载的源代码或编译产物安装</h3><table id="download-table" class="table"><tr><th>版本</th><th>发布日期</th><th>从镜像网站下载源码</th><th>从 GitHub 下载编译产物</th></tr></table><div class="checksum"><p><strong>注意:</strong>如果从镜像网站下载,请检查 <a href="https://www.apache.org/dev/release-signing#sha-checksum">SHA-512</a> 并且检验确认 <a href="https://www.apache.org/dev/release-signing#openpgp">OpenPGP</a> 与 <a href="https://www.apache.org">Apache 主站</a>的签名一致。链接在上面的 Source 旁。这个 <a href="https://www.apache.org/dist/incubator/echarts/KEYS">KEYS</a> 文件包含了用于签名发布版的公钥。如果可能的话,建议使用<a href="https://www.apache.org/dev/release-signing#web-of-trust">可信任的网络(web of trust)</a>确认 KEYS 的同一性。</p><h4>使用 GPG 验证 ECharts 发布版本</h4><ol><li>从镜像网站下载 apache-echarts-X.Y.Z-incubating-src.zip</li><li>从 <a href="https://www.apache.org/dist/incubator/echarts/">Apache</a> 下载 checksum apache-echarts-X.Y.Z-incubating-src.zip.asc</li><li>下载 <a href="https://www.apache.org/dist/incubator/echarts/KEYS">ECharts KEYS</a></li><li>gpg –import KEYS</li><li>gpg –verify apache-echarts-X.Y.Z-incubating-src.zip.asc</li></ol><h4>使用 SHA-512 验证</h4><ol><li>从镜像网站下载 apache-echarts-X.Y.Z-incubating-src.zip</li><li>从 <a href="https://www.apache.org/dist/incubator/echarts/">Apache</a> 下载 checksum apache-echarts-X.Y.Z-incubating-src.zip.sha512</li><li>shasum -a 512 apache-echarts-X.Y.Z-incubating-src.zip</li></ol><h4>License</h4><p>Apache ECharts (incubating) 基于 <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a> 发布</p></div><h3>方法二:从 npm 安装</h3><p><code>npm install echarts</code></p><h3>方法三:选择需要的模块,在线定制下载</h3><a href="builder.html" class="btn btn-main btn-thirdary more-btn">在线定制</a><p class="center">可自由选择所需图表和组件进行打包下载</p><h3>下载后……</h3><p><a href="./tutorial.html">5 分钟上手 ECharts</a></p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1598523334942"></script><script src="https://echarts-www.cdn.bcebos.com/zh/js/download.js?_v_=1598523334942"></script><script type="text/javascript">document.getElementById('nav-download').className = 'active';
 
 //- $('.download-echarts').click(function (e) {
 //-     var el = document.createElement('div');
diff --git a/zh/download3.html b/zh/download3.html
index 5b4ee1f..02fa474 100644
--- a/zh/download3.html
+++ b/zh/download3.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -7,7 +7,7 @@
     document.head.insertBefore(el, document.getElementById('font-hack'));
 }
 </script><title>下载 - Apache ECharts (incubating)</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts-www.cdn.bcebos.com/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><h1>下载</h1></div><div id="download-main" class="page-content container"><div class="d-section-version d-section"><h3 class="first">方法一:从下载的源代码或编译产物安装</h3><table id="download-table" class="table"><tr><th>版本</th><th>发布日期</th><th>从镜像网站下载源码</th><th>从 GitHub 下载编译产物</th></tr></table><div class="checksum"><p><strong>注意:</strong>如果从镜像网站下载,请检查 <a href="https://www.apache.org/dev/release-signing#sha-checksum">SHA-512</a> 并且检验确认 <a href="https://www.apache.org/dev/release-signing#openpgp">OpenPGP</a> 与 <a href="https://www.apache.org">Apache 主站</a>的签名一致。链接在上面的 Source 旁。这个 <a href="https://www.apache.org/dist/incubator/echarts/KEYS">KEYS</a> 文件包含了用于签名发布版的公钥。如果可能的话,建议使用<a href="https://www.apache.org/dev/release-signing#web-of-trust">可信任的网络(web of trust)</a>确认 KEYS 的同一性。</p><h4>使用 GPG 验证 ECharts 发布版本</h4><ol><li>从镜像网站下载 apache-echarts-X.Y.Z-incubating-src.zip</li><li>从 <a href="https://www.apache.org/dist/incubator/echarts/">Apache</a> 下载 checksum apache-echarts-X.Y.Z-incubating-src.zip.asc</li><li>下载 <a href="https://www.apache.org/dist/incubator/echarts/KEYS">ECharts KEYS</a></li><li>gpg –import KEYS</li><li>gpg –verify apache-echarts-X.Y.Z-incubating-src.zip.asc</li></ol><h4>使用 SHA-512 验证</h4><ol><li>从镜像网站下载 apache-echarts-X.Y.Z-incubating-src.zip</li><li>从 <a href="https://www.apache.org/dist/incubator/echarts/">Apache</a> 下载 checksum apache-echarts-X.Y.Z-incubating-src.zip.sha512</li><li>shasum -a 512 apache-echarts-X.Y.Z-incubating-src.zip</li></ol><h4>License</h4><p>Apache ECharts (incubating) 基于 <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a> 发布</p></div><h3>方法二:从 npm 安装</h3><p><code>npm install echarts</code></p><h3>方法三:选择需要的模块,在线定制下载</h3><a href="builder3.html" class="btn btn-main btn-thirdary more-btn">在线定制</a><p class="center">可自由选择所需图表和组件进行打包下载</p><h3>下载后……</h3><p><a href="./tutorial.html">5 分钟上手 ECharts</a></p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1597861067124"></script><script src="https://echarts-www.cdn.bcebos.com/zh/js/download.js?_v_=1597861067124"></script><script type="text/javascript">document.getElementById('nav-download').className = 'active';
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><h1>下载</h1></div><div id="download-main" class="page-content container"><div class="d-section-version d-section"><h3 class="first">方法一:从下载的源代码或编译产物安装</h3><table id="download-table" class="table"><tr><th>版本</th><th>发布日期</th><th>从镜像网站下载源码</th><th>从 GitHub 下载编译产物</th></tr></table><div class="checksum"><p><strong>注意:</strong>如果从镜像网站下载,请检查 <a href="https://www.apache.org/dev/release-signing#sha-checksum">SHA-512</a> 并且检验确认 <a href="https://www.apache.org/dev/release-signing#openpgp">OpenPGP</a> 与 <a href="https://www.apache.org">Apache 主站</a>的签名一致。链接在上面的 Source 旁。这个 <a href="https://www.apache.org/dist/incubator/echarts/KEYS">KEYS</a> 文件包含了用于签名发布版的公钥。如果可能的话,建议使用<a href="https://www.apache.org/dev/release-signing#web-of-trust">可信任的网络(web of trust)</a>确认 KEYS 的同一性。</p><h4>使用 GPG 验证 ECharts 发布版本</h4><ol><li>从镜像网站下载 apache-echarts-X.Y.Z-incubating-src.zip</li><li>从 <a href="https://www.apache.org/dist/incubator/echarts/">Apache</a> 下载 checksum apache-echarts-X.Y.Z-incubating-src.zip.asc</li><li>下载 <a href="https://www.apache.org/dist/incubator/echarts/KEYS">ECharts KEYS</a></li><li>gpg –import KEYS</li><li>gpg –verify apache-echarts-X.Y.Z-incubating-src.zip.asc</li></ol><h4>使用 SHA-512 验证</h4><ol><li>从镜像网站下载 apache-echarts-X.Y.Z-incubating-src.zip</li><li>从 <a href="https://www.apache.org/dist/incubator/echarts/">Apache</a> 下载 checksum apache-echarts-X.Y.Z-incubating-src.zip.sha512</li><li>shasum -a 512 apache-echarts-X.Y.Z-incubating-src.zip</li></ol><h4>License</h4><p>Apache ECharts (incubating) 基于 <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a> 发布</p></div><h3>方法二:从 npm 安装</h3><p><code>npm install echarts</code></p><h3>方法三:选择需要的模块,在线定制下载</h3><a href="builder3.html" class="btn btn-main btn-thirdary more-btn">在线定制</a><p class="center">可自由选择所需图表和组件进行打包下载</p><h3>下载后……</h3><p><a href="./tutorial.html">5 分钟上手 ECharts</a></p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1598523334942"></script><script src="https://echarts-www.cdn.bcebos.com/zh/js/download.js?_v_=1598523334942"></script><script type="text/javascript">document.getElementById('nav-download').className = 'active';
 
 //- $('.download-echarts').click(function (e) {
 //-     var el = document.createElement('div');
diff --git a/zh/examples.html b/zh/examples.html
index ae6f1d0..35c02cb 100644
--- a/zh/examples.html
+++ b/zh/examples.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -8,11 +8,11 @@
 }
 </script><title>Examples - Apache ECharts (incubating)</title><script>var chartId = location.hash.slice(1);
 window.location ='./examples/index.html';</script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/perfect-scrollbar@0.6.8/dist/css/perfect-scrollbar.min.css"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts-www.cdn.bcebos.com/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="left-chart-nav"><ul></ul></div><div id="explore-container"><div class="chart-list-panel"></div></div><div style="display:none">点击查看详情</div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1597861067124"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-lazyload@1.9.7/jquery.lazyload.min.js"></script><script type="text/javascript">var GALLERY_PATH = 'https://www.echartsjs.com/gallery/';
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="left-chart-nav"><ul></ul></div><div id="explore-container"><div class="chart-list-panel"></div></div><div style="display:none">点击查看详情</div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1598523334942"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-lazyload@1.9.7/jquery.lazyload.min.js"></script><script type="text/javascript">var GALLERY_PATH = 'https://www.echartsjs.com/gallery/';
 var GALLERY_EDITOR_PATH = GALLERY_PATH + 'editor.html?c=';
 var GALLERY_VIEW_PATH = GALLERY_PATH + 'view.html?c=';
 var GALLERY_THUMB_PATH = GALLERY_PATH + 'data/thumb/';
-</script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/config.js?_v_=1597861067124"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/chart-list.js?_v_=1597861067124"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/examples-nav.js?_v_=1597861067124"></script><script type="text/javascript">document.getElementById('nav-examples').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+</script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/config.js?_v_=1598523334942"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/chart-list.js?_v_=1598523334942"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/examples-nav.js?_v_=1598523334942"></script><script type="text/javascript">document.getElementById('nav-examples').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
 
diff --git a/zh/faq.html b/zh/faq.html
index 4f465a7..a54d360 100644
--- a/zh/faq.html
+++ b/zh/faq.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -9,7 +9,7 @@
 </script><title>FAQ - Apache ECharts (incubating)</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts-www.cdn.bcebos.com/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
 <!--[if (gt IE 8)|!(IE)]><body class="ECharts FAQ"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><div class="container"><h1>FAQ</h1><p>常见问题的解答</p><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div></div><div id="faq-page" class="page-content single-page"><div class="page-nav"><h4>常见问题</h4><ul></ul></div><div class="page-detail"><h2 id="ask-questions">通用问题</h2><h3>有技术问题怎么办?</h3><p>1)建议您在提问前,大致阅读一下<a href="https://echarts.apache.org/zh/option.html">配置项手册</a>左侧导航,了解 ECharts 有哪些配置项,并且在相关的组件下查找是否有实现您需要功能的配置项;</p><p>2)查看本页常见问题的解答;</p><p>3)建议在 <a href="https://gallery.echartsjs.com/editor.html">ECharts Gallery</a> 上添加图表,复现你的问题,如果无法使用代码描述需求,可以尝试提供设计稿或画个草图;</p><p>4)推荐在 <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><h3>ECharts 可以免费商用吗?</h3><p>可以,ECharts 基于 <a href="./license.html">Apache License 2.0</a> 开源。</p><h2 id="axis">坐标轴</h2><h3>坐标轴标签显示空间不够怎么办?</h3><p>可以用 <a href="https://echarts.apache.org/zh/option.html#xAxis.interval">interval</a> 控制每隔多少显示标签,设为 <code>0</code> 则显示所有标签。</p><p>或者,可以设置 <a href="https://echarts.apache.org/zh/option.html#yAxis.axisLabel.rotate">axisLabel.rotate</a>,将标签旋转一定角度。</p><h3>把坐标轴设置在右侧好像没有效果?</h3><p>需要将 <a href="https://echarts.apache.org/zh/option.html#yAxis.axisLine.onZero">onZero</a> 设为 <code>false</code> 才行。</p><h3>如何强制显示坐标轴第一个/最后一个标签?</h3><p>ECharts 3.5.2 版本起,支持 <a href="https://echarts.apache.org/zh/option.html#xAxis.axisLabel.showMinLabel">axisLabel.showMinLabel</a> 以及 <a href="https://echarts.apache.org/zh/option.html#xAxis.axisLabel.showMaxLabel">axisLabel.showMaxLabel</a>,分别用来控制第一个/最后一个标签是否强制显示,设为 <code>true</code> 则强制显示。</p><p>如果不方便更新版本,可以参考<a href="https://gallery.echartsjs.com/editor.html?c=xry06afSje">这个例子</a>实现同样的效果。</p><h2 id="legend">图例 legend</h2><h3>图例区域太大导致遮挡住图表怎么办?</h3><p>可以设置 <a href="https://echarts.apache.org/zh/option.html#grid">grid</a> 控制图表区域位置。例如将 <code>grid.top</code> 设置得大一些,可以将绘图区域下移。</p><p>在未来的版本中,我们计划会将布局做得更智能,自动处理这些遮挡问题。</p><h2 id="line-chart">折线图</h2><h3>坐标轴刻度好像和数据不匹配?</h3><p>请检查一下是否设置了 <code>stack</code>,如果不是想做堆积折线图的话,应该将其去掉。</p><h2 id="bar-chart">柱状图</h2><h3>为什么数据值很小的时候,y 轴的刻度会消失?</h3><p>ECharts 3.5.2 版本修复了该问题。</p><h2 id="map-chart">地图</h2><h3>图表上的省份名称重叠,如何修改名称的位置?</h3><p>可以修改地图文件(JS 或 JSON)中对应省份的 <code>cp</code> 坐标,或者通过 <code>echarts.getMap('china')</code> 修改已加载的地图数据。</p><p>更详细的做法请参考:<a href="https://github.com/apache/incubator-echarts/issues/4379#issuecomment-257765948">GitHub</a></p><h3>其他国家的地图在哪里下载?</h3><p>可以在<a href="https://github.com/echarts-maps/echarts-countries-js">这里</a>下载到其他国家的地图信息。</p><h3>如何获取地图的缩放事件?</h3><p>首先,需要将系列的 <a href="https://echarts.apache.org/zh/option.html#series-map.roam">roam</a> 设置为 <code>true</code>,然后可以监听 <code>'georoam'</code> 事件。例:</p><pre><code>myChart.on('georoam', function (params) {
    console.log(params);
-});</code></pre><p>参见这个<a href="https://gallery.echartsjs.com/editor.html?c=xHyqn_rQ6g">完整的例子</a>。</p><h3>如何制作自定义地图?</h3><p>ECharts 地图在地图坐标的基础上进行过<a href="https://github.com/apache/incubator-echarts/blob/8eeb7e5abe207d0536c62ce1f4ddecc6adfdf85e/src/util/mapData/rawData/encode.js">额外的编码</a>。可以使用 <a href="https://github.com/giscafer/mapshaper-plus">mapshaper-plus</a> 工具,上传自定义的 geojson 文件,生成 ECharts 可以使用的地图文件。</p><h2 id="baidu-map">百度地图</h2><h3>如何结合百度地图使用 ECharts?</h3><ol><li>引入 <code>echarts.js</code>、<code>bmap.js</code> 以及 <code>https://api.map.baidu.com/api?v=2.0&ak=这里填在百度开发平台注册得到的 access key</code>;</li><li>在 <code>option</code> 中设置 <code>bmap</code>,参考<a href="https://echarts.apache.org/examples/zh/editor.html?c=effectScatter-bmap">这个例子</a>;</li><li>如需获得百度地图实例,可以通过 <code>chart.getModel().getComponent('bmap').getBMap()</code>,然后根据<a href="https://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html">百度地图 API</a>做进一步设置。</li></ol><p><a href="https://gallery.echartsjs.com/explore.html#components=bmap~sort=rank~timeframe=all~author=all">Gallery</a> 上有更多百度地图的例子,可作为参考。</p><h2 id="gauge-chart">仪表盘</h2><h3>怎么设置仪表盘颜色?</h3><p>可以使用 <a href="https://echarts.apache.org/zh/option.html#series-gauge.axisLine.lineStyle.color">axisLine.lineStyle.color</a> 设置。</p><h2 id="event">事件处理</h2><h3>如何获取图表点击等事件?</h3><p>参考<a href="https://echarts.apache.org/zh/tutorial.html#ECharts%20%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%92%8C%E8%A1%8C%E4%B8%BA">官网教程</a>。ECharts 支持的事件类型请参考<a href="https://echarts.apache.org/zh/api.html#events">相关 API</a>。</p><h2 id="others">其他</h2><h3>图表为什么不显示?</h3><p>你可以检查以下情况:</p><ul><li><code>echarts.js</code> 是否正常被加载;</li><li><code>echarts</code> 变量是否存在;</li><li>调用 <code>echarts.init</code> 的时候,DOM 容器是否有宽高。</li></ul><h3>ECharts 有哪些学习资料?</h3><p>官网是最好的学习平台。此外,在 <a href="https://gallery.echartsjs.com">ECharts Gallery</a> 上学习别人的作品也是一个不错的选择。</p><p>ECharts 相关项目及资源请参见 <a href="https://github.com/ecomfe/awesome-echarts">awesome-echarts</a>。</p><footer class="inner-footer"><div class="container"><div class="row"><div class="col-md-8"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-4"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1597861067124"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+});</code></pre><p>参见这个<a href="https://gallery.echartsjs.com/editor.html?c=xHyqn_rQ6g">完整的例子</a>。</p><h3>如何制作自定义地图?</h3><p>ECharts 地图在地图坐标的基础上进行过<a href="https://github.com/apache/incubator-echarts/blob/8eeb7e5abe207d0536c62ce1f4ddecc6adfdf85e/src/util/mapData/rawData/encode.js">额外的编码</a>。可以使用 <a href="https://github.com/giscafer/mapshaper-plus">mapshaper-plus</a> 工具,上传自定义的 geojson 文件,生成 ECharts 可以使用的地图文件。</p><h2 id="baidu-map">百度地图</h2><h3>如何结合百度地图使用 ECharts?</h3><ol><li>引入 <code>echarts.js</code>、<code>bmap.js</code> 以及 <code>https://api.map.baidu.com/api?v=2.0&ak=这里填在百度开发平台注册得到的 access key</code>;</li><li>在 <code>option</code> 中设置 <code>bmap</code>,参考<a href="https://echarts.apache.org/examples/zh/editor.html?c=effectScatter-bmap">这个例子</a>;</li><li>如需获得百度地图实例,可以通过 <code>chart.getModel().getComponent('bmap').getBMap()</code>,然后根据<a href="https://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html">百度地图 API</a>做进一步设置。</li></ol><p><a href="https://gallery.echartsjs.com/explore.html#components=bmap~sort=rank~timeframe=all~author=all">Gallery</a> 上有更多百度地图的例子,可作为参考。</p><h2 id="gauge-chart">仪表盘</h2><h3>怎么设置仪表盘颜色?</h3><p>可以使用 <a href="https://echarts.apache.org/zh/option.html#series-gauge.axisLine.lineStyle.color">axisLine.lineStyle.color</a> 设置。</p><h2 id="event">事件处理</h2><h3>如何获取图表点击等事件?</h3><p>参考<a href="https://echarts.apache.org/zh/tutorial.html#ECharts%20%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%92%8C%E8%A1%8C%E4%B8%BA">官网教程</a>。ECharts 支持的事件类型请参考<a href="https://echarts.apache.org/zh/api.html#events">相关 API</a>。</p><h2 id="others">其他</h2><h3>图表为什么不显示?</h3><p>你可以检查以下情况:</p><ul><li><code>echarts.js</code> 是否正常被加载;</li><li><code>echarts</code> 变量是否存在;</li><li>调用 <code>echarts.init</code> 的时候,DOM 容器是否有宽高。</li></ul><h3>ECharts 有哪些学习资料?</h3><p>官网是最好的学习平台。此外,在 <a href="https://gallery.echartsjs.com">ECharts Gallery</a> 上学习别人的作品也是一个不错的选择。</p><p>ECharts 相关项目及资源请参见 <a href="https://github.com/ecomfe/awesome-echarts">awesome-echarts</a>。</p><footer class="inner-footer"><div class="container"><div class="row"><div class="col-md-8"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-4"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1598523334942"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
 
diff --git a/zh/feature.html b/zh/feature.html
index f3a9eba..2195eef 100644
--- a/zh/feature.html
+++ b/zh/feature.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -7,7 +7,7 @@
     document.head.insertBefore(el, document.getElementById('font-hack'));
 }
 </script><title>特性 - Apache ECharts (incubating)</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts-www.cdn.bcebos.com/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><div class="container"><h1>特性</h1><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div></div><div class="page-content single-page"><div class="page-nav"><h4>特性</h4><ul></ul></div><div class="page-detail"><p class="page-detail-desc">ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 <a href="https://github.com/ecomfe/zrender" target="_blank">ZRender</a>,提供直观,交互丰富,可高度个性化定制的数据可视化图表。</p><h2 id="chart-types">丰富的可视化类型</h2><p>ECharts 提供了常规的<a href="option.html#series-line" target="_blank">折线图</a>、<a href="option.html#series-bar" target="_blank">柱状图</a>、<a href="option.html#series-scatter" target="_blank">散点图</a>、<a href="option.html#series-pie" target="_blank">饼图</a>、<a href="option.html#series-candlestick" target="_blank">K线图</a>,用于统计的<a href="option.html#series-boxplot" target="_blank">盒形图</a>,用于地理数据可视化的<a href="option.html#series-map" target="_blank">地图</a>、<a href="option.html#series-heatmap" target="_blank">热力图</a>、<a href="option.html#series-lines" target="_blank">线图</a>,用于关系数据可视化的<a href="option.html#series-graph" target="_blank">关系图</a>、<a href="option.html#series-treemap" target="_blank">treemap</a>、<a href="option.html#series-sunburst">旭日图</a>,多维数据可视化的<a href="option.html#series-parallel" target="_blank">平行坐标</a>,还有用于 BI 的<a href="option.html#series-funnel" target="_blank">漏斗图</a>,<a href="option.html#series-gauge" target="_blank">仪表盘</a>,并且支持图与图之间的混搭。</p><p>除了已经内置的包含了丰富功能的图表,ECharts 还提供了<a href="option.html#series-custom">自定义系列</a>,只需要传入一个<em>renderItem</em>函数,就可以从数据映射到任何你想要的图形,更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。</p><p>你可以在下载界面下载包含所有图表的构建文件,如果只是需要其中一两个图表,又嫌包含所有图表的构建文件太大,也可以在在线构建中选择需要的图表类型后自定义构建。</p><h2 id="dataset">多种数据格式无需转换直接使用</h2><p>ECharts 内置的 dataset 属性(4.0+)支持直接传入包括二维表,key-value 等多种格式的数据源,通过简单的设置 encode 属性就可以完成从数据到图形的映射,这种方式更符合可视化的直觉,省去了大部分场景下数据转换的步骤,而且多个组件能够共享一份数据而不用克隆。</p><p>为了配合大数据量的展现,ECharts 还支持输入 TypedArray 格式的数据,TypedArray 在大数据量的存储中可以占用更少的内存,对 GC 友好等特性也可以大幅度提升可视化应用的性能。</p><h2 id="big-data">千万数据的前端展现</h2><p>通过增量渲染技术(4.0+),配合各种细致的优化,ECharts 能够展现千万级的数据量,并且在这个数据量级依然能够进行流畅的缩放平移等交互。</p><p>几千万的地理坐标数据就算使用二进制存储也要占上百 MB 的空间。因此 ECharts 同时提供了对流加载(4.0+)的支持,你可以使用 WebSocket 或者对数据分块后加载,加载多少渲染多少!不需要漫长地等待所有数据加载完再进行绘制。</p><img src="https://echarts-www.cdn.bcebos.com/zh/images/features/scatterGL.jpg?_v_=20200710_1" width="60%"><br /><img src="https://echarts-www.cdn.bcebos.com/zh/images/features/scatterGL2.jpg?_v_=20200710_1" width="30%"><img src="https://echarts-www.cdn.bcebos.com/zh/images/features/scatterGL3.jpg?_v_=20200710_1" width="30%"><h2 id="mobile">移动端优化</h2><p>ECharts 针对移动端交互做了细致的优化,例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放(用鼠标滚轮)、平移等。</p><p>细粒度的模块化和打包机制可以让 ECharts 在移动端也拥有很小的体积,可选的 SVG 渲染模块让移动端的内存占用不再捉襟见肘。</p><iframe data-src="https://echarts.apache.org/examples/zh/view.html?c=area-simple&amp;reset=1&amp;edit=1&amp;renderer=svg" width="60%" height="400"></iframe><h2 id="mult-platform">多渲染方案,跨平台使用!</h2><p>ECharts 支持以 Canvas、SVG(4.0+)、VML 的形式渲染图表。VML 可以兼容低版本 IE,SVG 使得移动端不再为内存担忧,Canvas 可以轻松应对大数据量和特效的展现。不同的渲染方式提供了更多选择,使得 ECharts 在各种场景下都有更好的表现。</p><p>除了 PC 和移动端的浏览器,ECharts 还能在 node 上配合 node-canvas 进行高效的服务端渲染(SSR)。从 4.0 开始我们还和微信小程序的团队合作,提供了 ECharts 对小程序的适配!</p><p>社区热心的贡献者也为我们提供了丰富的其它语言扩展,比如 Python 的<a href="https://github.com/pyecharts/pyecharts" target="_blank">pyecharts</a>,R 语言的 <a href="https://github.com/cosname/recharts" target="_blank">recharts</a>, Julia 的 <a href="https://github.com/randyzwitch/ECharts.jl">ECharts.jl</a> 等等。</p><p>我们希望平台和语言都不会成为大家使用 ECharts 实现可视化的限制!</p><h2 id="interaction">深度的交互式数据探索</h2><p>交互是从数据中发掘信息的重要手段。“总览为先,缩放过滤按需查看细节”是数据可视化交互的基本需求。</p><p>ECharts 一直在<em>交互</em>的路上前进,我们提供了 <a href="option.html#legend" target="_blank">图例</a>、<a href="option.html#visualMap" target="_blank">视觉映射</a>、<a href="option.html#dataZoom" target="_blank">数据区域缩放</a>、<a href="option.html#tooltip" target="_blank">tooltip</a>、<a href="option.html#brush">数据刷选</a>等开箱即用的交互组件,可以对数据进行多维度数据筛取、视图缩放、展示细节等交互操作。</p><iframe data-src="https://echarts.apache.org/examples/zh/view.html?c=scatter-matrix&amp;reset=1&amp;edit=1" width="60%" height="540"></iframe><h2 id="visual-mapping">多维数据的支持以及丰富的视觉编码手段</h2><p>ECharts 3 开始加强了对多维数据的支持。除了加入了平行坐标等常见的多维数据可视化工具外,对于传统的散点图等,传入的数据也可以是多个维度的。配合视觉映射组件 <a href="option.html#visualMap" target="_blank">visualMap</a> 提供的丰富的视觉编码,能够将不同维度的数据映射到颜色、大小、透明度、明暗度等不同的视觉通道。</p><iframe data-src="https://echarts.apache.org/examples/zh/view.html?c=scatter-nutrients-matrix&amp;reset=1&amp;edit=1" width="60%" height="400"></iframe><h2 id="dynamic-data">动态数据</h2><p>ECharts 由数据驱动,数据的改变驱动图表展现的改变。因此动态数据的实现也变得异常简单,只需要获取数据,填入数据,ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。配合 <a href="option.html#timeline" target="_blank">timeline</a> 组件能够在更高的时间维度上去表现数据的信息。</p><iframe data-src="https://echarts.apache.org/examples/zh/view.html?c=scatter-life-expectancy-timeline&amp;reset=1&amp;edit=1" width="60%" height="400"></iframe><h2 id="fancy-effects">绚丽的特效</h2><p>ECharts 针对线数据,点数据等地理数据的可视化提供了吸引眼球的特效。</p><iframe data-src="https://echarts.apache.org/examples/zh/view.html?c=lines-bmap-effect&amp;reset=1&amp;edit=1" width="60%" height="400"></iframe><h2 id="gl">通过 GL 实现更多更强大绚丽的三维可视化</h2><p>想要在 VR,大屏场景里实现三维的可视化效果?我们提供了基于 WebGL 的 ECharts GL,你可以跟使用 ECharts 普通组件一样轻松的使用 ECharts GL 绘制出三维的地球,建筑群,人口分布的柱状图,在这基础之上我们还提供了不同层级的画面配置项,几行配置就能得到艺术化的画面!</p><img src="https://echarts-www.cdn.bcebos.com/zh/images/features/flowGL-line.jpg?_v_=20200710_1" width="40%"><img src="https://echarts-www.cdn.bcebos.com/zh/images/features/buildings-ny.jpg?_v_=20200710_1" width="40%"><br /><img src="https://echarts-www.cdn.bcebos.com/zh/images/features/capetown-taxi.jpg?_v_=20200710_1" width="40%"><img src="https://echarts-www.cdn.bcebos.com/zh/images/features/population.jpg?_v_=20200710_1" width="40%"><h2 id="aria">无障碍访问(4.0+)</h2><p>当我们说到“可视化”的时候,我们往往很自然地将它与“看得⻅”联系在一起,但其 实这是片面的。W3C制定了无障碍富互联网应用规范集(WAI-ARIA,the Accessible Rich Internet Applications Suite),致力于使得网⻚内容和网⻚应 用能够被更多残障人士访问。</p><p>ECharts 4.0 遵从这一规范,支持自动根据图表配置项智能生成描述,使得盲人可 以在朗读设备的帮助下了解图表内容,让图表可以被更多人群访问!</p><footer class="inner-footer"><div class="container"><div class="row"><div class="col-md-8"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-4"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1597861067124"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><div class="container"><h1>特性</h1><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div></div><div class="page-content single-page"><div class="page-nav"><h4>特性</h4><ul></ul></div><div class="page-detail"><p class="page-detail-desc">ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 <a href="https://github.com/ecomfe/zrender" target="_blank">ZRender</a>,提供直观,交互丰富,可高度个性化定制的数据可视化图表。</p><h2 id="chart-types">丰富的可视化类型</h2><p>ECharts 提供了常规的<a href="option.html#series-line" target="_blank">折线图</a>、<a href="option.html#series-bar" target="_blank">柱状图</a>、<a href="option.html#series-scatter" target="_blank">散点图</a>、<a href="option.html#series-pie" target="_blank">饼图</a>、<a href="option.html#series-candlestick" target="_blank">K线图</a>,用于统计的<a href="option.html#series-boxplot" target="_blank">盒形图</a>,用于地理数据可视化的<a href="option.html#series-map" target="_blank">地图</a>、<a href="option.html#series-heatmap" target="_blank">热力图</a>、<a href="option.html#series-lines" target="_blank">线图</a>,用于关系数据可视化的<a href="option.html#series-graph" target="_blank">关系图</a>、<a href="option.html#series-treemap" target="_blank">treemap</a>、<a href="option.html#series-sunburst">旭日图</a>,多维数据可视化的<a href="option.html#series-parallel" target="_blank">平行坐标</a>,还有用于 BI 的<a href="option.html#series-funnel" target="_blank">漏斗图</a>,<a href="option.html#series-gauge" target="_blank">仪表盘</a>,并且支持图与图之间的混搭。</p><p>除了已经内置的包含了丰富功能的图表,ECharts 还提供了<a href="option.html#series-custom">自定义系列</a>,只需要传入一个<em>renderItem</em>函数,就可以从数据映射到任何你想要的图形,更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。</p><p>你可以在下载界面下载包含所有图表的构建文件,如果只是需要其中一两个图表,又嫌包含所有图表的构建文件太大,也可以在在线构建中选择需要的图表类型后自定义构建。</p><h2 id="dataset">多种数据格式无需转换直接使用</h2><p>ECharts 内置的 dataset 属性(4.0+)支持直接传入包括二维表,key-value 等多种格式的数据源,通过简单的设置 encode 属性就可以完成从数据到图形的映射,这种方式更符合可视化的直觉,省去了大部分场景下数据转换的步骤,而且多个组件能够共享一份数据而不用克隆。</p><p>为了配合大数据量的展现,ECharts 还支持输入 TypedArray 格式的数据,TypedArray 在大数据量的存储中可以占用更少的内存,对 GC 友好等特性也可以大幅度提升可视化应用的性能。</p><h2 id="big-data">千万数据的前端展现</h2><p>通过增量渲染技术(4.0+),配合各种细致的优化,ECharts 能够展现千万级的数据量,并且在这个数据量级依然能够进行流畅的缩放平移等交互。</p><p>几千万的地理坐标数据就算使用二进制存储也要占上百 MB 的空间。因此 ECharts 同时提供了对流加载(4.0+)的支持,你可以使用 WebSocket 或者对数据分块后加载,加载多少渲染多少!不需要漫长地等待所有数据加载完再进行绘制。</p><img src="https://echarts-www.cdn.bcebos.com/zh/images/features/scatterGL.jpg?_v_=20200710_1" width="60%"><br /><img src="https://echarts-www.cdn.bcebos.com/zh/images/features/scatterGL2.jpg?_v_=20200710_1" width="30%"><img src="https://echarts-www.cdn.bcebos.com/zh/images/features/scatterGL3.jpg?_v_=20200710_1" width="30%"><h2 id="mobile">移动端优化</h2><p>ECharts 针对移动端交互做了细致的优化,例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放(用鼠标滚轮)、平移等。</p><p>细粒度的模块化和打包机制可以让 ECharts 在移动端也拥有很小的体积,可选的 SVG 渲染模块让移动端的内存占用不再捉襟见肘。</p><iframe data-src="https://echarts.apache.org/examples/zh/view.html?c=area-simple&amp;reset=1&amp;edit=1&amp;renderer=svg" width="60%" height="400"></iframe><h2 id="mult-platform">多渲染方案,跨平台使用!</h2><p>ECharts 支持以 Canvas、SVG(4.0+)、VML 的形式渲染图表。VML 可以兼容低版本 IE,SVG 使得移动端不再为内存担忧,Canvas 可以轻松应对大数据量和特效的展现。不同的渲染方式提供了更多选择,使得 ECharts 在各种场景下都有更好的表现。</p><p>除了 PC 和移动端的浏览器,ECharts 还能在 node 上配合 node-canvas 进行高效的服务端渲染(SSR)。从 4.0 开始我们还和微信小程序的团队合作,提供了 ECharts 对小程序的适配!</p><p>社区热心的贡献者也为我们提供了丰富的其它语言扩展,比如 Python 的<a href="https://github.com/pyecharts/pyecharts" target="_blank">pyecharts</a>,R 语言的 <a href="https://github.com/cosname/recharts" target="_blank">recharts</a>, Julia 的 <a href="https://github.com/randyzwitch/ECharts.jl">ECharts.jl</a> 等等。</p><p>我们希望平台和语言都不会成为大家使用 ECharts 实现可视化的限制!</p><h2 id="interaction">深度的交互式数据探索</h2><p>交互是从数据中发掘信息的重要手段。“总览为先,缩放过滤按需查看细节”是数据可视化交互的基本需求。</p><p>ECharts 一直在<em>交互</em>的路上前进,我们提供了 <a href="option.html#legend" target="_blank">图例</a>、<a href="option.html#visualMap" target="_blank">视觉映射</a>、<a href="option.html#dataZoom" target="_blank">数据区域缩放</a>、<a href="option.html#tooltip" target="_blank">tooltip</a>、<a href="option.html#brush">数据刷选</a>等开箱即用的交互组件,可以对数据进行多维度数据筛取、视图缩放、展示细节等交互操作。</p><iframe data-src="https://echarts.apache.org/examples/zh/view.html?c=scatter-matrix&amp;reset=1&amp;edit=1" width="60%" height="540"></iframe><h2 id="visual-mapping">多维数据的支持以及丰富的视觉编码手段</h2><p>ECharts 3 开始加强了对多维数据的支持。除了加入了平行坐标等常见的多维数据可视化工具外,对于传统的散点图等,传入的数据也可以是多个维度的。配合视觉映射组件 <a href="option.html#visualMap" target="_blank">visualMap</a> 提供的丰富的视觉编码,能够将不同维度的数据映射到颜色、大小、透明度、明暗度等不同的视觉通道。</p><iframe data-src="https://echarts.apache.org/examples/zh/view.html?c=scatter-nutrients-matrix&amp;reset=1&amp;edit=1" width="60%" height="400"></iframe><h2 id="dynamic-data">动态数据</h2><p>ECharts 由数据驱动,数据的改变驱动图表展现的改变。因此动态数据的实现也变得异常简单,只需要获取数据,填入数据,ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。配合 <a href="option.html#timeline" target="_blank">timeline</a> 组件能够在更高的时间维度上去表现数据的信息。</p><iframe data-src="https://echarts.apache.org/examples/zh/view.html?c=scatter-life-expectancy-timeline&amp;reset=1&amp;edit=1" width="60%" height="400"></iframe><h2 id="fancy-effects">绚丽的特效</h2><p>ECharts 针对线数据,点数据等地理数据的可视化提供了吸引眼球的特效。</p><iframe data-src="https://echarts.apache.org/examples/zh/view.html?c=lines-bmap-effect&amp;reset=1&amp;edit=1" width="60%" height="400"></iframe><h2 id="gl">通过 GL 实现更多更强大绚丽的三维可视化</h2><p>想要在 VR,大屏场景里实现三维的可视化效果?我们提供了基于 WebGL 的 ECharts GL,你可以跟使用 ECharts 普通组件一样轻松的使用 ECharts GL 绘制出三维的地球,建筑群,人口分布的柱状图,在这基础之上我们还提供了不同层级的画面配置项,几行配置就能得到艺术化的画面!</p><img src="https://echarts-www.cdn.bcebos.com/zh/images/features/flowGL-line.jpg?_v_=20200710_1" width="40%"><img src="https://echarts-www.cdn.bcebos.com/zh/images/features/buildings-ny.jpg?_v_=20200710_1" width="40%"><br /><img src="https://echarts-www.cdn.bcebos.com/zh/images/features/capetown-taxi.jpg?_v_=20200710_1" width="40%"><img src="https://echarts-www.cdn.bcebos.com/zh/images/features/population.jpg?_v_=20200710_1" width="40%"><h2 id="aria">无障碍访问(4.0+)</h2><p>当我们说到“可视化”的时候,我们往往很自然地将它与“看得⻅”联系在一起,但其 实这是片面的。W3C制定了无障碍富互联网应用规范集(WAI-ARIA,the Accessible Rich Internet Applications Suite),致力于使得网⻚内容和网⻚应 用能够被更多残障人士访问。</p><p>ECharts 4.0 遵从这一规范,支持自动根据图表配置项智能生成描述,使得盲人可 以在朗读设备的帮助下了解图表内容,让图表可以被更多人群访问!</p><footer class="inner-footer"><div class="container"><div class="row"><div class="col-md-8"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-4"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1598523334942"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
 
diff --git a/zh/index.html b/zh/index.html
index 08562ee..6697650 100644
--- a/zh/index.html
+++ b/zh/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -15,9 +15,9 @@
     window.supportTouch = 'ontouchstart' in window && !ie && !edge;
 })()
 
-</script><section id="feature-section"><div class="container"><div class="row features"><p>Apache ECharts (incubating)<sup>TM</sup> 是一个正在 <a target="_blank" href="https://www.apache.org/">Apache Software Foundation</a> (ASF) 孵化中的项目。</p></div><div class="row features"><div class="col-sm-4"><div class="feature-icon-panel"><svg width="36px" height="33px" viewbox="0 0 36 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="feature-icon"><defs></defs><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="01-首页-标注" transform="translate(-320.000000, -826.000000)" stroke="#333743" stroke-width="2"><g id="Group-7" transform="translate(321.000000, 827.387847)"><path id="Oval-1-Copy-2" d="M17,29.5876845 C17,29.5876845 0.5,15.970603 0.5,10.4351463 C0.5,4.89968971 5.02192403,0.41231548 10.6,0.41231548 C13.0289902,0.41231548 17,3.27642672 17,3.27642672 C17,3.27642672 20.9710098,0.41231548 23.4,0.41231548 C28.978076,0.41231548 33.5,4.89968971 33.5,10.4351463 C33.5,15.970603 17,29.5876845 17,29.5876845 Z"></path><path id="Path-4" d="M8.97721839,4.43098465 C8.97721839,4.43098465 4.65711371,4.98291942 5.76387751,8.9986647"></path></g></g></g></svg></div><h3>开源免费</h3><p>遵循 Apache-2.0 开源协议,免费商用</p></div><div class="col-sm-4"><div class="feature-icon-panel"><svg width="37px" height="36px" viewbox="0 0 37 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="feature-icon"><defs><rect id="path-1" x="0.402989808" y="0.675409258" width="15.7021285" height="15.4476654" rx="3.4507722"></rect><mask id="mask-2" maskcontentunits="userSpaceOnUse" maskunits="objectBoundingBox" x="0" y="0" width="15.7021285" height="15.4476654" fill="white"><use xlink:href="#path-1"></use></mask><rect id="path-3" x="0.402989808" y="19.9416819" width="15.7021285" height="15.4476654" rx="3.4507722"></rect><mask id="mask-4" maskcontentunits="userSpaceOnUse" maskunits="objectBoundingBox" x="0" y="0" width="15.7021285" height="15.4476654" fill="white"><use xlink:href="#path-3"></use></mask><rect id="path-5" x="20.0265472" y="0.675409258" width="15.7021285" height="15.4476654" rx="3.4507722"></rect><mask id="mask-6" maskcontentunits="userSpaceOnUse" maskunits="objectBoundingBox" x="0" y="0" width="15.7021285" height="15.4476654" fill="white"><use xlink:href="#path-5"></use></mask><rect id="path-7" x="20.0265472" y="19.9416819" width="15.7021285" height="15.4476654" rx="3.4507722"></rect><mask id="mask-8" maskcontentunits="userSpaceOnUse" maskunits="objectBoundingBox" x="0" y="0" width="15.7021285" height="15.4476654" fill="white"><use xlink:href="#path-7"></use></mask></defs><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="01-首页-标注" transform="translate(-701.000000, -824.000000)"><g id="Group-12" transform="translate(702.000000, 824.000000)"><use id="Rectangle-2" stroke="#333743" mask="url(#mask-2)" stroke-width="4" xlink:href="#path-1"></use><path id="Line" d="M16.6179041,10.4063517 L0.445091444,10.4063517" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square"></path><path id="Line-Copy-3" d="M16.6179041,5.4063517 L0.445091444,5.4063517" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square"></path><path id="Line-Copy" d="M6,1.07200204 L6,16.2280375" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square"></path><path id="Line-Copy-2" d="M11,1.07200204 L11,16.2280375" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square"></path><use id="Rectangle-2-Copy-2" stroke="#333743" mask="url(#mask-4)" stroke-width="4" xlink:href="#path-3"></use><use id="Rectangle-2-Copy" stroke="#333743" mask="url(#mask-6)" stroke-width="4" xlink:href="#path-5"></use><use id="Rectangle-2-Copy-3" stroke="#333743" mask="url(#mask-8)" stroke-width="4" xlink:href="#path-7"></use></g></g></g></svg></div><h3>功能丰富</h3><p>涵盖各行业图表,满足各种需求</p></div><div class="col-sm-4"><div class="feature-icon-panel"><svg width="36px" height="31px" viewbox="0 0 36 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="feature-icon"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="01-首页-标注" transform="translate(-1084.000000, -827.000000)" fill="#333743"><g id="Group-38" transform="translate(1057.000000, 797.000000)"><path id="Shape" d="M63,56.361686 C63,51.671658 60.3077922,47.6639411 56.5050056,46.0305295 C58.3479474,44.7003672 59.5616758,42.4363346 59.5616758,39.8656065 C59.5616758,36.354116 57.2992585,33.4181102 54.2632182,32.6530946 C54.2357116,32.6462026 54.2082051,32.6496486 54.1841368,32.6599867 C54.1497535,32.6565406 54.1153703,32.6496486 54.0809871,32.6496486 C53.4311438,32.6496486 52.9050802,33.2182413 52.9050802,33.9177826 C52.9050802,34.5518495 53.3348707,35.068752 53.8953176,35.1652404 C53.995029,35.2100386 54.1256853,35.2410528 54.1325619,35.2444988 C55.8895456,35.8889038 57.1582872,37.6842783 57.1582872,39.8001322 C57.1582872,42.1606533 55.5835347,44.1214365 53.5067869,44.5315124 C53.5033486,44.5315124 53.4999103,44.5384045 53.4999103,44.5384045 C52.8088071,44.5866487 52.2586752,45.2000396 52.2586752,45.9581631 C52.2586752,46.7266247 52.8225604,47.3503537 53.5274169,47.3813678 C53.5308552,47.3848138 53.5377318,47.3917059 53.5411702,47.3917059 C57.718734,47.850026 60.6791312,51.688888 60.6791312,56.361686 C60.6791312,57.0543353 61.1983181,57.6160359 61.8412847,57.6160359 C62.4670598,57.6160359 62.9724934,57.0819034 62.9965617,56.4133762 C62.9965617,56.4064842 63,56.4030382 63,56.3961462 L63,56.3892541 L63,56.361686 L63,56.361686 Z M27,55.9123667 C27,51.2223386 29.6922078,47.2146218 33.4949944,45.5812101 C31.6520526,44.2510479 30.4383242,41.9870152 30.4383242,39.4162872 C30.4383242,35.9047967 32.7007415,32.9687909 35.7367818,32.2037753 C35.7642884,32.1968832 35.7917949,32.2003293 35.8158632,32.2106673 C35.8502465,32.2072213 35.8846297,32.2003293 35.9190129,32.2003293 C36.5688562,32.2003293 37.0949198,32.7689219 37.0949198,33.4684632 C37.0949198,34.1025302 36.6651293,34.6194326 36.1046824,34.7159211 C36.004971,34.7607193 35.8743147,34.7917334 35.8674381,34.7951795 C34.1104544,35.4395845 32.8417128,37.2349589 32.8417128,39.3508129 C32.8417128,41.7113339 34.4164653,43.6721172 36.4932131,44.0821931 C36.4966514,44.0821931 36.5000897,44.0890851 36.5000897,44.0890851 C37.1911929,44.1373293 37.7413248,44.7507202 37.7413248,45.5088438 C37.7413248,46.2773054 37.1774396,46.9010343 36.4725831,46.9320485 C36.4691448,46.9354945 36.4622682,46.9423865 36.4588298,46.9423865 C32.281266,47.4007067 29.3208688,51.2395687 29.3208688,55.9123667 C29.3208688,56.6050159 28.8016819,57.1667165 28.1587153,57.1667165 C27.5329402,57.1667165 27.0275066,56.632584 27.0034383,55.9640569 C27.0034383,55.9571649 27,55.9537189 27,55.9468268 L27,55.9399348 L27,55.9123667 L27,55.9123667 Z M49.0919787,46.2372904 C51.2925061,44.645231 52.7434789,41.9401083 52.7434789,38.8662618 C52.7434789,33.9694728 49.0644721,29.9996622 44.5258841,29.9996622 C39.9872962,29.9996622 36.3082893,33.9694728 36.3082893,38.8662618 C36.3082893,41.9401083 37.7592621,44.645231 39.9597896,46.2372904 C35.4074484,48.1980736 32.1926153,52.9914822 32.1926153,58.6015965 C32.1926153,58.91863 32.2098069,59.2287715 32.2304368,59.5389129 L32.2338752,59.5389129 C32.2338752,60.2212241 32.7461855,60.7760327 33.3788371,60.7760327 C34.0114888,60.7760327 34.5237991,60.2246701 34.5237991,59.5389129 C34.5237991,59.5010067 34.5169224,59.4631006 34.5134841,59.4251944 C34.4928542,59.1529591 34.4722242,58.8807238 34.4722242,58.6015965 C34.4722242,52.6089744 38.9729906,47.7535376 44.5224458,47.7535376 C50.0753394,47.7535376 54.5761057,52.6089744 54.5761057,58.6015965 C54.5761057,58.8910619 54.5554758,59.1736352 54.5348458,59.4562085 C54.5348458,59.4699926 54.5314075,59.4837767 54.5314075,59.4975607 L54.5314075,59.5354669 L54.5348458,59.5354669 C54.5554758,60.200548 55.0574711,60.7346805 55.6763695,60.7346805 C56.2952678,60.7346805 56.7972632,60.200548 56.8178931,59.5354669 L56.8213314,59.5354669 C56.8419614,59.2253255 56.859153,58.915184 56.859153,58.6015965 C56.8557147,52.9914822 53.6374432,48.1980736 49.0919787,46.2372904 L49.0919787,46.2372904 Z M44.5224458,45.2379457 C41.2629145,45.2379457 38.6188432,42.3846443 38.6188432,38.8662618 C38.6188432,35.3478793 41.2629145,32.4945779 44.5224458,32.4945779 C47.7819771,32.4945779 50.4260484,35.3478793 50.4260484,38.8662618 C50.4260484,42.3846443 47.7819771,45.2379457 44.5224458,45.2379457 L44.5224458,45.2379457 Z"></path></g></g></g></svg></div><h3>社区活跃</h3><p><a class="github-button" href="https://github.com/apache/incubator-echarts" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star apache/incubator-echarts on GitHub">GitHub Stars</a></p></div></div><div id="feature-4" class="row feature-detail"><div class="col-sm-4 col"><h2>全新 4.0</h2><h3 style="color:#000;font-weight:bold;margin-bottom:20px;">八项新科技</h3><p>千万级数据可视化渲染能力</p><p>SVG + Canvas 双引擎动力更佳</p><p>数据样式分离及扁平配置让开发更便捷</p><p>首创无障碍访问支持</p><p>微信小程序、PPT,哪里都能用</p><div class="feature-btn"><a href="feature.html">了解更多<svg width="10px" height="13px" viewbox="0 0 10 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="more-icon"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="01-首页-设计稿" transform="translate(-1082.000000, -1417.000000)" fill="#3AADE3"><g id="Group-44" transform="translate(1006.000000, 1161.000000)"><g id="Group-16"><g id="Group-35" transform="translate(4.000000, 255.947089)"><polygon id="Shape" transform="translate(77.000000, 7.000000) scale(-1, 1) translate(-77.000000, -7.000000) " points="82 1.80411203 80.8773864 1 72 6.99980583 80.8773864 13 82 12.1957262 74.3133589 6.99980583"></polygon></g></g></g></g></g></svg></a></div></div><div class="col-sm-8 col"><video id="video-feature-4" loop="true" muted="true" data-src="https://echarts.cdn.apache.org/zh/video/feature-4.mp4" poster="https://echarts-www.cdn.bcebos.com/zh/video/feature-4.jpg?_v_=20200710_1" class="lazy feature-video"></video><a id="video-feature-4-play" href="javascript:;" onclick="playVideo(&quot;video-feature-4&quot;)" class="feature-play-btn video-play-btn video-btn"><svg width="19px" height="25px" viewBox="0 0 19 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-23.000000, -18.000000)" fill="#AA344C"><path d="M41.365908,29.4271388 L41.3664843,29.4265626 L26.3794329,19.1497136 L26.3747509,19.1541315 C26.0642269,18.8592621 25.6429678,18.677793 25.1786824,18.677793 C24.2236284,18.677793 23.4494433,19.4443188 23.4494433,20.3905371 C23.4494433,20.910214 23.4270417,21.9276946 23.4494433,21.9056292 L23.4494433,30.6673861 L23.4494433,39.8901629 C23.4494433,39.8977982 23.4494433,40.4825908 23.4494433,40.9444991 C23.4494433,41.8901412 24.2236284,42.656691 25.1786824,42.656691 C25.6447205,42.656691 26.0677564,42.4740454 26.3782564,42.1764869 L26.3794329,42.1770872 L41.3664843,31.9005503 L41.3659081,31.8996379 C41.6917266,31.5882735 41.894997,31.1514078 41.894997,30.6670739 C41.894997,30.6658974 41.894997,30.6650091 41.894997,30.6635444 C41.894997,30.6623679 41.894997,30.6609273 41.894997,30.6600389 C41.894997,30.175657 41.6917265,29.7384792 41.365908,29.4271388 Z"></path></g></g></svg></a><a id="video-feature-4-pause" href="javascript:;" onclick="pauseVideo(&quot;video-feature-4&quot;)" class="feature-play-btn video-pause-btn video-btn"><svg width="17px" height="22px" viewBox="0 0 17 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-22.000000, -19.000000)" fill="#AA344C"><g transform="translate(22.667242, 19.000000)"><path d="M2,0 C3.1045695,-2.02906125e-16 4,0.8954305 4,2 L4,20 C4,21.1045695 3.1045695,22 2,22 C0.8954305,22 1.3527075e-16,21.1045695 0,20 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z M14,0 C15.1045695,-2.02906125e-16 16,0.8954305 16,2 L16,20 C16,21.1045695 15.1045695,22 14,22 C12.8954305,22 12,21.1045695 12,20 L12,2 C12,0.8954305 12.8954305,2.02906125e-16 14,0 Z"></path></g></g></g></svg></a></div></div><div id="feature-dimension" class="row feature-detail"><div class="col-sm-4 col mobile"><h2>多维度数据分析</h2><h3>数据自由刷选</h3><p>自由选择数据,发掘数据背后的更多秘密</p><h3>多图表联动查看</h3><p>对多个图表数据联动查看,进行多维有效分析</p><div class="feature-btn"><a href="feature.html">了解更多<svg width="10px" height="13px" viewbox="0 0 10 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="more-icon"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="01-首页-设计稿" transform="translate(-1082.000000, -1417.000000)" fill="#3AADE3"><g id="Group-44" transform="translate(1006.000000, 1161.000000)"><g id="Group-16"><g id="Group-35" transform="translate(4.000000, 255.947089)"><polygon id="Shape" transform="translate(77.000000, 7.000000) scale(-1, 1) translate(-77.000000, -7.000000) " points="82 1.80411203 80.8773864 1 72 6.99980583 80.8773864 13 82 12.1957262 74.3133589 6.99980583"></polygon></g></g></g></g></g></svg></a></div></div><div class="col-sm-8 col"><div id="col-desktop"><img data-src="https://echarts-www.cdn.bcebos.com/zh/images/feature-1.png?_v_=20200710_1" class="lazy"><video id="video-feature-1" loop="true" muted="true" data-src="https://echarts.cdn.apache.org/zh/video/feature-1.mp4" poster="https://echarts-www.cdn.bcebos.com/zh/video/feature-2.jpg?_v_=20200710_1" class="lazy feature-video"></video><a id="video-feature-1-play" href="javascript:;" onclick="playVideo(&quot;video-feature-1&quot;)" class="feature-play-btn video-play-btn video-btn"><svg width="19px" height="25px" viewBox="0 0 19 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-23.000000, -18.000000)" fill="#AA344C"><path d="M41.365908,29.4271388 L41.3664843,29.4265626 L26.3794329,19.1497136 L26.3747509,19.1541315 C26.0642269,18.8592621 25.6429678,18.677793 25.1786824,18.677793 C24.2236284,18.677793 23.4494433,19.4443188 23.4494433,20.3905371 C23.4494433,20.910214 23.4270417,21.9276946 23.4494433,21.9056292 L23.4494433,30.6673861 L23.4494433,39.8901629 C23.4494433,39.8977982 23.4494433,40.4825908 23.4494433,40.9444991 C23.4494433,41.8901412 24.2236284,42.656691 25.1786824,42.656691 C25.6447205,42.656691 26.0677564,42.4740454 26.3782564,42.1764869 L26.3794329,42.1770872 L41.3664843,31.9005503 L41.3659081,31.8996379 C41.6917266,31.5882735 41.894997,31.1514078 41.894997,30.6670739 C41.894997,30.6658974 41.894997,30.6650091 41.894997,30.6635444 C41.894997,30.6623679 41.894997,30.6609273 41.894997,30.6600389 C41.894997,30.175657 41.6917265,29.7384792 41.365908,29.4271388 Z"></path></g></g></svg></a><a id="video-feature-1-pause" href="javascript:;" onclick="pauseVideo(&quot;video-feature-1&quot;)" class="feature-play-btn video-pause-btn video-btn"><svg width="17px" height="22px" viewBox="0 0 17 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-22.000000, -19.000000)" fill="#AA344C"><g transform="translate(22.667242, 19.000000)"><path d="M2,0 C3.1045695,-2.02906125e-16 4,0.8954305 4,2 L4,20 C4,21.1045695 3.1045695,22 2,22 C0.8954305,22 1.3527075e-16,21.1045695 0,20 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z M14,0 C15.1045695,-2.02906125e-16 16,0.8954305 16,2 L16,20 C16,21.1045695 15.1045695,22 14,22 C12.8954305,22 12,21.1045695 12,20 L12,2 C12,0.8954305 12.8954305,2.02906125e-16 14,0 Z"></path></g></g></g></svg></a></div></div><div id="col-analysis" class="col-sm-4 col pc"><h2>多维度数据分析</h2><h3>数据自由刷选</h3><p>自由选择数据,发掘数据背后的更多秘密</p><h3>多图表联动查看</h3><p>对多个图表数据联动查看,进行多维有效分析</p><div class="feature-btn"><a href="feature.html">了解更多<svg width="10px" height="13px" viewbox="0 0 10 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="more-icon"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="01-首页-设计稿" transform="translate(-1082.000000, -1417.000000)" fill="#3AADE3"><g id="Group-44" transform="translate(1006.000000, 1161.000000)"><g id="Group-16"><g id="Group-35" transform="translate(4.000000, 255.947089)"><polygon id="Shape" transform="translate(77.000000, 7.000000) scale(-1, 1) translate(-77.000000, -7.000000) " points="82 1.80411203 80.8773864 1 72 6.99980583 80.8773864 13 82 12.1957262 74.3133589 6.99980583"></polygon></g></g></g></g></g></svg></a></div></div></div><div class="row feature-detail"><div id="col-data" class="col-sm-4 col"><h2>多设备随意展示</h2><h3>电脑/手机/平板/大屏  …</h3><p>兼容多种设备,可随时随地任性展示</p><div class="feature-btn"><a href="feature.html">了解更多<svg width="10px" height="13px" viewbox="0 0 10 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="more-icon"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="01-首页-设计稿" transform="translate(-1082.000000, -1417.000000)" fill="#3AADE3"><g id="Group-44" transform="translate(1006.000000, 1161.000000)"><g id="Group-16"><g id="Group-35" transform="translate(4.000000, 255.947089)"><polygon id="Shape" transform="translate(77.000000, 7.000000) scale(-1, 1) translate(-77.000000, -7.000000) " points="82 1.80411203 80.8773864 1 72 6.99980583 80.8773864 13 82 12.1957262 74.3133589 6.99980583"></polygon></g></g></g></g></g></svg></a></div></div><div class="col-sm-8 col"><div id="col-desktop"><img data-src="https://echarts-www.cdn.bcebos.com/zh/images/index-feature.jpg?_v_=20200710_1" class="lazy"></div></div></div></div></section><section id="publication"><div class="container"><div class="col-sm-8 col"><h2>ECharts: A Declarative Framework for Rapid Construction of Web-based Visualization</h2><p class="note"><i class="note-icon"><img classs="lazy" data-src="https://echarts-www.cdn.bcebos.com/zh/images/note.svg?_v_=20200710_1" /></i> Please cite the following paper whenever you use ECharts in your R&D projects, products, research papers, technical reports, news reports, books, presentations, teaching, patents, and other related intelligence activities.</p><p class="link">Visual Informatics, 2018<a href="http://www.cad.zju.edu.cn/home/vagblog/VAG_Work/echarts.pdf">[PDF]</a></p></div><div class="col-sm-4 col"><div class="img-container"><img data-src="https://echarts-www.cdn.bcebos.com/zh/images/pipeline.jpg?_v_=20200710_1" alt="" class="lazy"></div></div></div></section><section id="about-section" class="normal"><div class="container"><h3>关注我们</h3><p>可以通过以下渠道关注 ECharts,及时获得更多最新动态</p><div class="btn-panel"><a id="btn-github" href="https://github.com/apache/incubator-echarts"><div class="btn-content"><img data-src="https://echarts-www.cdn.bcebos.com/zh/images/icon-github.png?_v_=20200710_1" class="lazy"><span>GitHub</span></div><div class="btn-shadow"></div></a><a id="btn-weibo" href="https://weibo.com/echarts"><div class="btn-content zh"><img data-src="https://echarts-www.cdn.bcebos.com/zh/images/icon-weibo.png?_v_=20200710_1" class="lazy"><span>微博</span></div><div class="btn-shadow"></div></a><a id="btn-twitter" href="https://twitter.com/echartsjs"><div class="btn-content"><img data-src="https://echarts-www.cdn.bcebos.com/zh/images/icon-twitter.png?_v_=20200710_1" class="lazy"><span>Twitter</span></div><div class="btn-shadow"></div></a></div></div></section></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1597861067124"></script><script>window.lazyLoadOptions = {
+</script><section id="feature-section"><div class="container"><div class="row features"><p>Apache ECharts (incubating)<sup>TM</sup> 是一个正在 <a target="_blank" href="https://www.apache.org/">Apache Software Foundation</a> (ASF) 孵化中的项目。</p></div><div class="row features"><div class="col-sm-4"><div class="feature-icon-panel"><svg width="36px" height="33px" viewbox="0 0 36 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="feature-icon"><defs></defs><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="01-首页-标注" transform="translate(-320.000000, -826.000000)" stroke="#333743" stroke-width="2"><g id="Group-7" transform="translate(321.000000, 827.387847)"><path id="Oval-1-Copy-2" d="M17,29.5876845 C17,29.5876845 0.5,15.970603 0.5,10.4351463 C0.5,4.89968971 5.02192403,0.41231548 10.6,0.41231548 C13.0289902,0.41231548 17,3.27642672 17,3.27642672 C17,3.27642672 20.9710098,0.41231548 23.4,0.41231548 C28.978076,0.41231548 33.5,4.89968971 33.5,10.4351463 C33.5,15.970603 17,29.5876845 17,29.5876845 Z"></path><path id="Path-4" d="M8.97721839,4.43098465 C8.97721839,4.43098465 4.65711371,4.98291942 5.76387751,8.9986647"></path></g></g></g></svg></div><h3>开源免费</h3><p>遵循 Apache-2.0 开源协议,免费商用</p></div><div class="col-sm-4"><div class="feature-icon-panel"><svg width="37px" height="36px" viewbox="0 0 37 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="feature-icon"><defs><rect id="path-1" x="0.402989808" y="0.675409258" width="15.7021285" height="15.4476654" rx="3.4507722"></rect><mask id="mask-2" maskcontentunits="userSpaceOnUse" maskunits="objectBoundingBox" x="0" y="0" width="15.7021285" height="15.4476654" fill="white"><use xlink:href="#path-1"></use></mask><rect id="path-3" x="0.402989808" y="19.9416819" width="15.7021285" height="15.4476654" rx="3.4507722"></rect><mask id="mask-4" maskcontentunits="userSpaceOnUse" maskunits="objectBoundingBox" x="0" y="0" width="15.7021285" height="15.4476654" fill="white"><use xlink:href="#path-3"></use></mask><rect id="path-5" x="20.0265472" y="0.675409258" width="15.7021285" height="15.4476654" rx="3.4507722"></rect><mask id="mask-6" maskcontentunits="userSpaceOnUse" maskunits="objectBoundingBox" x="0" y="0" width="15.7021285" height="15.4476654" fill="white"><use xlink:href="#path-5"></use></mask><rect id="path-7" x="20.0265472" y="19.9416819" width="15.7021285" height="15.4476654" rx="3.4507722"></rect><mask id="mask-8" maskcontentunits="userSpaceOnUse" maskunits="objectBoundingBox" x="0" y="0" width="15.7021285" height="15.4476654" fill="white"><use xlink:href="#path-7"></use></mask></defs><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="01-首页-标注" transform="translate(-701.000000, -824.000000)"><g id="Group-12" transform="translate(702.000000, 824.000000)"><use id="Rectangle-2" stroke="#333743" mask="url(#mask-2)" stroke-width="4" xlink:href="#path-1"></use><path id="Line" d="M16.6179041,10.4063517 L0.445091444,10.4063517" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square"></path><path id="Line-Copy-3" d="M16.6179041,5.4063517 L0.445091444,5.4063517" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square"></path><path id="Line-Copy" d="M6,1.07200204 L6,16.2280375" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square"></path><path id="Line-Copy-2" d="M11,1.07200204 L11,16.2280375" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square"></path><use id="Rectangle-2-Copy-2" stroke="#333743" mask="url(#mask-4)" stroke-width="4" xlink:href="#path-3"></use><use id="Rectangle-2-Copy" stroke="#333743" mask="url(#mask-6)" stroke-width="4" xlink:href="#path-5"></use><use id="Rectangle-2-Copy-3" stroke="#333743" mask="url(#mask-8)" stroke-width="4" xlink:href="#path-7"></use></g></g></g></svg></div><h3>功能丰富</h3><p>涵盖各行业图表,满足各种需求</p></div><div class="col-sm-4"><div class="feature-icon-panel"><svg width="36px" height="31px" viewbox="0 0 36 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="feature-icon"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="01-首页-标注" transform="translate(-1084.000000, -827.000000)" fill="#333743"><g id="Group-38" transform="translate(1057.000000, 797.000000)"><path id="Shape" d="M63,56.361686 C63,51.671658 60.3077922,47.6639411 56.5050056,46.0305295 C58.3479474,44.7003672 59.5616758,42.4363346 59.5616758,39.8656065 C59.5616758,36.354116 57.2992585,33.4181102 54.2632182,32.6530946 C54.2357116,32.6462026 54.2082051,32.6496486 54.1841368,32.6599867 C54.1497535,32.6565406 54.1153703,32.6496486 54.0809871,32.6496486 C53.4311438,32.6496486 52.9050802,33.2182413 52.9050802,33.9177826 C52.9050802,34.5518495 53.3348707,35.068752 53.8953176,35.1652404 C53.995029,35.2100386 54.1256853,35.2410528 54.1325619,35.2444988 C55.8895456,35.8889038 57.1582872,37.6842783 57.1582872,39.8001322 C57.1582872,42.1606533 55.5835347,44.1214365 53.5067869,44.5315124 C53.5033486,44.5315124 53.4999103,44.5384045 53.4999103,44.5384045 C52.8088071,44.5866487 52.2586752,45.2000396 52.2586752,45.9581631 C52.2586752,46.7266247 52.8225604,47.3503537 53.5274169,47.3813678 C53.5308552,47.3848138 53.5377318,47.3917059 53.5411702,47.3917059 C57.718734,47.850026 60.6791312,51.688888 60.6791312,56.361686 C60.6791312,57.0543353 61.1983181,57.6160359 61.8412847,57.6160359 C62.4670598,57.6160359 62.9724934,57.0819034 62.9965617,56.4133762 C62.9965617,56.4064842 63,56.4030382 63,56.3961462 L63,56.3892541 L63,56.361686 L63,56.361686 Z M27,55.9123667 C27,51.2223386 29.6922078,47.2146218 33.4949944,45.5812101 C31.6520526,44.2510479 30.4383242,41.9870152 30.4383242,39.4162872 C30.4383242,35.9047967 32.7007415,32.9687909 35.7367818,32.2037753 C35.7642884,32.1968832 35.7917949,32.2003293 35.8158632,32.2106673 C35.8502465,32.2072213 35.8846297,32.2003293 35.9190129,32.2003293 C36.5688562,32.2003293 37.0949198,32.7689219 37.0949198,33.4684632 C37.0949198,34.1025302 36.6651293,34.6194326 36.1046824,34.7159211 C36.004971,34.7607193 35.8743147,34.7917334 35.8674381,34.7951795 C34.1104544,35.4395845 32.8417128,37.2349589 32.8417128,39.3508129 C32.8417128,41.7113339 34.4164653,43.6721172 36.4932131,44.0821931 C36.4966514,44.0821931 36.5000897,44.0890851 36.5000897,44.0890851 C37.1911929,44.1373293 37.7413248,44.7507202 37.7413248,45.5088438 C37.7413248,46.2773054 37.1774396,46.9010343 36.4725831,46.9320485 C36.4691448,46.9354945 36.4622682,46.9423865 36.4588298,46.9423865 C32.281266,47.4007067 29.3208688,51.2395687 29.3208688,55.9123667 C29.3208688,56.6050159 28.8016819,57.1667165 28.1587153,57.1667165 C27.5329402,57.1667165 27.0275066,56.632584 27.0034383,55.9640569 C27.0034383,55.9571649 27,55.9537189 27,55.9468268 L27,55.9399348 L27,55.9123667 L27,55.9123667 Z M49.0919787,46.2372904 C51.2925061,44.645231 52.7434789,41.9401083 52.7434789,38.8662618 C52.7434789,33.9694728 49.0644721,29.9996622 44.5258841,29.9996622 C39.9872962,29.9996622 36.3082893,33.9694728 36.3082893,38.8662618 C36.3082893,41.9401083 37.7592621,44.645231 39.9597896,46.2372904 C35.4074484,48.1980736 32.1926153,52.9914822 32.1926153,58.6015965 C32.1926153,58.91863 32.2098069,59.2287715 32.2304368,59.5389129 L32.2338752,59.5389129 C32.2338752,60.2212241 32.7461855,60.7760327 33.3788371,60.7760327 C34.0114888,60.7760327 34.5237991,60.2246701 34.5237991,59.5389129 C34.5237991,59.5010067 34.5169224,59.4631006 34.5134841,59.4251944 C34.4928542,59.1529591 34.4722242,58.8807238 34.4722242,58.6015965 C34.4722242,52.6089744 38.9729906,47.7535376 44.5224458,47.7535376 C50.0753394,47.7535376 54.5761057,52.6089744 54.5761057,58.6015965 C54.5761057,58.8910619 54.5554758,59.1736352 54.5348458,59.4562085 C54.5348458,59.4699926 54.5314075,59.4837767 54.5314075,59.4975607 L54.5314075,59.5354669 L54.5348458,59.5354669 C54.5554758,60.200548 55.0574711,60.7346805 55.6763695,60.7346805 C56.2952678,60.7346805 56.7972632,60.200548 56.8178931,59.5354669 L56.8213314,59.5354669 C56.8419614,59.2253255 56.859153,58.915184 56.859153,58.6015965 C56.8557147,52.9914822 53.6374432,48.1980736 49.0919787,46.2372904 L49.0919787,46.2372904 Z M44.5224458,45.2379457 C41.2629145,45.2379457 38.6188432,42.3846443 38.6188432,38.8662618 C38.6188432,35.3478793 41.2629145,32.4945779 44.5224458,32.4945779 C47.7819771,32.4945779 50.4260484,35.3478793 50.4260484,38.8662618 C50.4260484,42.3846443 47.7819771,45.2379457 44.5224458,45.2379457 L44.5224458,45.2379457 Z"></path></g></g></g></svg></div><h3>社区活跃</h3><p><a class="github-button" href="https://github.com/apache/incubator-echarts" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star apache/incubator-echarts on GitHub">GitHub Stars</a></p></div></div><div id="feature-4" class="row feature-detail"><div class="col-sm-4 col"><h2>全新 4.0</h2><h3 style="color:#000;font-weight:bold;margin-bottom:20px;">八项新科技</h3><p>千万级数据可视化渲染能力</p><p>SVG + Canvas 双引擎动力更佳</p><p>数据样式分离及扁平配置让开发更便捷</p><p>首创无障碍访问支持</p><p>微信小程序、PPT,哪里都能用</p><div class="feature-btn"><a href="feature.html">了解更多<svg width="10px" height="13px" viewbox="0 0 10 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="more-icon"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="01-首页-设计稿" transform="translate(-1082.000000, -1417.000000)" fill="#3AADE3"><g id="Group-44" transform="translate(1006.000000, 1161.000000)"><g id="Group-16"><g id="Group-35" transform="translate(4.000000, 255.947089)"><polygon id="Shape" transform="translate(77.000000, 7.000000) scale(-1, 1) translate(-77.000000, -7.000000) " points="82 1.80411203 80.8773864 1 72 6.99980583 80.8773864 13 82 12.1957262 74.3133589 6.99980583"></polygon></g></g></g></g></g></svg></a></div></div><div class="col-sm-8 col"><video id="video-feature-4" loop="true" muted="true" data-src="https://echarts.cdn.apache.org/zh/video/feature-4.mp4" poster="https://echarts-www.cdn.bcebos.com/zh/video/feature-4.jpg?_v_=20200710_1" class="lazy feature-video"></video><a id="video-feature-4-play" href="javascript:;" onclick="playVideo(&quot;video-feature-4&quot;)" class="feature-play-btn video-play-btn video-btn"><svg width="19px" height="25px" viewBox="0 0 19 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-23.000000, -18.000000)" fill="#AA344C"><path d="M41.365908,29.4271388 L41.3664843,29.4265626 L26.3794329,19.1497136 L26.3747509,19.1541315 C26.0642269,18.8592621 25.6429678,18.677793 25.1786824,18.677793 C24.2236284,18.677793 23.4494433,19.4443188 23.4494433,20.3905371 C23.4494433,20.910214 23.4270417,21.9276946 23.4494433,21.9056292 L23.4494433,30.6673861 L23.4494433,39.8901629 C23.4494433,39.8977982 23.4494433,40.4825908 23.4494433,40.9444991 C23.4494433,41.8901412 24.2236284,42.656691 25.1786824,42.656691 C25.6447205,42.656691 26.0677564,42.4740454 26.3782564,42.1764869 L26.3794329,42.1770872 L41.3664843,31.9005503 L41.3659081,31.8996379 C41.6917266,31.5882735 41.894997,31.1514078 41.894997,30.6670739 C41.894997,30.6658974 41.894997,30.6650091 41.894997,30.6635444 C41.894997,30.6623679 41.894997,30.6609273 41.894997,30.6600389 C41.894997,30.175657 41.6917265,29.7384792 41.365908,29.4271388 Z"></path></g></g></svg></a><a id="video-feature-4-pause" href="javascript:;" onclick="pauseVideo(&quot;video-feature-4&quot;)" class="feature-play-btn video-pause-btn video-btn"><svg width="17px" height="22px" viewBox="0 0 17 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-22.000000, -19.000000)" fill="#AA344C"><g transform="translate(22.667242, 19.000000)"><path d="M2,0 C3.1045695,-2.02906125e-16 4,0.8954305 4,2 L4,20 C4,21.1045695 3.1045695,22 2,22 C0.8954305,22 1.3527075e-16,21.1045695 0,20 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z M14,0 C15.1045695,-2.02906125e-16 16,0.8954305 16,2 L16,20 C16,21.1045695 15.1045695,22 14,22 C12.8954305,22 12,21.1045695 12,20 L12,2 C12,0.8954305 12.8954305,2.02906125e-16 14,0 Z"></path></g></g></g></svg></a></div></div><div id="feature-dimension" class="row feature-detail"><div class="col-sm-4 col mobile"><h2>多维度数据分析</h2><h3>数据自由刷选</h3><p>自由选择数据,发掘数据背后的更多秘密</p><h3>多图表联动查看</h3><p>对多个图表数据联动查看,进行多维有效分析</p><div class="feature-btn"><a href="feature.html">了解更多<svg width="10px" height="13px" viewbox="0 0 10 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="more-icon"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="01-首页-设计稿" transform="translate(-1082.000000, -1417.000000)" fill="#3AADE3"><g id="Group-44" transform="translate(1006.000000, 1161.000000)"><g id="Group-16"><g id="Group-35" transform="translate(4.000000, 255.947089)"><polygon id="Shape" transform="translate(77.000000, 7.000000) scale(-1, 1) translate(-77.000000, -7.000000) " points="82 1.80411203 80.8773864 1 72 6.99980583 80.8773864 13 82 12.1957262 74.3133589 6.99980583"></polygon></g></g></g></g></g></svg></a></div></div><div class="col-sm-8 col"><div id="col-desktop"><img data-src="https://echarts-www.cdn.bcebos.com/zh/images/feature-1.png?_v_=20200710_1" class="lazy"><video id="video-feature-1" loop="true" muted="true" data-src="https://echarts.cdn.apache.org/zh/video/feature-1.mp4" poster="https://echarts-www.cdn.bcebos.com/zh/video/feature-2.jpg?_v_=20200710_1" class="lazy feature-video"></video><a id="video-feature-1-play" href="javascript:;" onclick="playVideo(&quot;video-feature-1&quot;)" class="feature-play-btn video-play-btn video-btn"><svg width="19px" height="25px" viewBox="0 0 19 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-23.000000, -18.000000)" fill="#AA344C"><path d="M41.365908,29.4271388 L41.3664843,29.4265626 L26.3794329,19.1497136 L26.3747509,19.1541315 C26.0642269,18.8592621 25.6429678,18.677793 25.1786824,18.677793 C24.2236284,18.677793 23.4494433,19.4443188 23.4494433,20.3905371 C23.4494433,20.910214 23.4270417,21.9276946 23.4494433,21.9056292 L23.4494433,30.6673861 L23.4494433,39.8901629 C23.4494433,39.8977982 23.4494433,40.4825908 23.4494433,40.9444991 C23.4494433,41.8901412 24.2236284,42.656691 25.1786824,42.656691 C25.6447205,42.656691 26.0677564,42.4740454 26.3782564,42.1764869 L26.3794329,42.1770872 L41.3664843,31.9005503 L41.3659081,31.8996379 C41.6917266,31.5882735 41.894997,31.1514078 41.894997,30.6670739 C41.894997,30.6658974 41.894997,30.6650091 41.894997,30.6635444 C41.894997,30.6623679 41.894997,30.6609273 41.894997,30.6600389 C41.894997,30.175657 41.6917265,29.7384792 41.365908,29.4271388 Z"></path></g></g></svg></a><a id="video-feature-1-pause" href="javascript:;" onclick="pauseVideo(&quot;video-feature-1&quot;)" class="feature-play-btn video-pause-btn video-btn"><svg width="17px" height="22px" viewBox="0 0 17 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-22.000000, -19.000000)" fill="#AA344C"><g transform="translate(22.667242, 19.000000)"><path d="M2,0 C3.1045695,-2.02906125e-16 4,0.8954305 4,2 L4,20 C4,21.1045695 3.1045695,22 2,22 C0.8954305,22 1.3527075e-16,21.1045695 0,20 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z M14,0 C15.1045695,-2.02906125e-16 16,0.8954305 16,2 L16,20 C16,21.1045695 15.1045695,22 14,22 C12.8954305,22 12,21.1045695 12,20 L12,2 C12,0.8954305 12.8954305,2.02906125e-16 14,0 Z"></path></g></g></g></svg></a></div></div><div id="col-analysis" class="col-sm-4 col pc"><h2>多维度数据分析</h2><h3>数据自由刷选</h3><p>自由选择数据,发掘数据背后的更多秘密</p><h3>多图表联动查看</h3><p>对多个图表数据联动查看,进行多维有效分析</p><div class="feature-btn"><a href="feature.html">了解更多<svg width="10px" height="13px" viewbox="0 0 10 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="more-icon"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="01-首页-设计稿" transform="translate(-1082.000000, -1417.000000)" fill="#3AADE3"><g id="Group-44" transform="translate(1006.000000, 1161.000000)"><g id="Group-16"><g id="Group-35" transform="translate(4.000000, 255.947089)"><polygon id="Shape" transform="translate(77.000000, 7.000000) scale(-1, 1) translate(-77.000000, -7.000000) " points="82 1.80411203 80.8773864 1 72 6.99980583 80.8773864 13 82 12.1957262 74.3133589 6.99980583"></polygon></g></g></g></g></g></svg></a></div></div></div><div class="row feature-detail"><div id="col-data" class="col-sm-4 col"><h2>多设备随意展示</h2><h3>电脑/手机/平板/大屏  …</h3><p>兼容多种设备,可随时随地任性展示</p><div class="feature-btn"><a href="feature.html">了解更多<svg width="10px" height="13px" viewbox="0 0 10 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="more-icon"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="01-首页-设计稿" transform="translate(-1082.000000, -1417.000000)" fill="#3AADE3"><g id="Group-44" transform="translate(1006.000000, 1161.000000)"><g id="Group-16"><g id="Group-35" transform="translate(4.000000, 255.947089)"><polygon id="Shape" transform="translate(77.000000, 7.000000) scale(-1, 1) translate(-77.000000, -7.000000) " points="82 1.80411203 80.8773864 1 72 6.99980583 80.8773864 13 82 12.1957262 74.3133589 6.99980583"></polygon></g></g></g></g></g></svg></a></div></div><div class="col-sm-8 col"><div id="col-desktop"><img data-src="https://echarts-www.cdn.bcebos.com/zh/images/index-feature.jpg?_v_=20200710_1" class="lazy"></div></div></div></div></section><section id="publication"><div class="container"><div class="col-sm-8 col"><h2>ECharts: A Declarative Framework for Rapid Construction of Web-based Visualization</h2><p class="note"><i class="note-icon"><img classs="lazy" data-src="https://echarts-www.cdn.bcebos.com/zh/images/note.svg?_v_=20200710_1" /></i> Please cite the following paper whenever you use ECharts in your R&D projects, products, research papers, technical reports, news reports, books, presentations, teaching, patents, and other related intelligence activities.</p><p class="link">Visual Informatics, 2018<a href="http://www.cad.zju.edu.cn/home/vagblog/VAG_Work/echarts.pdf">[PDF]</a></p></div><div class="col-sm-4 col"><div class="img-container"><img data-src="https://echarts-www.cdn.bcebos.com/zh/images/pipeline.jpg?_v_=20200710_1" alt="" class="lazy"></div></div></div></section><section id="about-section" class="normal"><div class="container"><h3>关注我们</h3><p>可以通过以下渠道关注 ECharts,及时获得更多最新动态</p><div class="btn-panel"><a id="btn-github" href="https://github.com/apache/incubator-echarts"><div class="btn-content"><img data-src="https://echarts-www.cdn.bcebos.com/zh/images/icon-github.png?_v_=20200710_1" class="lazy"><span>GitHub</span></div><div class="btn-shadow"></div></a><a id="btn-weibo" href="https://weibo.com/echarts"><div class="btn-content zh"><img data-src="https://echarts-www.cdn.bcebos.com/zh/images/icon-weibo.png?_v_=20200710_1" class="lazy"><span>微博</span></div><div class="btn-shadow"></div></a><a id="btn-twitter" href="https://twitter.com/echartsjs"><div class="btn-content"><img data-src="https://echarts-www.cdn.bcebos.com/zh/images/icon-twitter.png?_v_=20200710_1" class="lazy"><span>Twitter</span></div><div class="btn-shadow"></div></a></div></div></section></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1598523334942"></script><script>window.lazyLoadOptions = {
     elements_selector: ".lazy"
-};</script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js"></script><script src="https://echarts-www.cdn.bcebos.com/zh/js/index.js?_v_=1597861067124"></script><script async defer src="https://buttons.github.io/buttons.js"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+};</script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js"></script><script src="https://echarts-www.cdn.bcebos.com/zh/js/index.js?_v_=1598523334942"></script><script async defer src="https://buttons.github.io/buttons.js"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
 
diff --git a/zh/maillist.html b/zh/maillist.html
index 011b2bb..f06580b 100644
--- a/zh/maillist.html
+++ b/zh/maillist.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -7,7 +7,7 @@
     document.head.insertBefore(el, document.getElementById('font-hack'));
 }
 </script><title>邮件列表 - Apache ECharts (incubating)</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts-www.cdn.bcebos.com/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="ECharts FAQ"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><div class="container"><h1>邮件列表</h1><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div></div><div id="maillist" class="page-content"><div class="page-nav"></div><div class="container"><h2>关于邮件列表</h2><p>邮件列表是我们公开讨论并记录的地方。如果你想做以下事情,欢迎订阅邮件列表:</p><ul><li>随时了解 bug 以及新需求的报告;</li><li>参与讨论开发计划或特定的问题;</li><li>帮助通过邮件提问的人;</li><li>等等……</li></ul><p>如果你有一个特定的问题想要问,建议使用 <a href="https://ecomfe.github.io/echarts-issue-helper/?lang=zh-cn">Issue Helper</a> 报 Bug 或提需求,这是一种更有效率的方式。</p><p><a href="mailto:commits@echarts.incubator.apache.org">commits@echarts.incubator.apache.org</a> 主要是代码提交记录,而 <a href="mailto:dev@echarts.incubator.apache.org">dev@echarts.incubator.apache.org</a> 则是其他通用问题的讨论。</p><p>这两个邮件列表是公开的,这意味着你可以在 <a href="https://lists.apache.org/list.html?commits@echarts.apache.org">https://lists.apache.org/list.html?commits@echarts.apache.org</a> 和 <a href="https://lists.apache.org/list.html?dev@echarts.apache.org">https://lists.apache.org/list.html?dev@echarts.apache.org</a> 访问到邮件内容,而无需订阅。</p><h2>如何订阅</h2><p>给 <a href="mailto:commits-subscribe@echarts.incubator.apache.org">commits-subscribe@echarts.incubator.apache.org</a> 或 <a href="mailto:dev-subscribe@echarts.incubator.apache.org">dev-subscribe@echarts.incubator.apache.org</a> 发邮件来分别订阅 commits@echarts.incubator.apache.org and dev@echarts.incubator.apache.org。</p><p>你会收到一封回信,请照着邮件内容操作。</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1597861067124"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="ECharts FAQ"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><div class="container"><h1>邮件列表</h1><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div></div><div id="maillist" class="page-content"><div class="page-nav"></div><div class="container"><h2>关于邮件列表</h2><p>邮件列表是我们公开讨论并记录的地方。如果你想做以下事情,欢迎订阅邮件列表:</p><ul><li>随时了解 bug 以及新需求的报告;</li><li>参与讨论开发计划或特定的问题;</li><li>帮助通过邮件提问的人;</li><li>等等……</li></ul><p>如果你有一个特定的问题想要问,建议使用 <a href="https://ecomfe.github.io/echarts-issue-helper/?lang=zh-cn">Issue Helper</a> 报 Bug 或提需求,这是一种更有效率的方式。</p><p><a href="mailto:commits@echarts.incubator.apache.org">commits@echarts.incubator.apache.org</a> 主要是代码提交记录,而 <a href="mailto:dev@echarts.incubator.apache.org">dev@echarts.incubator.apache.org</a> 则是其他通用问题的讨论。</p><p>这两个邮件列表是公开的,这意味着你可以在 <a href="https://lists.apache.org/list.html?commits@echarts.apache.org">https://lists.apache.org/list.html?commits@echarts.apache.org</a> 和 <a href="https://lists.apache.org/list.html?dev@echarts.apache.org">https://lists.apache.org/list.html?dev@echarts.apache.org</a> 访问到邮件内容,而无需订阅。</p><h2>如何订阅</h2><p>给 <a href="mailto:commits-subscribe@echarts.incubator.apache.org">commits-subscribe@echarts.incubator.apache.org</a> 或 <a href="mailto:dev-subscribe@echarts.incubator.apache.org">dev-subscribe@echarts.incubator.apache.org</a> 发邮件来分别订阅 commits@echarts.incubator.apache.org and dev@echarts.incubator.apache.org。</p><p>你会收到一封回信,请照着邮件内容操作。</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1598523334942"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
 
diff --git a/zh/option-gl.html b/zh/option-gl.html
index baf114f..ae8c827 100644
--- a/zh/option-gl.html
+++ b/zh/option-gl.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -9,8 +9,8 @@
 </script><title>Documentation - Apache ECharts(incubating)</title><style>html, body {
     /* position: sticky should not have overflow parents.*/
     overflow-x: hidden;
-}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts-www.cdn.bcebos.com/zh/css/doc-bundle.css?_v_=1597861067124"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts-www.cdn.bcebos.com/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-doc-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1597861067124"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts-www.cdn.bcebos.com/zh/js/doc-bundle.js?_v_=1597861067124"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts-www.cdn.bcebos.com';
+}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts-www.cdn.bcebos.com/zh/css/doc-bundle.css?_v_=1598523334942"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts-www.cdn.bcebos.com/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-doc-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1598523334942"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts-www.cdn.bcebos.com/zh/js/doc-bundle.js?_v_=1598523334942"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts-www.cdn.bcebos.com';
 </script><script type="text/javascript">window.globalArgsExtra = {
     baseUrl: 'documents/option-gl-parts',
     docType: 'option-gl',
@@ -19,7 +19,7 @@
 if (window.EC_WWW_CDN_PAY_ROOT) {
     window.globalArgsExtra.cdnRoot = window.EC_WWW_CDN_PAY_ROOT + '/zh/' + window.globalArgsExtra.baseUrl
 }</script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
-window.globalArgsExtra.version = '1597861067124';
+window.globalArgsExtra.version = '1598523334942';
 echartsDoc.init('#ec-doc-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
diff --git a/zh/option.html b/zh/option.html
index a5c9395..2cd7b37 100644
--- a/zh/option.html
+++ b/zh/option.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -9,8 +9,8 @@
 </script><title>Documentation - Apache ECharts(incubating)</title><style>html, body {
     /* position: sticky should not have overflow parents.*/
     overflow-x: hidden;
-}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts-www.cdn.bcebos.com/zh/css/doc-bundle.css?_v_=1597861067124"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts-www.cdn.bcebos.com/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-doc-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1597861067124"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts-www.cdn.bcebos.com/zh/js/doc-bundle.js?_v_=1597861067124"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts-www.cdn.bcebos.com';
+}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts-www.cdn.bcebos.com/zh/css/doc-bundle.css?_v_=1598523334942"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts-www.cdn.bcebos.com/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-doc-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1598523334942"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts-www.cdn.bcebos.com/zh/js/doc-bundle.js?_v_=1598523334942"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts-www.cdn.bcebos.com';
 </script><script type="text/javascript">window.globalArgsExtra = {
     baseUrl: 'documents/option-parts',
     docType: 'option',
@@ -19,7 +19,7 @@
 if (window.EC_WWW_CDN_PAY_ROOT) {
     window.globalArgsExtra.cdnRoot = window.EC_WWW_CDN_PAY_ROOT + '/zh/' + window.globalArgsExtra.baseUrl
 }</script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
-window.globalArgsExtra.version = '1597861067124';
+window.globalArgsExtra.version = '1598523334942';
 echartsDoc.init('#ec-doc-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
diff --git a/zh/option3.html b/zh/option3.html
index 01057ee..cb2aa48 100644
--- a/zh/option3.html
+++ b/zh/option3.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -6,8 +6,8 @@
         + '@font-face {font-family:"noto-light";src:local("Microsoft Yahei");}';
     document.head.insertBefore(el, document.getElementById('font-hack'));
 }
-</script><title>ECharts Documentation</title><link rel="stylesheet" type="text/css" href="css/ecOption.css?_v_=1597861067124"><link rel="stylesheet" type="text/css" href="vendors/prettify/prettify.css"><link rel="stylesheet" type="text/css" href="vendors/perfect-scrollbar/0.6.8/css/perfect-scrollbar.min.css"><link rel="stylesheet" type="text/css" href="vendors/jquery-autocomplete/jquery.auto-complete.css"><link rel="stylesheet" type="text/css" href="vendors/twentytwenty/twentytwenty.css"><script src="vendors/prettify/prettify.js"></script><script src="vendors/prettify/lang-css.js"></script><script src="vendors/esl.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts-www.cdn.bcebos.com/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="doc-version-change"><a href="option.html">前往 v4.x 文档</a><a href="https://www.echartsjs.com/echarts2/">前往 v2.x 文档</a></div><div class="ecdoc-apidoc"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1597861067124"></script><script src="vendors/twentytwenty/jquery.event.move.js"></script><script src="vendors/twentytwenty/jquery.twentytwenty.js"></script><script type="text/javascript">window.globalArgsExtra = {
+</script><title>ECharts Documentation</title><link rel="stylesheet" type="text/css" href="css/ecOption.css?_v_=1598523334942"><link rel="stylesheet" type="text/css" href="vendors/prettify/prettify.css"><link rel="stylesheet" type="text/css" href="vendors/perfect-scrollbar/0.6.8/css/perfect-scrollbar.min.css"><link rel="stylesheet" type="text/css" href="vendors/jquery-autocomplete/jquery.auto-complete.css"><link rel="stylesheet" type="text/css" href="vendors/twentytwenty/twentytwenty.css"><script src="vendors/prettify/prettify.js"></script><script src="vendors/prettify/lang-css.js"></script><script src="vendors/esl.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts-www.cdn.bcebos.com/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="doc-version-change"><a href="option.html">前往 v4.x 文档</a><a href="https://www.echartsjs.com/echarts2/">前往 v2.x 文档</a></div><div class="ecdoc-apidoc"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1598523334942"></script><script src="vendors/twentytwenty/jquery.event.move.js"></script><script src="vendors/twentytwenty/jquery.twentytwenty.js"></script><script type="text/javascript">window.globalArgsExtra = {
     pageName: 'option',
     schemaName: 'option3',
     initHash: 'title',
@@ -17,7 +17,7 @@
 var vendorPath = '../vendors';
 
 define('globalArgs', extend({
-    version: '1597861067124',
+    version: '1598523334942',
     basePath: './',
     // Schema url is added by each doc page
     schemaUrl: '',
@@ -44,7 +44,7 @@
         hasher: vendorPath + '/hasher/1.2.0/hasher.min',
         perfectScrollbar: vendorPath + '/perfect-scrollbar/0.6.8/js/perfect-scrollbar'
     },
-    urlArgs: '_v_=1597861067124'
+    urlArgs: '_v_=1598523334942'
 });
 
 require(['docTool/main'], function (main) {
diff --git a/zh/resources.html b/zh/resources.html
index 02916bc..99e6a5e 100644
--- a/zh/resources.html
+++ b/zh/resources.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -7,7 +7,7 @@
     document.head.insertBefore(el, document.getElementById('font-hack'));
 }
 </script><title>更多资源 - Apache ECharts (incubating)</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts-www.cdn.bcebos.com/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="更多资源"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><div class="container"><h1>更多资源</h1><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div></div><div class="page-content"><div class="page-nav"></div><div class="container"><p>除了本站官方提供的资源外,社区也提供了非常丰富的资源,比如各种语言的支持,比如在线创建 ECharts 图表的平台 <a target="_blank" href="https://gallery.echartsjs.com">Gallery</a> 等等。</p><p><a target="_blank" href="https://github.com/ecomfe/awesome-echarts">github.com/ecomfe/awesome-echarts</a> 项目提供了完整的资源列表,欢迎了解及补充。</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1597861067124"></script><script type="text/javascript">document.getElementById('nav-resources').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="更多资源"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><div class="container"><h1>更多资源</h1><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div></div><div class="page-content"><div class="page-nav"></div><div class="container"><p>除了本站官方提供的资源外,社区也提供了非常丰富的资源,比如各种语言的支持,比如在线创建 ECharts 图表的平台 <a target="_blank" href="https://gallery.echartsjs.com">Gallery</a> 等等。</p><p><a target="_blank" href="https://github.com/ecomfe/awesome-echarts">github.com/ecomfe/awesome-echarts</a> 项目提供了完整的资源列表,欢迎了解及补充。</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1598523334942"></script><script type="text/javascript">document.getElementById('nav-resources').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
 
diff --git a/zh/security.html b/zh/security.html
index 4993300..4349526 100644
--- a/zh/security.html
+++ b/zh/security.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -7,7 +7,7 @@
     document.head.insertBefore(el, document.getElementById('font-hack'));
 }
 </script><title>安全 - Apache ECharts (incubating)</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts-www.cdn.bcebos.com/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="安全"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><div class="container"><h1>安全</h1><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div></div><div id="maillist" class="page-content"><div class="page-nav"></div><div class="container"><p>Apache ECharts (incubating)<sup>TM</sup> 在消除其软件项目中的安全问题方面采取了严格的立场。也十分关注与其特性和功能相关的安全问题。</p><p>如果您对 ECharts 的安全性感到担忧,或者您发现了漏洞或潜在的威胁,请不要犹豫与 <a href="http://www.apache.org/security/" target="_blank">Apache 安全团队</a>联系,发送邮件至 <a href="mailto:security@apache.org">security@apache.org</a>。在邮件中请指明项目名称 ECharts 并提供相关问题或潜在威胁的描述。同时推荐重现和复制安全问题的方法。在评估和分析调查结果后,Apache 安全团队和 ECharts 社区将直接与您回复。</p><p>请注意在提交安全邮件之前,请勿在公共领域披露安全电子邮件报告的安全问题。</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1597861067124"></script><script type="text/javascript">document.getElementById('nav-others').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="安全"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><div class="container"><h1>安全</h1><p class="page-info-echarts">Apache ECharts (incubating)<sup>TM</sup></p></div></div><div id="maillist" class="page-content"><div class="page-nav"></div><div class="container"><p>Apache ECharts (incubating)<sup>TM</sup> 在消除其软件项目中的安全问题方面采取了严格的立场。也十分关注与其特性和功能相关的安全问题。</p><p>如果您对 ECharts 的安全性感到担忧,或者您发现了漏洞或潜在的威胁,请不要犹豫与 <a href="http://www.apache.org/security/" target="_blank">Apache 安全团队</a>联系,发送邮件至 <a href="mailto:security@apache.org">security@apache.org</a>。在邮件中请指明项目名称 ECharts 并提供相关问题或潜在威胁的描述。同时推荐重现和复制安全问题的方法。在评估和分析调查结果后,Apache 安全团队和 ECharts 社区将直接与您回复。</p><p>请注意在提交安全邮件之前,请勿在公共领域披露安全电子邮件报告的安全问题。</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2020, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts-www.cdn.bcebos.com/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/incubator-echarts/issues%20.%29" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/incubator-echarts" class="footer-icon"><img src="https://echarts-www.cdn.bcebos.com/zh/images/icon-github.png?_v_=20200710_1"></a></div></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1598523334942"></script><script type="text/javascript">document.getElementById('nav-others').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
 
diff --git a/zh/spreadsheet.html b/zh/spreadsheet.html
index 338854f..9e7de5c 100644
--- a/zh/spreadsheet.html
+++ b/zh/spreadsheet.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -6,13 +6,13 @@
         + '@font-face {font-family:"noto-light";src:local("Microsoft Yahei");}';
     document.head.insertBefore(el, document.getElementById('font-hack'));
 }
-</script><title>Spreadsheet Tool - Apache ECharts (incubating)</title><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/vendors/handsontable/0.26.1/dist/handsontable.full.min.css?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/spreadsheet.css?_v_=1597861067124"><script src="vendors/esl.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts-www.cdn.bcebos.com/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="ecdoc-sprsht"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1597861067124"></script><script type="text/javascript">document.getElementById('nav-resources').className = 'active';
+</script><title>Spreadsheet Tool - Apache ECharts (incubating)</title><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/vendors/handsontable/0.26.1/dist/handsontable.full.min.css?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/spreadsheet.css?_v_=1598523334942"><script src="vendors/esl.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts-www.cdn.bcebos.com/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="ecdoc-sprsht"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1598523334942"></script><script type="text/javascript">document.getElementById('nav-resources').className = 'active';
 
 var vendorPath = '../vendors';
 
 define('globalArgs', extend({
-    version: '1597861067124',
+    version: '1598523334942',
     basePath: './'
 }, window.globalArgsExtra || {}));
 
@@ -31,7 +31,7 @@
         numeral: vendorPath + '/numeral/1.4.7/numeral.min',
         immutable: vendorPath + '/immutable/3.7.4/dist/immutable'
     },
-    urlArgs: '_v_=1597861067124'
+    urlArgs: '_v_=1598523334942'
 });
 
 require(['spreadsheet/spreadsheet'], function (spreadsheet) {
diff --git a/zh/theme-builder.html b/zh/theme-builder.html
index ec04c2e..a52e787 100644
--- a/zh/theme-builder.html
+++ b/zh/theme-builder.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -188,7 +188,7 @@
               <div class="panel-body">
                 <form class="form-horizontal">
                   <config-color :color.sync="theme.toolboxColor" title="图标"></config-color>
-                  <config-color :color.sync="theme.toolboxEmpasisColor" title="悬停"></config-color>
+                  <config-color :color.sync="theme.toolboxEmphasisColor" title="悬停"></config-color>
                 </form>
               </div>
             </div>
@@ -328,16 +328,16 @@
                           <label for="symbolDiamondE">空心菱形</label>
                         </div>
                         <div class="col-sm-6">
-                          <input type="radio" name="symbol" id="symbolCircle" value="pin" @change="updateSymbol('pin')" />
+                          <input type="radio" name="symbol" id="symbolPin" value="pin" @change="updateSymbol('pin')" />
                           <label for="symbolPin">水滴</label>
                         </div>
                         <div class="col-sm-6">
-                          <input type="radio" name="symbol" id="symbolCircleE" value="pin" @change="updateSymbol('emptyPin')" />
+                          <input type="radio" name="symbol" id="symbolPinE" value="pin" @change="updateSymbol('emptyPin')" />
                           <label for="symbolPinE">空心水滴</label>
                         </div>
                         <div class="col-sm-6">
                           <input type="radio" name="symbol" id="symbolArrow" value="arrow" @change="updateSymbol('arrow')" />
-                          <label for="symbolArrowE">箭头</label>
+                          <label for="symbolArrow">箭头</label>
                         </div>
                         <div class="col-sm-6">
                           <input type="radio" name="symbol" id="symbolArrowE" value="arrow" @change="updateSymbol('emptyArrow')" />
@@ -525,7 +525,8 @@
 <script src="//cdn.jsdelivr.net/npm/highlightjs@9.16.2/highlight.pack.min.js"></script>
 <script src="//cdn.jsdelivr.net/npm/file-saver@2.0.2/dist/FileSaver.min.js"></script>
 
-<script src="./theme-builder/app.min.js"></script></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1597861067124"></script><script type="text/javascript">document.getElementById('nav-resources').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<script src="./theme-builder/app.min.js"></script>
+</div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1598523334942"></script><script type="text/javascript">document.getElementById('nav-resources').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
 
diff --git a/zh/theme-builder/app.min.js b/zh/theme-builder/app.min.js
index 553d054..de85c46 100644
--- a/zh/theme-builder/app.min.js
+++ b/zh/theme-builder/app.min.js
@@ -1 +1 @@
-var VueColor=Vue.extend({template:'<div class="input-group colorpicker-component"><input type="text" class="form-control" debounce="2000" /><span class="input-group-addon"><i></i></span></div>',compiled:function(){var a=this,t=$(this.$el);t.find("input").val(this.color),t.colorpicker().on("changeColor",function(){var e=t.find("input").val();echarts.color.parse(e)&&a.$set("color",e)}),a.$watch("color",function(e){t.colorpicker("setValue",e)})},props:{color:{twoWay:!0}}});Vue.component("color",VueColor);var VueColorList=Vue.extend({template:'<div><div v-for="color in colors" track-by="$index"><color :color.sync="color"></color></div><div class="theme-color-control"><a v-on:click="addColor()">增加</a><a v-on:click="removeColor()" v-show="colors.length > 1">减少</a></div></div>',props:{colors:{twoWay:!0}},methods:{addColor:function(){this.colors.push("#333333")},removeColor:function(){this.colors.pop()}}});Vue.component("color-list",VueColorList);var VueNumberConfig=Vue.extend({template:'<div class="form-group">  <div class="col-sm-3">    <input type="checkbox" v-model="enabled" v-if="canDisable" />    <label class="control-label">{{title}}</label>  </div>  <div class="col-sm-9">    <div class="input-group" v-show="enabled">      <input type="number" v-model="value" class="form-control" />    </div>  </div></div>',props:{title:String,canDisable:{type:Boolean,default:!1},value:{twoWay:!0},enabled:{twoWay:!0,default:!0}}});Vue.component("config-number",VueNumberConfig);var VueColorConfig=Vue.extend({template:'<div class="form-group">  <div class="col-sm-3">    <input type="checkbox" v-model="enabled" v-if="canDisable" />    <label class="control-label">{{title}}</label>  </div>  <div class="col-sm-9">    <color :color.sync="color" v-show="enabled"></color>  </div></div>',props:{title:String,canDisable:{type:Boolean,default:!1},color:{twoWay:!0},enabled:{twoWay:!0,default:!0}}});Vue.component("config-color",VueColorConfig);var VueColorListConfig=Vue.extend({template:'<div class="form-group">  <div class="col-sm-3">    <input type="checkbox" v-model="enabled" v-if="canDisable" />    <label class="control-label">{{title}}</label>  </div>  <div class="col-sm-9">    <color-list :colors.sync="colors" v-show="enabled"></color-list>  </div></div>',props:{title:String,canDisable:{type:Boolean,default:!1},colors:{twoWay:!0},enabled:{twoWay:!0,default:!0}}});function getOptions(e){function l(e){var a,t=[];a="scatter"===e?32:i;for(var l=0;l<d;++l){for(var r,o=[],n=0;n<a;++n){r="scatter"===e?[Math.floor((600*Math.random()+400)*(d-l)/d),Math.floor((600*Math.random()+400)*(d-l)/d)]:Math.floor((600*Math.random()+400)*(d-l)/d),o.push(r)}"radar"===e&&(o=[o]),t.push({type:e,data:o,name:"第"+(l+1)+"组",markPoint:"line"===e||"bar"===e||"scatter"===e?{data:[{name:"最高",type:"max"}]}:{}})}return t}function a(e){for(var a=l(e),t=0;t<a.length;++t)a[t].areaStyle={normal:{}},a[t].stack="total";return a}var d=e?e.theme.seriesCnt:4,t=["周一","周二","周三","周四","周五","周六","周日"],i=t.length,r={data:function(){for(var e=[],a=0;a<d;++a)e.push("第"+(a+1)+"组");return e}(),right:0},o={feature:{restore:{show:!0},saveAsImage:{show:!0},dataView:{show:!0},dataZoom:{show:!0}}},n={trigger:"axis"},s={left:60,right:20,top:40,bottom:50},m={};function u(e){for(var a=["北京","天津","河北","山西","内蒙古","辽宁","吉林","黑龙江","上海","江苏"],t=2002;t<=2007;t++){for(var l,r=0,o=0,n=0,i=(l=e[t]).length;n<i;n++)r=Math.max(r,l[n]),o+=l[n],e[t][n]={name:a[n],value:l[n]};e[t+"max"]=100*Math.floor(r/100),e[t+"sum"]=o}return e}m.dataPI=u({2007:[101.26,110.19,1804.72,311.97,762.1,1133.42,783.8,915.38,101.84,1816.31],2006:[88.8,103.35,1461.81,276.77,634.94,939.43,672.76,750.14,93.81,1545.05,925.1],2005:[88.68,112.38,1400,262.42,589.56,882.41,625.61,684.6,90.26,1461.51,892.83],2004:[87.36,105.28,1370.43,276.3,522.8,798.43,568.69,605.79,83.45,1367.58,814.1],2003:[84.11,89.91,1064.05,215.19,420.1,615.8,488.23,504.8,81.02,1162.45,717.85],2002:[82.44,84.21,956.84,197.8,374.69,590.2,446.17,474.2,79.68,1110.44]}),m.dataSI=u({2007:[2509.4,2892.53,7201.88,3454.49,3193.67,5544.14,2475.45,3695.58,5571.06,14471.26],2006:[2191.43,2457.08,6110.43,2755.66,2374.96,4566.83,1915.29,3365.31,4969.95,12282.89],2005:[2026.51,2135.07,5271.57,2357.04,1773.21,3869.4,1580.83,2971.68,4381.2,10524.96],2004:[1853.58,1685.93,4301.73,1919.4,1248.27,3061.62,1329.68,2487.04,3892.12,8437.99],2003:[1487.15,1337.31,3417.56,1463.38,967.49,2898.89,1098.37,2084.7,3209.02,6787.11],2002:[1249.99,1069.08,2911.69,1134.31,754.78,2609.85,943.49,1843.6,2622.45,5604.49]}),m.dataTI=u({2007:[7236.15,2250.04,4600.72,2257.99,2467.41,4486.74,2025.44,2493.04,6821.11,9730.91],2006:[5837.55,1902.31,3895.36,1846.18,1934.35,3798.26,1687.07,2096.35,5508.48,7914.11],2005:[4854.33,1658.19,3340.54,1611.07,1542.26,3295.45,1413.83,1857.42,4776.2,6612.22],2004:[4092.27,1319.76,2805.47,1375.67,1270,2811.95,1223.64,1657.77,4097.26,5198.03],2003:[3435.95,1150.81,2439.68,1176.65,1000.79,2487.85,1075.48,1467.9,3404.19,4493.31],2002:[2982.57,997.47,2149.75,992.69,811.47,2258.17,958.88,1319.4,3038.9,3891.92]});for(var c,g=[{title:{text:"折线图",subtext:"副标题样式"},series:l("line"),xAxis:{type:"category",data:t},yAxis:{type:"value"},grid:{left:60,right:20,top:60,bottom:50}},{title:{text:"折线堆积面积图",subtext:"副标题样式"},series:a("line"),xAxis:{type:"category",data:t,boundaryGap:!1},yAxis:{type:"value"},grid:{left:60,right:20,top:60,bottom:50}},{title:{text:"柱状图"},series:l("bar"),xAxis:{type:"category",data:t},yAxis:{type:"value"}},{title:{text:"柱状堆积图"},series:a("bar"),xAxis:{type:"category",data:t},yAxis:{type:"value"}},{title:{text:"散点图"},series:l("scatter"),toolbox:((c=o).left=65,c),tooltip:{trigger:"item"},xAxis:{type:"value"},yAxis:{type:"value"}},{title:{text:"饼图"},series:function(e){for(var a=[],t=0;t<d;++t)a.push({name:r.data[t],value:Math.floor((800*Math.random()+200)*(d-t)/d)});return{type:e,data:a}}("pie"),tooltip:{trigger:"item"}},{title:{text:"雷达图"},series:l("radar"),radar:{indicator:function(){for(var e=[],a=0;a<t.length;++a)e.push({name:t[a],max:1e3});return e}(),center:["50%","60%"]}},{baseOption:{timeline:{axisType:"category",autoPlay:!1,data:["2002-01-01","2003-01-01","2004-01-01",{value:"2005-01-01",tooltip:{formatter:"{b} GDP达到一个高度"}},"2006-01-01","2007-01-01","2008-01-01","2009-01-01","2010-01-01",{value:"2011-01-01",tooltip:{formatter:function(e){return e.name+"GDP达到又一个高度"}}}],label:{formatter:function(e){return new Date(e).getFullYear()}}},tooltip:{},legend:{x:"right",data:["第一产业","第二产业","第三产业"]},calculable:!0,grid:{top:60,bottom:75},xAxis:[{type:"category",axisLabel:{interval:0},data:["北京","天津","河北","山西","内蒙古","辽宁","吉林","黑龙江","上海","江苏"],splitLine:{show:!1}}],yAxis:[{type:"value",name:"GDP(亿元)"}],series:[{name:"第一产业",type:"bar"},{name:"第二产业",type:"bar"},{name:"第三产业",type:"bar"},{name:"GDP占比",type:"pie",center:["30%","35%"],radius:"28%"}]},options:[{title:{text:"时间轴"},series:[{data:m.dataPI[2002]},{data:m.dataSI[2002]},{data:m.dataTI[2002]},{data:[{name:"第一产业",value:m.dataPI["2002sum"]},{name:"第二产业",value:m.dataSI["2002sum"]},{name:"第三产业",value:m.dataTI["2002sum"]}]}]},{title:{text:"时间轴"},series:[{data:m.dataPI[2003]},{data:m.dataSI[2003]},{data:m.dataTI[2003]},{data:[{name:"第一产业",value:m.dataPI["2003sum"]},{name:"第二产业",value:m.dataSI["2003sum"]},{name:"第三产业",value:m.dataTI["2003sum"]}]}]},{title:{text:"时间轴"},series:[{data:m.dataPI[2004]},{data:m.dataSI[2004]},{data:m.dataTI[2004]},{data:[{name:"第一产业",value:m.dataPI["2004sum"]},{name:"第二产业",value:m.dataSI["2004sum"]},{name:"第三产业",value:m.dataTI["2004sum"]}]}]},{title:{text:"时间轴"},series:[{data:m.dataPI[2005]},{data:m.dataSI[2005]},{data:m.dataTI[2005]},{data:[{name:"第一产业",value:m.dataPI["2005sum"]},{name:"第二产业",value:m.dataSI["2005sum"]},{name:"第三产业",value:m.dataTI["2005sum"]}]}]},{title:{text:"时间轴"},series:[{data:m.dataPI[2006]},{data:m.dataSI[2006]},{data:m.dataTI[2006]},{data:[{name:"第一产业",value:m.dataPI["2006sum"]},{name:"第二产业",value:m.dataSI["2006sum"]},{name:"第三产业",value:m.dataTI["2006sum"]}]}]},{title:{text:"时间轴"},series:[{data:m.dataPI[2007]},{data:m.dataSI[2007]},{data:m.dataTI[2007]},{data:[{name:"第一产业",value:m.dataPI["2007sum"]},{name:"第二产业",value:m.dataSI["2007sum"]},{name:"第三产业",value:m.dataTI["2007sum"]}]}]}]},{title:{text:"K 线图与数据缩放"},grid:{left:60,right:20,top:40,bottom:70},toolbox:{show:!0,feature:{mark:{show:!0},dataZoom:{show:!0},magicType:{show:!0,type:["line","bar"]},dataView:{show:!0,readOnly:!1},restore:{show:!0}}},dataZoom:{show:!0,realtime:!0,start:50,end:100},xAxis:[{type:"category",boundaryGap:!0,axisTick:{onGap:!1},data:["2013/1/24","2013/1/25","2013/1/28","2013/1/29","2013/1/30","2013/1/31","2013/2/1","2013/2/4","2013/2/5","2013/2/6","2013/2/7","2013/2/8","2013/2/18","2013/2/19","2013/2/20","2013/2/21","2013/2/22","2013/2/25","2013/2/26","2013/2/27","2013/2/28","2013/3/1","2013/3/4","2013/3/5","2013/3/6","2013/3/7","2013/3/8","2013/3/11","2013/3/12","2013/3/13","2013/3/14","2013/3/15","2013/3/18","2013/3/19","2013/3/20","2013/3/21","2013/3/22","2013/3/25","2013/3/26","2013/3/27","2013/3/28","2013/3/29","2013/4/1","2013/4/2","2013/4/3","2013/4/8","2013/4/9","2013/4/10","2013/4/11","2013/4/12","2013/4/15","2013/4/16","2013/4/17","2013/4/18","2013/4/19","2013/4/22","2013/4/23","2013/4/24","2013/4/25","2013/4/26","2013/5/2","2013/5/3","2013/5/6","2013/5/7","2013/5/8","2013/5/9","2013/5/10","2013/5/13","2013/5/14","2013/5/15","2013/5/16","2013/5/17","2013/5/20","2013/5/21","2013/5/22","2013/5/23","2013/5/24","2013/5/27","2013/5/28","2013/5/29","2013/5/30","2013/5/31","2013/6/3","2013/6/4","2013/6/5","2013/6/6","2013/6/7","2013/6/13"]}],yAxis:[{type:"value",scale:!0,precision:2,splitNumber:7,boundaryGap:[.05,.05]}],series:[{name:"上证指数",type:"candlestick",data:[[2320.26,2302.6,2287.3,2362.94],[2300,2291.3,2288.26,2308.38],[2295.35,2346.5,2295.35,2346.92],[2347.22,2358.98,2337.35,2363.8],[2360.75,2382.48,2347.89,2383.76],[2383.43,2385.42,2371.23,2391.82],[2377.41,2419.02,2369.57,2421.15],[2425.92,2428.15,2417.58,2440.38],[2411,2433.13,2403.3,2437.42],[2432.68,2434.48,2427.7,2441.73],[2430.69,2418.53,2394.22,2433.89],[2416.62,2432.4,2414.4,2443.03],[2441.91,2421.56,2415.43,2444.8],[2420.26,2382.91,2373.53,2427.07],[2383.49,2397.18,2370.61,2397.94],[2378.82,2325.95,2309.17,2378.82],[2322.94,2314.16,2308.76,2330.88],[2320.62,2325.82,2315.01,2338.78],[2313.74,2293.34,2289.89,2340.71],[2297.77,2313.22,2292.03,2324.63],[2322.32,2365.59,2308.92,2366.16],[2364.54,2359.51,2330.86,2369.65],[2332.08,2273.4,2259.25,2333.54],[2274.81,2326.31,2270.1,2328.14],[2333.61,2347.18,2321.6,2351.44],[2340.44,2324.29,2304.27,2352.02],[2326.42,2318.61,2314.59,2333.67],[2314.68,2310.59,2296.58,2320.96],[2309.16,2286.6,2264.83,2333.29],[2282.17,2263.97,2253.25,2286.33],[2255.77,2270.28,2253.31,2276.22],[2269.31,2278.4,2250,2312.08],[2267.29,2240.02,2239.21,2276.05],[2244.26,2257.43,2232.02,2261.31],[2257.74,2317.37,2257.42,2317.86],[2318.21,2324.24,2311.6,2330.81],[2321.4,2328.28,2314.97,2332],[2334.74,2326.72,2319.91,2344.89],[2318.58,2297.67,2281.12,2319.99],[2299.38,2301.26,2289,2323.48],[2273.55,2236.3,2232.91,2273.55],[2238.49,2236.62,2228.81,2246.87],[2229.46,2234.4,2227.31,2243.95],[2234.9,2227.74,2220.44,2253.42],[2232.69,2225.29,2217.25,2241.34],[2196.24,2211.59,2180.67,2212.59],[2215.47,2225.77,2215.47,2234.73],[2224.93,2226.13,2212.56,2233.04],[2236.98,2219.55,2217.26,2242.48],[2218.09,2206.78,2204.44,2226.26],[2199.91,2181.94,2177.39,2204.99],[2169.63,2194.85,2165.78,2196.43],[2195.03,2193.8,2178.47,2197.51],[2181.82,2197.6,2175.44,2206.03],[2201.12,2244.64,2200.58,2250.11],[2236.4,2242.17,2232.26,2245.12],[2242.62,2184.54,2182.81,2242.62],[2187.35,2218.32,2184.11,2226.12],[2213.19,2199.31,2191.85,2224.63],[2203.89,2177.91,2173.86,2210.58],[2170.78,2174.12,2161.14,2179.65],[2179.05,2205.5,2179.05,2222.81],[2212.5,2231.17,2212.5,2236.07],[2227.86,2235.57,2219.44,2240.26],[2242.39,2246.3,2235.42,2255.21],[2246.96,2232.97,2221.38,2247.86],[2228.82,2246.83,2225.81,2247.67],[2247.68,2241.92,2231.36,2250.85],[2238.9,2217.01,2205.87,2239.93],[2217.09,2224.8,2213.58,2225.19],[2221.34,2251.81,2210.77,2252.87],[2249.81,2282.87,2248.41,2288.09],[2286.33,2299.99,2281.9,2309.39],[2297.11,2305.11,2290.12,2305.3],[2303.75,2302.4,2292.43,2314.18],[2293.81,2275.67,2274.1,2304.95],[2281.45,2288.53,2270.25,2292.59],[2286.66,2293.08,2283.94,2301.7],[2293.4,2321.32,2281.47,2322.1],[2323.54,2324.02,2321.17,2334.33],[2316.25,2317.75,2310.49,2325.72],[2320.74,2300.59,2299.37,2325.53],[2300.21,2299.25,2294.11,2313.43],[2297.1,2272.42,2264.76,2297.1],[2270.71,2270.93,2260.87,2276.86],[2264.43,2242.11,2240.07,2266.69],[2242.26,2210.9,2205.07,2250.63],[2190.1,2148.35,2126.22,2190.1]]}]},{title:{text:"图"},series:[{name:"Les Miserables",type:"graph",layout:"none",data:[{id:"0",name:"Myriel",label:{normal:{formatter:"Myriel",show:!1}},symbolSize:8.685715,x:-266.82776,y:299.6904,attributes:{modularity_class:0},value:28.685715,category:0},{id:"1",name:"Napoleon",label:{normal:{formatter:"Napoleon",show:!1}},symbolSize:4,x:-418.08344,y:446.8853,attributes:{modularity_class:0},value:4,category:0},{id:"2",name:"MlleBaptistine",label:{normal:{formatter:"MlleBaptistine",show:!1}},symbolSize:9.485714,x:-212.76357,y:245.29176,attributes:{modularity_class:1},value:9.485714,category:1},{id:"3",name:"MmeMagloire",label:{normal:{formatter:"MmeMagloire",show:!1}},symbolSize:9.485714,x:-242.82404,y:235.26283,attributes:{modularity_class:1},value:9.485714,category:1},{id:"4",name:"CountessDeLo",label:{normal:{formatter:"CountessDeLo",show:!1}},symbolSize:4,x:-379.30386,y:429.06424,attributes:{modularity_class:0},value:4,category:0},{id:"5",name:"Geborand",label:{normal:{formatter:"Geborand",show:!1}},symbolSize:4,x:-417.26337,y:406.03506,attributes:{modularity_class:0},value:4,category:0},{id:"6",name:"Champtercier",label:{normal:{formatter:"Champtercier",show:!1}},symbolSize:4,x:-332.6012,y:485.16974,attributes:{modularity_class:0},value:4,category:0},{id:"7",name:"Cravatte",label:{normal:{formatter:"Cravatte",show:!1}},symbolSize:4,x:-382.69568,y:475.09113,attributes:{modularity_class:0},value:4,category:0},{id:"8",name:"Count",label:{normal:{formatter:"Count",show:!1}},symbolSize:4,x:-320.384,y:387.17325,attributes:{modularity_class:0},value:4,category:0},{id:"9",name:"OldMan",label:{normal:{formatter:"OldMan",show:!1}},symbolSize:4,x:-344.39832,y:451.16772,attributes:{modularity_class:0},value:4,category:0},{id:"10",name:"Labarre",label:{normal:{formatter:"Labarre",show:!1}},symbolSize:4,x:-89.34107,y:234.56128,attributes:{modularity_class:1},value:4,category:1},{id:"11",name:"Valjean",label:{normal:{formatter:"Valjean",show:!1}},symbolSize:40,x:-87.93029,y:-6.8120565,attributes:{modularity_class:1},value:100,category:1},{id:"12",name:"Marguerite",label:{normal:{formatter:"Marguerite",show:!1}},symbolSize:6.742859,x:-339.77908,y:-184.69139,attributes:{modularity_class:1},value:6.742859,category:1},{id:"13",name:"MmeDeR",label:{normal:{formatter:"MmeDeR",show:!1}},symbolSize:4,x:-194.31313,y:178.55301,attributes:{modularity_class:1},value:4,category:1},{id:"14",name:"Isabeau",label:{normal:{formatter:"Isabeau",show:!1}},symbolSize:4,x:-158.05168,y:201.99768,attributes:{modularity_class:1},value:4,category:1},{id:"15",name:"Gervais",label:{normal:{formatter:"Gervais",show:!1}},symbolSize:4,x:-127.701546,y:242.55057,attributes:{modularity_class:1},value:4,category:1},{id:"16",name:"Tholomyes",label:{normal:{formatter:"Tholomyes",show:!1}},symbolSize:15.942856,x:-385.2226,y:-393.5572,attributes:{modularity_class:2},value:25.942856,category:2},{id:"17",name:"Listolier",label:{normal:{formatter:"Listolier",show:!1}},symbolSize:17.457146,x:-516.55884,y:-393.98975,attributes:{modularity_class:2},value:20.457146,category:2},{id:"18",name:"Fameuil",label:{normal:{formatter:"Fameuil",show:!1}},symbolSize:17.457146,x:-464.79382,y:-493.57944,attributes:{modularity_class:2},value:20.457146,category:2},{id:"19",name:"Blacheville",label:{normal:{formatter:"Blacheville",show:!1}},symbolSize:17.457146,x:-515.1624,y:-456.9891,attributes:{modularity_class:2},value:20.457146,category:2},{id:"20",name:"Favourite",label:{normal:{formatter:"Favourite",show:!1}},symbolSize:17.457146,x:-408.12122,y:-464.5048,attributes:{modularity_class:2},value:20.457146,category:2},{id:"21",name:"Dahlia",label:{normal:{formatter:"Dahlia",show:!1}},symbolSize:17.457146,x:-456.44113,y:-425.13303,attributes:{modularity_class:2},value:20.457146,category:2},{id:"22",name:"Zephine",label:{normal:{formatter:"Zephine",show:!1}},symbolSize:17.457146,x:-459.1107,y:-362.5133,attributes:{modularity_class:2},value:20.457146,category:2},{id:"23",name:"Fantine",label:{normal:{formatter:"Fantine",show:!1}},symbolSize:22.4,x:-313.42786,y:-289.44803,attributes:{modularity_class:2},value:42.4,category:2},{id:"24",name:"MmeThenardier",label:{normal:{formatter:"MmeThenardier",show:!1}},symbolSize:14.428574,x:4.6313396,y:-273.8517,attributes:{modularity_class:7},value:31.428574,category:7},{id:"25",name:"Thenardier",label:{normal:{formatter:"Thenardier",show:!1}},symbolSize:25.142853,x:82.80825,y:-203.1144,attributes:{modularity_class:7},value:45.142853,category:7},{id:"26",name:"Cosette",label:{normal:{formatter:"Cosette",show:!1}},symbolSize:21.428574,x:78.64646,y:-31.512747,attributes:{modularity_class:6},value:31.428574,category:6},{id:"27",name:"Javert",label:{normal:{formatter:"Javert",show:!1}},symbolSize:27.88571,x:-81.46074,y:-204.20204,attributes:{modularity_class:7},value:47.88571,category:7},{id:"28",name:"Fauchelevent",label:{normal:{formatter:"Fauchelevent",show:!1}},symbolSize:12.228573,x:-225.73984,y:82.41631,attributes:{modularity_class:4},value:12.228573,category:4},{id:"29",name:"Bamatabois",label:{normal:{formatter:"Bamatabois",show:!1}},symbolSize:23.2,x:-385.6842,y:-20.206686,attributes:{modularity_class:3},value:23.2,category:3},{id:"30",name:"Perpetue",label:{normal:{formatter:"Perpetue",show:!1}},symbolSize:6.742859,x:-403.92447,y:-197.69823,attributes:{modularity_class:2},value:6.742859,category:2},{id:"31",name:"Simplice",label:{normal:{formatter:"Simplice",show:!1}},symbolSize:12.228573,x:-281.4253,y:-158.45137,attributes:{modularity_class:2},value:12.228573,category:2},{id:"32",name:"Scaufflaire",label:{normal:{formatter:"Scaufflaire",show:!1}},symbolSize:4,x:-122.41348,y:210.37503,attributes:{modularity_class:1},value:4,category:1},{id:"33",name:"Woman1",label:{normal:{formatter:"Woman1",show:!1}},symbolSize:6.742859,x:-234.6001,y:-113.15067,attributes:{modularity_class:1},value:6.742859,category:1},{id:"34",name:"Judge",label:{normal:{formatter:"Judge",show:!1}},symbolSize:17.714287,x:-387.84915,y:58.7059,attributes:{modularity_class:3},value:17.714287,category:3},{id:"35",name:"Champmathieu",label:{normal:{formatter:"Champmathieu",show:!1}},symbolSize:17.714287,x:-338.2307,y:87.48405,attributes:{modularity_class:3},value:17.714287,category:3},{id:"36",name:"Brevet",label:{normal:{formatter:"Brevet",show:!1}},symbolSize:17.714287,x:-453.26874,y:58.94648,attributes:{modularity_class:3},value:17.714287,category:3},{id:"37",name:"Chenildieu",label:{normal:{formatter:"Chenildieu",show:!1}},symbolSize:17.714287,x:-386.44904,y:140.05937,attributes:{modularity_class:3},value:17.714287,category:3},{id:"38",name:"Cochepaille",label:{normal:{formatter:"Cochepaille",show:!1}},symbolSize:17.714287,x:-446.7876,y:123.38005,attributes:{modularity_class:3},value:17.714287,category:3},{id:"39",name:"Pontmercy",label:{normal:{formatter:"Pontmercy",show:!1}},symbolSize:9.485714,x:336.49738,y:-269.55914,attributes:{modularity_class:6},value:9.485714,category:6},{id:"40",name:"Boulatruelle",label:{normal:{formatter:"Boulatruelle",show:!1}},symbolSize:4,x:29.187843,y:-460.13132,attributes:{modularity_class:7},value:4,category:7},{id:"41",name:"Eponine",label:{normal:{formatter:"Eponine",show:!1}},symbolSize:31.428574,x:238.36697,y:-210.00926,attributes:{modularity_class:7},value:31.428574,category:7},{id:"42",name:"Anzelma",label:{normal:{formatter:"Anzelma",show:!1}},symbolSize:9.485714,x:189.69513,y:-346.50662,attributes:{modularity_class:7},value:9.485714,category:7},{id:"43",name:"Woman2",label:{normal:{formatter:"Woman2",show:!1}},symbolSize:9.485714,x:-187.00418,y:-145.02663,attributes:{modularity_class:6},value:9.485714,category:6},{id:"44",name:"MotherInnocent",label:{normal:{formatter:"MotherInnocent",show:!1}},symbolSize:6.742859,x:-252.99521,y:129.87549,attributes:{modularity_class:4},value:6.742859,category:4},{id:"45",name:"Gribier",label:{normal:{formatter:"Gribier",show:!1}},symbolSize:4,x:-296.07935,y:163.11964,attributes:{modularity_class:4},value:4,category:4},{id:"46",name:"Jondrette",label:{normal:{formatter:"Jondrette",show:!1}},symbolSize:4,x:550.3201,y:522.4031,attributes:{modularity_class:5},value:4,category:5},{id:"47",name:"MmeBurgon",label:{normal:{formatter:"MmeBurgon",show:!1}},symbolSize:6.742859,x:488.13535,y:356.8573,attributes:{modularity_class:5},value:6.742859,category:5},{id:"48",name:"Gavroche",label:{normal:{formatter:"Gavroche",show:!1}},symbolSize:31.600006,x:387.89572,y:110.462326,attributes:{modularity_class:8},value:61.600006,category:8},{id:"49",name:"Gillenormand",label:{normal:{formatter:"Gillenormand",show:!1}},symbolSize:20.457146,x:126.4831,y:68.10622,attributes:{modularity_class:6},value:20.457146,category:6},{id:"50",name:"Magnon",label:{normal:{formatter:"Magnon",show:!1}},symbolSize:6.742859,x:127.07365,y:-113.05923,attributes:{modularity_class:6},value:6.742859,category:6},{id:"51",name:"MlleGillenormand",label:{normal:{formatter:"MlleGillenormand",show:!1}},symbolSize:20.457146,x:162.63559,y:117.6565,attributes:{modularity_class:6},value:20.457146,category:6},{id:"52",name:"MmePontmercy",label:{normal:{formatter:"MmePontmercy",show:!1}},symbolSize:6.742859,x:353.66415,y:-205.89165,attributes:{modularity_class:6},value:6.742859,category:6},{id:"53",name:"MlleVaubois",label:{normal:{formatter:"MlleVaubois",show:!1}},symbolSize:4,x:165.43939,y:339.7736,attributes:{modularity_class:6},value:4,category:6},{id:"54",name:"LtGillenormand",label:{normal:{formatter:"LtGillenormand",show:!1}},symbolSize:12.228573,x:137.69348,y:196.1069,attributes:{modularity_class:6},value:12.228573,category:6},{id:"55",name:"Marius",label:{normal:{formatter:"Marius",show:!1}},symbolSize:33.37143,x:206.44687,y:-13.805411,attributes:{modularity_class:6},value:53.37143,category:6},{id:"56",name:"BaronessT",label:{normal:{formatter:"BaronessT",show:!1}},symbolSize:6.742859,x:194.82993,y:224.78036,attributes:{modularity_class:6},value:6.742859,category:6},{id:"57",name:"Mabeuf",label:{normal:{formatter:"Mabeuf",show:!1}},symbolSize:31.428574,x:597.6618,y:135.18481,attributes:{modularity_class:8},value:21.428574,category:8},{id:"58",name:"Enjolras",label:{normal:{formatter:"Enjolras",show:!1}},symbolSize:42.4,x:355.78366,y:-74.882454,attributes:{modularity_class:8},value:22.4,category:8},{id:"59",name:"Combeferre",label:{normal:{formatter:"Combeferre",show:!1}},symbolSize:21.428574,x:515.2961,y:-46.167564,attributes:{modularity_class:8},value:31.428574,category:8},{id:"60",name:"Prouvaire",label:{normal:{formatter:"Prouvaire",show:!1}},symbolSize:15.942856,x:614.29285,y:-69.3104,attributes:{modularity_class:8},value:25.942856,category:8},{id:"61",name:"Feuilly",label:{normal:{formatter:"Feuilly",show:!1}},symbolSize:21.428574,x:550.1917,y:-128.17537,attributes:{modularity_class:8},value:31.428574,category:8},{id:"62",name:"Courfeyrac",label:{normal:{formatter:"Courfeyrac",show:!1}},symbolSize:26.91429,x:436.17184,y:-12.7286825,attributes:{modularity_class:8},value:36.91429,category:8},{id:"63",name:"Bahorel",label:{normal:{formatter:"Bahorel",show:!1}},symbolSize:24.17143,x:602.55225,y:16.421427,attributes:{modularity_class:8},value:34.17143,category:8},{id:"64",name:"Bossuet",label:{normal:{formatter:"Bossuet",show:!1}},symbolSize:26.91429,x:455.81955,y:-115.45826,attributes:{modularity_class:8},value:36.91429,category:8},{id:"65",name:"Joly",label:{normal:{formatter:"Joly",show:!1}},symbolSize:24.17143,x:516.40784,y:47.242233,attributes:{modularity_class:8},value:34.17143,category:8},{id:"66",name:"Grantaire",label:{normal:{formatter:"Grantaire",show:!1}},symbolSize:28.685715,x:646.4313,y:-151.06331,attributes:{modularity_class:8},value:28.685715,category:8},{id:"67",name:"MotherPlutarch",label:{normal:{formatter:"MotherPlutarch",show:!1}},symbolSize:4,x:668.9568,y:204.65488,attributes:{modularity_class:8},value:4,category:8},{id:"68",name:"Gueulemer",label:{normal:{formatter:"Gueulemer",show:!1}},symbolSize:28.685715,x:78.4799,y:-347.15146,attributes:{modularity_class:7},value:28.685715,category:7},{id:"69",name:"Babet",label:{normal:{formatter:"Babet",show:!1}},symbolSize:28.685715,x:150.35959,y:-298.50797,attributes:{modularity_class:7},value:28.685715,category:7},{id:"70",name:"Claquesous",label:{normal:{formatter:"Claquesous",show:!1}},symbolSize:28.685715,x:137.3717,y:-410.2809,attributes:{modularity_class:7},value:28.685715,category:7},{id:"71",name:"Montparnasse",label:{normal:{formatter:"Montparnasse",show:!1}},symbolSize:25.942856,x:234.87747,y:-400.85983,attributes:{modularity_class:7},value:25.942856,category:7},{id:"72",name:"Toussaint",label:{normal:{formatter:"Toussaint",show:!1}},symbolSize:9.485714,x:40.942253,y:113.78272,attributes:{modularity_class:1},value:9.485714,category:1},{id:"73",name:"Child1",label:{normal:{formatter:"Child1",show:!1}},symbolSize:6.742859,x:437.939,y:291.58234,attributes:{modularity_class:8},value:6.742859,category:8},{id:"74",name:"Child2",label:{normal:{formatter:"Child2",show:!1}},symbolSize:6.742859,x:466.04922,y:283.3606,attributes:{modularity_class:8},value:6.742859,category:8},{id:"75",name:"Brujon",label:{normal:{formatter:"Brujon",show:!1}},symbolSize:20.457146,x:238.79364,y:-314.06345,attributes:{modularity_class:7},value:20.457146,category:7},{id:"76",name:"MmeHucheloup",label:{normal:{formatter:"MmeHucheloup",show:!1}},symbolSize:20.457146,x:712.18353,y:4.8131495,attributes:{modularity_class:8},value:20.457146,category:8}],links:[{id:"0",name:null,source:"1",target:"0"},{id:"1",name:null,source:"2",target:"0"},{id:"2",name:null,source:"3",target:"0"},{id:"3",name:null,source:"3",target:"2"},{id:"4",name:null,source:"4",target:"0"},{id:"5",name:null,source:"5",target:"0"},{id:"6",name:null,source:"6",target:"0"},{id:"7",name:null,source:"7",target:"0"},{id:"8",name:null,source:"8",target:"0"},{id:"9",name:null,source:"9",target:"0"},{id:"13",name:null,source:"11",target:"0"},{id:null,name:null,source:"11",target:"2"},{id:"11",name:null,source:"11",target:"3"},{id:"10",name:null,source:"11",target:"10"},{id:"14",name:null,source:"12",target:"11"},{id:"15",name:null,source:"13",target:"11"},{id:"16",name:null,source:"14",target:"11"},{id:"17",name:null,source:"15",target:"11"},{id:"18",name:null,source:"17",target:"16"},{id:"19",name:null,source:"18",target:"16"},{id:"20",name:null,source:"18",target:"17"},{id:"21",name:null,source:"19",target:"16"},{id:"22",name:null,source:"19",target:"17"},{id:"23",name:null,source:"19",target:"18"},{id:"24",name:null,source:"20",target:"16"},{id:"25",name:null,source:"20",target:"17"},{id:"26",name:null,source:"20",target:"18"},{id:"27",name:null,source:"20",target:"19"},{id:"28",name:null,source:"21",target:"16"},{id:"29",name:null,source:"21",target:"17"},{id:"30",name:null,source:"21",target:"18"},{id:"31",name:null,source:"21",target:"19"},{id:"32",name:null,source:"21",target:"20"},{id:"33",name:null,source:"22",target:"16"},{id:"34",name:null,source:"22",target:"17"},{id:"35",name:null,source:"22",target:"18"},{id:"36",name:null,source:"22",target:"19"},{id:"37",name:null,source:"22",target:"20"},{id:"38",name:null,source:"22",target:"21"},{id:"47",name:null,source:"23",target:"11"},{id:"46",name:null,source:"23",target:"12"},{id:"39",name:null,source:"23",target:"16"},{id:"40",name:null,source:"23",target:"17"},{id:"41",name:null,source:"23",target:"18"},{id:"42",name:null,source:"23",target:"19"},{id:"43",name:null,source:"23",target:"20"},{id:"44",name:null,source:"23",target:"21"},{id:"45",name:null,source:"23",target:"22"},{id:null,name:null,source:"24",target:"11"},{id:"48",name:null,source:"24",target:"23"},{id:"52",name:null,source:"25",target:"11"},{id:"51",name:null,source:"25",target:"23"},{id:"50",name:null,source:"25",target:"24"},{id:null,name:null,source:"26",target:"11"},{id:null,name:null,source:"26",target:"16"},{id:"53",name:null,source:"26",target:"24"},{id:"56",name:null,source:"26",target:"25"},{id:"57",name:null,source:"27",target:"11"},{id:"58",name:null,source:"27",target:"23"},{id:null,name:null,source:"27",target:"24"},{id:"59",name:null,source:"27",target:"25"},{id:"61",name:null,source:"27",target:"26"},{id:"62",name:null,source:"28",target:"11"},{id:"63",name:null,source:"28",target:"27"},{id:"66",name:null,source:"29",target:"11"},{id:"64",name:null,source:"29",target:"23"},{id:"65",name:null,source:"29",target:"27"},{id:"67",name:null,source:"30",target:"23"},{id:null,name:null,source:"31",target:"11"},{id:null,name:null,source:"31",target:"23"},{id:null,name:null,source:"31",target:"27"},{id:"68",name:null,source:"31",target:"30"},{id:"72",name:null,source:"32",target:"11"},{id:"73",name:null,source:"33",target:"11"},{id:"74",name:null,source:"33",target:"27"},{id:"75",name:null,source:"34",target:"11"},{id:"76",name:null,source:"34",target:"29"},{id:"77",name:null,source:"35",target:"11"},{id:null,name:null,source:"35",target:"29"},{id:"78",name:null,source:"35",target:"34"},{id:"82",name:null,source:"36",target:"11"},{id:"83",name:null,source:"36",target:"29"},{id:"80",name:null,source:"36",target:"34"},{id:"81",name:null,source:"36",target:"35"},{id:"87",name:null,source:"37",target:"11"},{id:"88",name:null,source:"37",target:"29"},{id:"84",name:null,source:"37",target:"34"},{id:"85",name:null,source:"37",target:"35"},{id:"86",name:null,source:"37",target:"36"},{id:"93",name:null,source:"38",target:"11"},{id:"94",name:null,source:"38",target:"29"},{id:"89",name:null,source:"38",target:"34"},{id:"90",name:null,source:"38",target:"35"},{id:"91",name:null,source:"38",target:"36"},{id:"92",name:null,source:"38",target:"37"},{id:"95",name:null,source:"39",target:"25"},{id:"96",name:null,source:"40",target:"25"},{id:"97",name:null,source:"41",target:"24"},{id:"98",name:null,source:"41",target:"25"},{id:"101",name:null,source:"42",target:"24"},{id:"100",name:null,source:"42",target:"25"},{id:"99",name:null,source:"42",target:"41"},{id:"102",name:null,source:"43",target:"11"},{id:"103",name:null,source:"43",target:"26"},{id:"104",name:null,source:"43",target:"27"},{id:null,name:null,source:"44",target:"11"},{id:"105",name:null,source:"44",target:"28"},{id:"107",name:null,source:"45",target:"28"},{id:"108",name:null,source:"47",target:"46"},{id:"112",name:null,source:"48",target:"11"},{id:"110",name:null,source:"48",target:"25"},{id:"111",name:null,source:"48",target:"27"},{id:"109",name:null,source:"48",target:"47"},{id:null,name:null,source:"49",target:"11"},{id:"113",name:null,source:"49",target:"26"},{id:null,name:null,source:"50",target:"24"},{id:"115",name:null,source:"50",target:"49"},{id:"119",name:null,source:"51",target:"11"},{id:"118",name:null,source:"51",target:"26"},{id:"117",name:null,source:"51",target:"49"},{id:null,name:null,source:"52",target:"39"},{id:"120",name:null,source:"52",target:"51"},{id:"122",name:null,source:"53",target:"51"},{id:"125",name:null,source:"54",target:"26"},{id:"124",name:null,source:"54",target:"49"},{id:"123",name:null,source:"54",target:"51"},{id:"131",name:null,source:"55",target:"11"},{id:"132",name:null,source:"55",target:"16"},{id:"133",name:null,source:"55",target:"25"},{id:null,name:null,source:"55",target:"26"},{id:"128",name:null,source:"55",target:"39"},{id:"134",name:null,source:"55",target:"41"},{id:"135",name:null,source:"55",target:"48"},{id:"127",name:null,source:"55",target:"49"},{id:"126",name:null,source:"55",target:"51"},{id:"129",name:null,source:"55",target:"54"},{id:"136",name:null,source:"56",target:"49"},{id:"137",name:null,source:"56",target:"55"},{id:null,name:null,source:"57",target:"41"},{id:null,name:null,source:"57",target:"48"},{id:"138",name:null,source:"57",target:"55"},{id:"145",name:null,source:"58",target:"11"},{id:null,name:null,source:"58",target:"27"},{id:"142",name:null,source:"58",target:"48"},{id:"141",name:null,source:"58",target:"55"},{id:"144",name:null,source:"58",target:"57"},{id:"148",name:null,source:"59",target:"48"},{id:"147",name:null,source:"59",target:"55"},{id:null,name:null,source:"59",target:"57"},{id:"146",name:null,source:"59",target:"58"},{id:"150",name:null,source:"60",target:"48"},{id:"151",name:null,source:"60",target:"58"},{id:"152",name:null,source:"60",target:"59"},{id:"153",name:null,source:"61",target:"48"},{id:"158",name:null,source:"61",target:"55"},{id:"157",name:null,source:"61",target:"57"},{id:"154",name:null,source:"61",target:"58"},{id:"156",name:null,source:"61",target:"59"},{id:"155",name:null,source:"61",target:"60"},{id:"164",name:null,source:"62",target:"41"},{id:"162",name:null,source:"62",target:"48"},{id:"159",name:null,source:"62",target:"55"},{id:null,name:null,source:"62",target:"57"},{id:"160",name:null,source:"62",target:"58"},{id:"161",name:null,source:"62",target:"59"},{id:null,name:null,source:"62",target:"60"},{id:"165",name:null,source:"62",target:"61"},{id:null,name:null,source:"63",target:"48"},{id:"174",name:null,source:"63",target:"55"},{id:null,name:null,source:"63",target:"57"},{id:null,name:null,source:"63",target:"58"},{id:"167",name:null,source:"63",target:"59"},{id:null,name:null,source:"63",target:"60"},{id:"172",name:null,source:"63",target:"61"},{id:"169",name:null,source:"63",target:"62"},{id:"184",name:null,source:"64",target:"11"},{id:null,name:null,source:"64",target:"48"},{id:"175",name:null,source:"64",target:"55"},{id:"183",name:null,source:"64",target:"57"},{id:"179",name:null,source:"64",target:"58"},{id:"182",name:null,source:"64",target:"59"},{id:"181",name:null,source:"64",target:"60"},{id:"180",name:null,source:"64",target:"61"},{id:"176",name:null,source:"64",target:"62"},{id:"178",name:null,source:"64",target:"63"},{id:"187",name:null,source:"65",target:"48"},{id:"194",name:null,source:"65",target:"55"},{id:"193",name:null,source:"65",target:"57"},{id:null,name:null,source:"65",target:"58"},{id:"192",name:null,source:"65",target:"59"},{id:null,name:null,source:"65",target:"60"},{id:"190",name:null,source:"65",target:"61"},{id:"188",name:null,source:"65",target:"62"},{id:"185",name:null,source:"65",target:"63"},{id:"186",name:null,source:"65",target:"64"},{id:"200",name:null,source:"66",target:"48"},{id:"196",name:null,source:"66",target:"58"},{id:"197",name:null,source:"66",target:"59"},{id:"203",name:null,source:"66",target:"60"},{id:"202",name:null,source:"66",target:"61"},{id:"198",name:null,source:"66",target:"62"},{id:"201",name:null,source:"66",target:"63"},{id:"195",name:null,source:"66",target:"64"},{id:"199",name:null,source:"66",target:"65"},{id:"204",name:null,source:"67",target:"57"},{id:null,name:null,source:"68",target:"11"},{id:null,name:null,source:"68",target:"24"},{id:"205",name:null,source:"68",target:"25"},{id:"208",name:null,source:"68",target:"27"},{id:null,name:null,source:"68",target:"41"},{id:"209",name:null,source:"68",target:"48"},{id:"213",name:null,source:"69",target:"11"},{id:"214",name:null,source:"69",target:"24"},{id:"211",name:null,source:"69",target:"25"},{id:null,name:null,source:"69",target:"27"},{id:"217",name:null,source:"69",target:"41"},{id:"216",name:null,source:"69",target:"48"},{id:"212",name:null,source:"69",target:"68"},{id:"221",name:null,source:"70",target:"11"},{id:"222",name:null,source:"70",target:"24"},{id:"218",name:null,source:"70",target:"25"},{id:"223",name:null,source:"70",target:"27"},{id:"224",name:null,source:"70",target:"41"},{id:"225",name:null,source:"70",target:"58"},{id:"220",name:null,source:"70",target:"68"},{id:"219",name:null,source:"70",target:"69"},{id:"230",name:null,source:"71",target:"11"},{id:"233",name:null,source:"71",target:"25"},{id:"226",name:null,source:"71",target:"27"},{id:"232",name:null,source:"71",target:"41"},{id:null,name:null,source:"71",target:"48"},{id:"228",name:null,source:"71",target:"68"},{id:"227",name:null,source:"71",target:"69"},{id:"229",name:null,source:"71",target:"70"},{id:"236",name:null,source:"72",target:"11"},{id:"234",name:null,source:"72",target:"26"},{id:"235",name:null,source:"72",target:"27"},{id:"237",name:null,source:"73",target:"48"},{id:"238",name:null,source:"74",target:"48"},{id:"239",name:null,source:"74",target:"73"},{id:"242",name:null,source:"75",target:"25"},{id:"244",name:null,source:"75",target:"41"},{id:null,name:null,source:"75",target:"48"},{id:"241",name:null,source:"75",target:"68"},{id:"240",name:null,source:"75",target:"69"},{id:"245",name:null,source:"75",target:"70"},{id:"246",name:null,source:"75",target:"71"},{id:"252",name:null,source:"76",target:"48"},{id:"253",name:null,source:"76",target:"58"},{id:"251",name:null,source:"76",target:"62"},{id:"250",name:null,source:"76",target:"63"},{id:"247",name:null,source:"76",target:"64"},{id:"248",name:null,source:"76",target:"65"},{id:"249",name:null,source:"76",target:"66"}],categories:[{name:"类目0"},{name:"类目1"},{name:"类目2"},{name:"类目3"},{name:"类目4"},{name:"类目5"},{name:"类目6"},{name:"类目7"},{name:"类目8"}],label:{normal:{position:"right"}},symbol:"circle",itemStyle:{normal:{opacity:.8}},lineStyle:{normal:{curveness:.3}}}]},{title:{text:"热力图"},xAxis:{type:"category",data:["12a","1a","2a","3a","4a","5a","6a","7a","8a","9a","10a","11a","12p"]},yAxis:{type:"category",data:["周六","周五","周四","周三","周二","周一","周日"]},visualMap:{min:1,max:10,calculable:!0},grid:{left:90,right:20,top:40,bottom:40},series:[{name:"热度",type:"heatmap",data:[[0,0,5],[0,1,1],[0,2,3],[0,3,2],[0,4,1],[0,5,4],[0,6,6],[0,7,6],[0,8,4],[0,9,7],[0,10,0],[0,11,2],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,5],[1,5,7],[1,6,9],[1,7,4],[1,8,7],[1,9,9],[1,10,5],[1,11,2],[2,0,7],[2,1,6],[2,2,5],[2,3,5],[2,4,9],[2,5,8],[2,6,0],[2,7,0],[2,8,0],[2,9,4],[2,10,3],[2,11,2],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,3],[3,5,0],[3,6,4],[3,7,5],[3,8,1],[3,9,3],[3,10,5],[3,11,4],[3,12,7],[4,0,6],[4,1,3],[4,2,6],[4,3,0],[4,4,5],[4,5,1],[4,6,0],[4,7,0],[4,8,5],[4,9,2],[4,10,4],[4,11,4],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,8],[5,5,4],[5,6,6],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[6,0,1],[6,1,0],[6,2,8],[6,3,6],[6,4,2],[6,5,0],[6,6,0],[6,7,8],[6,8,5],[6,9,10],[6,10,1],[6,11,0]].map(function(e){return[e[1],e[0],e[2]||"-"]}),label:{normal:{show:!0}}}]},{title:{text:"树图"},series:[{type:"treemap",label:{show:!0,formatter:"{b}"},roam:!1,data:function(){for(var e=[],a=0;a<d;++a){for(var t=[],l=0,r=0,o=Math.ceil(5*Math.random());r<o;++r){for(var n=[],i=0,s=0,m=Math.ceil(3*Math.random());s<m;++s){var u=Math.ceil(100*Math.random());n.push({value:u,name:a+1+"-"+(r+1)+"-"+(s+1),path:a+1+"/"+(a+1)+"-"+(r+1)+"/"+(a+1)+"-"+(r+1)+"-"+(s+1)}),i+=u}t.push({value:i,name:a+1+"-"+(r+1),path:a+1+"/"+(a+1)+"-"+(r+1),children:n}),l+=i}e.push({value:l,name:""+(a+1),path:""+(a+1),children:t})}return e}()}]}],h=0;h<g.length;++h)g[h].legend=g[h].legend||r,g[h].tooltip=g[h].tooltip||n,g[h].grid=g[h].grid||s;return g}Vue.component("config-color-list",VueColorListConfig),function(){var o=1,e=[{name:"vintage",background:"#fef8ef",theme:["#d87c7c","#919e8b","#d7ab82","#6e7074","#61a0a8","#efa18d","#787464","#cc7e63","#724e58","#4b565b"]},{name:"dark",background:"#333",theme:["#dd6b66","#759aa0","#e69d87","#8dc1a9","#ea7e53","#eedd78","#73a373","#73b9bc","#7289ab","#91ca8c","#f49f42"]},{name:"westeros",background:"transparent",theme:["#516b91","#59c4e6","#edafda","#93b7e3","#a5e7f0","#cbb0e3"]},{name:"essos",background:"rgba(242,234,191,0.15)",theme:["#893448","#d95850","#eb8146","#ffb248","#f2d643","#ebdba4"]},{name:"wonderland",background:"transparent",theme:["#4ea397","#22c3aa","#7bd9a5","#d0648a","#f58db2","#f2b3c9"]},{name:"walden",background:"rgba(252,252,252,0)",theme:["#3fb1e3","#6be6c1","#626c91","#a0a7e6","#c4ebad","#96dee8"]},{name:"chalk",background:"#293441",theme:["#fc97af","#87f7cf","#f7f494","#72ccff","#f7c5a0","#d4a4eb","#d2f5a6","#76f2f2"]},{name:"infographic",background:"transparent",theme:["#C1232B","#27727B","#FCCE10","#E87C25","#B5C334","#FE8463","#9BCA63","#FAD860","#F3A43B","#60C0DD","#D7504B","#C6E579","#F4E001","#F0805A","#26C0C0"]},{name:"macarons",background:"transparent",theme:["#2ec7c9","#b6a2de","#5ab1ef","#ffb980","#d87a80","#8d98b3","#e5cf0d","#97b552","#95706d","#dc69aa","#07a2a4","#9a7fd1","#588dd5","#f5994e","#c05050","#59678c","#c9ab00","#7eb00a","#6f5553","#c14089"]},{name:"roma",background:"transparent",theme:["#E01F54","#001852","#f5e8c8","#b8d2c7","#c6b38e","#a4d8c2","#f3d999","#d3758f","#dcc392","#2e4783","#82b6e9","#ff6347","#a092f1","#0a915d","#eaf889","#6699FF","#ff6666","#3cb371","#d5b158","#38b6b6"]},{name:"shine",background:"transparent",theme:["#c12e34","#e6b600","#0098d9","#2b821d","#005eaa","#339ca8","#cda819","#32a487"]},{name:"purple-passion",background:"rgba(91,92,110,1)",theme:["#8a7ca8","#e098c7","#8fd3e8","#71669e","#cc70af","#7cb4cc"]}],n={seriesCnt:3,backgroundColor:"rgba(0, 0, 0, 0)",titleColor:"#333",subtitleColor:"#aaa",textColorShow:!1,textColor:"#333",markTextColor:"#eee",color:["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],borderColor:"#ccc",borderWidth:0,visualMapColor:["#bf444c","#d88273","#f6efa6"],legendTextColor:"#333",kColor:"#c23531",kColor0:"#314656",kBorderColor:"#c23531",kBorderColor0:"#314656",kBorderWidth:1,lineWidth:2,symbolSize:4,symbol:"emptyCircle",symbolBorderWidth:1,lineSmooth:!1,graphLineWidth:1,graphLineColor:"#aaa",mapLabelColor:"#000",mapLabelColorE:"rgb(100,0,0)",mapBorderColor:"#444",mapBorderColorE:"#444",mapBorderWidth:.5,mapBorderWidthE:1,mapAreaColor:"#eee",mapAreaColorE:"rgba(255,215,0,0.8)",axes:function(){for(var e=["all","category","value","log","time"],a=["通用","类目","数值","对数","时间"],t=[],l=0;l<e.length;++l)t.push({type:e[l],name:a[l]+"坐标轴",axisLineShow:!0,axisLineColor:"#333",axisTickShow:!0,axisTickColor:"#333",axisLabelShow:!0,axisLabelColor:"#333",splitLineShow:"category"!==e[l],splitLineColor:["#ccc"],splitAreaShow:!1,splitAreaColor:["rgba(250,250,250,0.3)","rgba(200,200,200,0.3)"]});return t}(),axisSeperateSetting:!0,axis:null,toolboxColor:"#999",toolboxEmpasisColor:"#666",tooltipAxisColor:"#ccc",tooltipAxisWidth:1,timelineLineColor:"#293c55",timelineLineWidth:1,timelineItemColor:"#293c55",timelineItemColorE:"#a9334c",timelineCheckColor:"#e43c59",timelineCheckBorderColor:"rgba(194,53,49, 0.5)",timelineItemBorderWidth:1,timelineControlColor:"#293c55",timelineControlBorderColor:"#293c55",timelineControlBorderWidth:.5,timelineLabelColor:"#293c55",datazoomBackgroundColor:"rgba(47,69,84,0)",datazoomDataColor:"rgba(47,69,84,0.3)",datazoomFillColor:"rgba(167,183,204,0.4)",datazoomHandleColor:"#a7b7cc",datazoomHandleWidth:"100",datazoomLabelColor:"#333"};n.axis=[n.axes[0]];for(var a=_.debounce(r,200),t=0;t<e.length;++t)p(t,!0);var i,s=new Vue({el:"#content",data:{theme:f(n),themeName:"customed",charts:[],options:[],isPauseChartUpdating:!1,copyKbd:0<navigator.userAgent.indexOf("Mac OS X")?"cmd":"ctrl",downloadable:!g()&&!h(),preDefinedThemes:e,loadedThemes:[],chartDisplay:{background:"#fff",title:"#000"}},methods:{updateCharts:r,updateSymbol:function(e){s.theme.symbol=e},selectPreDefinedTheme:function(e){for(var a=0;a<s.loadedThemes.length;++a)if(s.loadedThemes[a].id===e)return void l(s.loadedThemes[a].data);p(e,!1)},useTheme:function(){_hmt.push(["_trackEvent","theme-builder","useTheme",s.themeName]),$("#js-code").text(b()),$("#json-code").text(JSON.stringify(m(!0),null,"    ")),hljs.highlightBlock($("#js-code")[0]),hljs.highlightBlock($("#json-code")[0])},downloadThemeJson:function(){_hmt.push(["_trackEvent","theme-builder","download","json"]),d(m(!0),(s.themeName||"customed")+".json")},downloadThemeJs:function(){var e,a;_hmt.push(["_trackEvent","theme-builder","download","js"]),e=b(),a=(s.themeName||"customed")+".js",c(e,a,"js")},copyThemeJson:function(){y("json")},copyThemeJs:function(){y("js")},newTheme:function(){this.$set("theme",f(n)),this.$set("themeName","customed"),s.axisSeperateSettingChanges()},exportJson:function(){var e=f(s.theme);delete e.axis,d({version:o,themeName:s.themeName,theme:e},(s.themeName||"customed")+".project.json")},importJson:function(){$("#input-file").trigger("click")},importFileChanged:function(e){var a,t;e.target.files&&(".json"===(a=e.target.files[0]).name.slice(a.name.lastIndexOf("."))?((t=new FileReader).onload=function(){l(this.result)},t.onerror=function(e){alert("打开文件失败!"),console.error(e)},t.readAsText(a),$("#input-file").val("")):alert("非法后缀!请使用本网站导出的 *.json 文件。"))},axisSeperateSettingChanges:function(){s.theme.axisSeperateSetting?s.theme.axis=s.theme.axes:s.theme.axis=[s.theme.axes[0]]}}});function l(e){try{var a=JSON.parse(e);if(void 0===a.themeName&&void 0===a.version)return void alert("请使用本网站“导出配置”的 JSON 文件,而不是下载的主题文件。");if(s.$set("themeName",a.themeName||"customed"),a.version<o){var t=[],l=a.theme;for(var r in n)"axis"!==r&&(void 0!==a.theme[r]?l.attr=a.theme[r]:t.push(a.theme.attr));0<t.length?alert("导入的主题版本较低,有"+t.length+"个属性未被设置,现已使用默认值。"):console.warn("导入的主题版本较低,可能有部分属性未生效。")}s.$set("theme",a.theme),s.axisSeperateSettingChanges()}catch(e){alert("非法 JSON 格式!请使用本网站导出的 *.json 文件。"),console.error(e)}}function m(e){var a="path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072 c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363 c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417 c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827 C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12.646,2.053,18.738c4.593,22.785,15.398,41.367,32.558,55.344 c15.43,12.773,29.901,18.023,43.362,16.981c7.074-0.561,13.624-3.977,19.685-10.192c10.534,5.49,20.391,8.217,29.561,8.203 c9.856-0.012,20.236-2.953,31.125-8.898c6.227,6.692,12.966,10.346,20.211,10.933c13.795,1.073,28.614-4.111,44.377-16.84 c17.49-14.104,28.043-32.79,31.796-55.485c0.836-5.624,1.272-11.292,1.272-16.966C255.998,115.814,249.707,96.601,237.062,81.761z  M54.795,97.7l40.661,14.496c-4.402,8.811-10.766,13.219-19.06,13.219c-2.542,0-4.917-0.419-7.122-1.274 C58.103,118.38,53.263,109.572,54.795,97.7z M150.613,185.396l-9.156-8.389l-7.619,12.951c-3.391,0.341-6.615,0.514-9.665,0.514 c-4.401,0-8.635-0.263-12.708-0.777l-8.634-14.973l-9.151,9.909c-4.91-2.717-9.15-5.856-12.708-9.413 c-8.81-8.295-13.384-17.959-13.727-28.97c2.877,1.692,7.427,3.461,13.675,5.308l10.636,13.629l9.44-9.852 c4.734,0.702,9.234,1.12,13.466,1.275l10.689,11.498l9.671-11.949c3.559-0.173,7.285-0.515,11.182-1.01l9.924,10.159l10.933-14.227 c5.931-1.351,11.196-2.798,15.771-4.323C179.747,163.538,169.068,176.414,150.613,185.396z M175.258,124.907 c-2.209,0.849-4.66,1.273-7.369,1.273c-8.134,0-14.489-4.415-19.052-13.224l40.905-14.477 C191.105,110.331,186.273,119.141,175.258,124.907z",t={itemStyle:{normal:{borderWidth:s.theme.symbolBorderWidth}},lineStyle:{normal:{width:s.theme.lineWidth}},symbolSize:s.theme.symbolSize,symbol:s.theme.symbol,smooth:s.theme.lineSmooth},l={itemStyle:{normal:{borderWidth:s.theme.borderWidth,borderColor:s.theme.borderColor},emphasis:{borderWidth:s.theme.borderWidth,borderColor:s.theme.borderColor}}};"halloween"===s.themeName&&(t.symbol=a,l.symbol=a);var r,o={itemStyle:{normal:{areaColor:s.theme.mapAreaColor,borderColor:s.theme.mapBorderColor,borderWidth:s.theme.mapBorderWidth},emphasis:{areaColor:s.theme.mapAreaColorE,borderColor:s.theme.mapBorderColorE,borderWidth:s.theme.mapBorderWidthE}},label:{normal:{textStyle:{color:s.theme.mapLabelColor}},emphasis:{textStyle:{color:s.theme.mapLabelColorE}}}};return{color:s.theme.color,backgroundColor:e?s.theme.backgroundColor:"transparent",textStyle:s.theme.textColorShow?{color:s.theme.textColor}:{},title:{textStyle:{color:s.theme.titleColor},subtextStyle:{color:s.theme.subtitleColor}},line:t,radar:t,bar:{itemStyle:{normal:{barBorderWidth:s.theme.borderWidth,barBorderColor:s.theme.borderColor},emphasis:{barBorderWidth:s.theme.borderWidth,barBorderColor:s.theme.borderColor}}},pie:l,scatter:l,boxplot:l,parallel:l,sankey:l,funnel:l,gauge:l,candlestick:{itemStyle:{normal:{color:s.theme.kColor,color0:s.theme.kColor0,borderColor:s.theme.kBorderColor,borderColor0:s.theme.kBorderColor0,borderWidth:s.theme.kBorderWidth}}},graph:((r=f(t)).color=s.theme.color,r.lineStyle={normal:{width:s.theme.graphLineWidth,color:s.theme.graphLineColor}},r.label={normal:{textStyle:{color:s.theme.markTextColor}}},r.itemStyle.normal.borderWidth=s.theme.borderWidth,r.itemStyle.normal.borderColor=s.theme.borderColor,r),map:o,geo:o,categoryAxis:n(1),valueAxis:n(2),logAxis:n(3),timeAxis:n(4),toolbox:{iconStyle:{normal:{borderColor:s.theme.toolboxColor},emphasis:{borderColor:s.theme.toolboxEmpasisColor}}},legend:{textStyle:{color:s.theme.legendTextColor}},tooltip:{axisPointer:{lineStyle:{color:s.theme.tooltipAxisColor,width:s.theme.tooltipAxisWidth},crossStyle:{color:s.theme.tooltipAxisColor,width:s.theme.tooltipAxisWidth}}},timeline:{lineStyle:{color:s.theme.timelineLineColor,width:s.theme.timelineLineWidth},itemStyle:{normal:{color:s.theme.timelineItemColor,borderWidth:s.theme.timelineItemBorderWidth},emphasis:{color:s.theme.timelineItemColorE}},controlStyle:{normal:{color:s.theme.timelineControlColor,borderColor:s.theme.timelineControlBorderColor,borderWidth:s.theme.timelineControlBorderWidth},emphasis:{color:s.theme.timelineControlColor,borderColor:s.theme.timelineControlBorderColor,borderWidth:s.theme.timelineControlBorderWidth}},checkpointStyle:{color:s.theme.timelineCheckColor,borderColor:s.theme.timelineCheckBorderColor},label:{normal:{textStyle:{color:s.theme.timelineLabelColor}},emphasis:{textStyle:{color:s.theme.timelineLabelColor}}}},visualMap:{color:s.theme.visualMapColor},dataZoom:{backgroundColor:s.theme.datazoomBackgroundColor,dataBackgroundColor:s.theme.datazoomDataColor,fillerColor:s.theme.datazoomFillColor,handleColor:s.theme.datazoomHandleColor,handleSize:s.theme.datazoomHandleWidth+"%",textStyle:{color:s.theme.datazoomLabelColor}},markPoint:{label:{normal:{textStyle:{color:s.theme.markTextColor}},emphasis:{textStyle:{color:s.theme.markTextColor}}}}};function n(e){return s.theme.axisSeperateSetting||(e=0),{axisLine:{show:s.theme.axes[e].axisLineShow,lineStyle:{color:s.theme.axes[e].axisLineColor}},axisTick:{show:s.theme.axes[e].axisTickShow,lineStyle:{color:s.theme.axes[e].axisTickColor}},axisLabel:{show:s.theme.axes[e].axisLabelShow,textStyle:{color:s.theme.axes[e].axisLabelColor}},splitLine:{show:s.theme.axes[e].splitLineShow,lineStyle:{color:s.theme.axes[e].splitLineColor}},splitArea:{show:s.theme.axes[e].splitAreaShow,areaStyle:{color:s.theme.axes[e].splitAreaColor}}}}}function u(e,a,t){var l,r,o=$(".ec-panel").eq(e);o.length&&((l=echarts.getInstanceByDom(o[0]))&&l.dispose(),(l=echarts.init(o[0],"customed")).setOption(a[e]),(r=e+1)===$(".ec-panel").length&&(r=0),r!==t&&(i=setTimeout(function(){u(r,a,t)},150)))}function r(){if(!s.isPauseChartUpdating){echarts.registerTheme("customed",m(!1));var e=getOptions(s);i&&clearTimeout(i);for(var a=$(".ec-panel").length,t=!1,l=0;l<a;++l){var r=$(".ec-panel").eq(l);if(0<r.offset().top+r.height()){u(l,e,l),t=!0;break}}t||u(0,e),s.chartDisplay.background=s.theme.backgroundColor,s.chartDisplay.title=s.theme.titleColor}}function d(e,a){c(JSON.stringify(e,null,"    "),a,"json")}function c(a,e,t){if(0<navigator.userAgent.indexOf("Safari")&&navigator.userAgent.indexOf("Chrome")<0)window.open("data:text/plain;charset=utf-8,"+encodeURIComponent(a));else try{var l=new Blob([a],{type:t});saveAs(l,e)}catch(e){console.error(e),window.open("data:text/plain;charset=utf-8,"+encodeURIComponent(a))}}function g(){return 0<navigator.userAgent.indexOf("MSIE")}function h(){return 0<navigator.userAgent.indexOf("Trident")}function b(){var e=(e=JSON.stringify(m(!0),null,"    ")).split("\n").join("\n    ");return"(function (root, factory) {\n    if (typeof define === 'function' && define.amd) {\n        // AMD. Register as an anonymous module.\n        define(['exports', 'echarts'], factory);\n    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {\n        // CommonJS\n        factory(exports, require('echarts'));\n    } else {\n        // Browser globals\n        factory({}, root.echarts);\n    }\n}(this, function (exports, echarts) {\n    var log = function (msg) {\n        if (typeof console !== 'undefined') {\n            console && console.error && console.error(msg);\n        }\n    };\n    if (!echarts) {\n        log('ECharts is not Loaded');\n        return;\n    }\n    echarts.registerTheme('"+s.themeName+"', "+e+");\n}));\n"}function y(e){var a,t;function l(e){$("#"+e).fadeIn(),setTimeout(function(){$("#"+e).fadeOut()},1e4)}window.getSelection?((t=document.createRange()).selectNode($("#"+e+"-code")[0]),(a=window.getSelection()).removeAllRanges(),a.addRange(t)):document.selection&&((t=document.body.createTextRange()).moveToElementText($("#"+e+"-code")[0]),t.select()),$(".code-btn label").hide(),g()||h()||!document.execCommand("copy")?l("copy-"+e+"-fail"):(l("copy-"+e+"-success"),window.getSelection?window.getSelection().removeAllRanges():document.selection.empty())}function f(e){return $.extend(!0,{},e)}function p(a,t){$.ajax({url:"./theme-builder/themes/"+e[a].name+".json",dataType:"text",success:function(e){s.loadedThemes.push({id:a,data:e}),t||l(e)}})}s.$watch("theme",a,{deep:!0}),s.axisSeperateSettingChanges()}();
\ No newline at end of file
+var VueColor=Vue.extend({template:'<div class="input-group colorpicker-component"><input type="text" class="form-control" debounce="2000" /><span class="input-group-addon"><i></i></span></div>',compiled:function(){var a=this,t=$(this.$el);t.find("input").val(this.color),t.colorpicker().on("changeColor",function(){var e=t.find("input").val();echarts.color.parse(e)&&a.$set("color",e)}),a.$watch("color",function(e){t.colorpicker("setValue",e)})},props:{color:{twoWay:!0}}});Vue.component("color",VueColor);var VueColorList=Vue.extend({template:'<div><div v-for="color in colors" track-by="$index"><color :color.sync="color"></color></div><div class="theme-color-control"><a v-on:click="addColor()">增加</a><a v-on:click="removeColor()" v-show="colors.length > 1">减少</a></div></div>',props:{colors:{twoWay:!0}},methods:{addColor:function(){this.colors.push("#333333")},removeColor:function(){this.colors.pop()}}});Vue.component("color-list",VueColorList);var VueNumberConfig=Vue.extend({template:'<div class="form-group">  <div class="col-sm-3">    <input type="checkbox" v-model="enabled" v-if="canDisable" />    <label class="control-label">{{title}}</label>  </div>  <div class="col-sm-9">    <div class="input-group" v-show="enabled">      <input type="number" v-model="value" class="form-control" />    </div>  </div></div>',props:{title:String,canDisable:{type:Boolean,default:!1},value:{twoWay:!0},enabled:{twoWay:!0,default:!0}}});Vue.component("config-number",VueNumberConfig);var VueColorConfig=Vue.extend({template:'<div class="form-group">  <div class="col-sm-3">    <input type="checkbox" v-model="enabled" v-if="canDisable" />    <label class="control-label">{{title}}</label>  </div>  <div class="col-sm-9">    <color :color.sync="color" v-show="enabled"></color>  </div></div>',props:{title:String,canDisable:{type:Boolean,default:!1},color:{twoWay:!0},enabled:{twoWay:!0,default:!0}}});Vue.component("config-color",VueColorConfig);var VueColorListConfig=Vue.extend({template:'<div class="form-group">  <div class="col-sm-3">    <input type="checkbox" v-model="enabled" v-if="canDisable" />    <label class="control-label">{{title}}</label>  </div>  <div class="col-sm-9">    <color-list :colors.sync="colors" v-show="enabled"></color-list>  </div></div>',props:{title:String,canDisable:{type:Boolean,default:!1},colors:{twoWay:!0},enabled:{twoWay:!0,default:!0}}});function getOptions(e){function l(e){var a,t=[];a="scatter"===e?32:i;for(var l=0;l<d;++l){for(var r,o=[],n=0;n<a;++n){r="scatter"===e?[Math.floor((600*Math.random()+400)*(d-l)/d),Math.floor((600*Math.random()+400)*(d-l)/d)]:Math.floor((600*Math.random()+400)*(d-l)/d),o.push(r)}"radar"===e&&(o=[o]),t.push({type:e,data:o,name:"第"+(l+1)+"组",markPoint:"line"===e||"bar"===e||"scatter"===e?{data:[{name:"最高",type:"max"}]}:{}})}return t}function a(e){for(var a=l(e),t=0;t<a.length;++t)a[t].areaStyle={normal:{}},a[t].stack="total";return a}var d=e?e.theme.seriesCnt:4,t=["周一","周二","周三","周四","周五","周六","周日"],i=t.length,r={data:function(){for(var e=[],a=0;a<d;++a)e.push("第"+(a+1)+"组");return e}(),right:0},o={feature:{restore:{show:!0},saveAsImage:{show:!0},dataView:{show:!0},dataZoom:{show:!0}}},n={trigger:"axis"},s={left:60,right:20,top:40,bottom:50},m={};function u(e){for(var a=["北京","天津","河北","山西","内蒙古","辽宁","吉林","黑龙江","上海","江苏"],t=2002;t<=2007;t++){for(var l,r=0,o=0,n=0,i=(l=e[t]).length;n<i;n++)r=Math.max(r,l[n]),o+=l[n],e[t][n]={name:a[n],value:l[n]};e[t+"max"]=100*Math.floor(r/100),e[t+"sum"]=o}return e}m.dataPI=u({2007:[101.26,110.19,1804.72,311.97,762.1,1133.42,783.8,915.38,101.84,1816.31],2006:[88.8,103.35,1461.81,276.77,634.94,939.43,672.76,750.14,93.81,1545.05,925.1],2005:[88.68,112.38,1400,262.42,589.56,882.41,625.61,684.6,90.26,1461.51,892.83],2004:[87.36,105.28,1370.43,276.3,522.8,798.43,568.69,605.79,83.45,1367.58,814.1],2003:[84.11,89.91,1064.05,215.19,420.1,615.8,488.23,504.8,81.02,1162.45,717.85],2002:[82.44,84.21,956.84,197.8,374.69,590.2,446.17,474.2,79.68,1110.44]}),m.dataSI=u({2007:[2509.4,2892.53,7201.88,3454.49,3193.67,5544.14,2475.45,3695.58,5571.06,14471.26],2006:[2191.43,2457.08,6110.43,2755.66,2374.96,4566.83,1915.29,3365.31,4969.95,12282.89],2005:[2026.51,2135.07,5271.57,2357.04,1773.21,3869.4,1580.83,2971.68,4381.2,10524.96],2004:[1853.58,1685.93,4301.73,1919.4,1248.27,3061.62,1329.68,2487.04,3892.12,8437.99],2003:[1487.15,1337.31,3417.56,1463.38,967.49,2898.89,1098.37,2084.7,3209.02,6787.11],2002:[1249.99,1069.08,2911.69,1134.31,754.78,2609.85,943.49,1843.6,2622.45,5604.49]}),m.dataTI=u({2007:[7236.15,2250.04,4600.72,2257.99,2467.41,4486.74,2025.44,2493.04,6821.11,9730.91],2006:[5837.55,1902.31,3895.36,1846.18,1934.35,3798.26,1687.07,2096.35,5508.48,7914.11],2005:[4854.33,1658.19,3340.54,1611.07,1542.26,3295.45,1413.83,1857.42,4776.2,6612.22],2004:[4092.27,1319.76,2805.47,1375.67,1270,2811.95,1223.64,1657.77,4097.26,5198.03],2003:[3435.95,1150.81,2439.68,1176.65,1000.79,2487.85,1075.48,1467.9,3404.19,4493.31],2002:[2982.57,997.47,2149.75,992.69,811.47,2258.17,958.88,1319.4,3038.9,3891.92]});for(var c,g=[{title:{text:"折线图",subtext:"副标题样式"},series:l("line"),xAxis:{type:"category",data:t},yAxis:{type:"value"},grid:{left:60,right:20,top:60,bottom:50}},{title:{text:"折线堆积面积图",subtext:"副标题样式"},series:a("line"),xAxis:{type:"category",data:t,boundaryGap:!1},yAxis:{type:"value"},grid:{left:60,right:20,top:60,bottom:50}},{title:{text:"柱状图"},series:l("bar"),xAxis:{type:"category",data:t},yAxis:{type:"value"}},{title:{text:"柱状堆积图"},series:a("bar"),xAxis:{type:"category",data:t},yAxis:{type:"value"}},{title:{text:"散点图"},series:l("scatter"),toolbox:((c=o).left=65,c),tooltip:{trigger:"item"},xAxis:{type:"value"},yAxis:{type:"value"}},{title:{text:"饼图"},series:function(e){for(var a=[],t=0;t<d;++t)a.push({name:r.data[t],value:Math.floor((800*Math.random()+200)*(d-t)/d)});return{type:e,data:a}}("pie"),tooltip:{trigger:"item"}},{title:{text:"雷达图"},series:l("radar"),radar:{indicator:function(){for(var e=[],a=0;a<t.length;++a)e.push({name:t[a],max:1e3});return e}(),center:["50%","60%"]}},{baseOption:{timeline:{axisType:"category",autoPlay:!1,data:["2002-01-01","2003-01-01","2004-01-01",{value:"2005-01-01",tooltip:{formatter:"{b} GDP达到一个高度"}},"2006-01-01","2007-01-01","2008-01-01","2009-01-01","2010-01-01",{value:"2011-01-01",tooltip:{formatter:function(e){return e.name+"GDP达到又一个高度"}}}],label:{formatter:function(e){return new Date(e).getFullYear()}}},tooltip:{},legend:{x:"right",data:["第一产业","第二产业","第三产业"]},calculable:!0,grid:{top:60,bottom:75},xAxis:[{type:"category",axisLabel:{interval:0},data:["北京","天津","河北","山西","内蒙古","辽宁","吉林","黑龙江","上海","江苏"],splitLine:{show:!1}}],yAxis:[{type:"value",name:"GDP(亿元)"}],series:[{name:"第一产业",type:"bar"},{name:"第二产业",type:"bar"},{name:"第三产业",type:"bar"},{name:"GDP占比",type:"pie",center:["30%","35%"],radius:"28%"}]},options:[{title:{text:"时间轴"},series:[{data:m.dataPI[2002]},{data:m.dataSI[2002]},{data:m.dataTI[2002]},{data:[{name:"第一产业",value:m.dataPI["2002sum"]},{name:"第二产业",value:m.dataSI["2002sum"]},{name:"第三产业",value:m.dataTI["2002sum"]}]}]},{title:{text:"时间轴"},series:[{data:m.dataPI[2003]},{data:m.dataSI[2003]},{data:m.dataTI[2003]},{data:[{name:"第一产业",value:m.dataPI["2003sum"]},{name:"第二产业",value:m.dataSI["2003sum"]},{name:"第三产业",value:m.dataTI["2003sum"]}]}]},{title:{text:"时间轴"},series:[{data:m.dataPI[2004]},{data:m.dataSI[2004]},{data:m.dataTI[2004]},{data:[{name:"第一产业",value:m.dataPI["2004sum"]},{name:"第二产业",value:m.dataSI["2004sum"]},{name:"第三产业",value:m.dataTI["2004sum"]}]}]},{title:{text:"时间轴"},series:[{data:m.dataPI[2005]},{data:m.dataSI[2005]},{data:m.dataTI[2005]},{data:[{name:"第一产业",value:m.dataPI["2005sum"]},{name:"第二产业",value:m.dataSI["2005sum"]},{name:"第三产业",value:m.dataTI["2005sum"]}]}]},{title:{text:"时间轴"},series:[{data:m.dataPI[2006]},{data:m.dataSI[2006]},{data:m.dataTI[2006]},{data:[{name:"第一产业",value:m.dataPI["2006sum"]},{name:"第二产业",value:m.dataSI["2006sum"]},{name:"第三产业",value:m.dataTI["2006sum"]}]}]},{title:{text:"时间轴"},series:[{data:m.dataPI[2007]},{data:m.dataSI[2007]},{data:m.dataTI[2007]},{data:[{name:"第一产业",value:m.dataPI["2007sum"]},{name:"第二产业",value:m.dataSI["2007sum"]},{name:"第三产业",value:m.dataTI["2007sum"]}]}]}]},{title:{text:"K 线图与数据缩放"},grid:{left:60,right:20,top:40,bottom:70},toolbox:{show:!0,feature:{mark:{show:!0},dataZoom:{show:!0},magicType:{show:!0,type:["line","bar"]},dataView:{show:!0,readOnly:!1},restore:{show:!0}}},dataZoom:{show:!0,realtime:!0,start:50,end:100},xAxis:[{type:"category",boundaryGap:!0,axisTick:{onGap:!1},data:["2013/1/24","2013/1/25","2013/1/28","2013/1/29","2013/1/30","2013/1/31","2013/2/1","2013/2/4","2013/2/5","2013/2/6","2013/2/7","2013/2/8","2013/2/18","2013/2/19","2013/2/20","2013/2/21","2013/2/22","2013/2/25","2013/2/26","2013/2/27","2013/2/28","2013/3/1","2013/3/4","2013/3/5","2013/3/6","2013/3/7","2013/3/8","2013/3/11","2013/3/12","2013/3/13","2013/3/14","2013/3/15","2013/3/18","2013/3/19","2013/3/20","2013/3/21","2013/3/22","2013/3/25","2013/3/26","2013/3/27","2013/3/28","2013/3/29","2013/4/1","2013/4/2","2013/4/3","2013/4/8","2013/4/9","2013/4/10","2013/4/11","2013/4/12","2013/4/15","2013/4/16","2013/4/17","2013/4/18","2013/4/19","2013/4/22","2013/4/23","2013/4/24","2013/4/25","2013/4/26","2013/5/2","2013/5/3","2013/5/6","2013/5/7","2013/5/8","2013/5/9","2013/5/10","2013/5/13","2013/5/14","2013/5/15","2013/5/16","2013/5/17","2013/5/20","2013/5/21","2013/5/22","2013/5/23","2013/5/24","2013/5/27","2013/5/28","2013/5/29","2013/5/30","2013/5/31","2013/6/3","2013/6/4","2013/6/5","2013/6/6","2013/6/7","2013/6/13"]}],yAxis:[{type:"value",scale:!0,precision:2,splitNumber:7,boundaryGap:[.05,.05]}],series:[{name:"上证指数",type:"candlestick",data:[[2320.26,2302.6,2287.3,2362.94],[2300,2291.3,2288.26,2308.38],[2295.35,2346.5,2295.35,2346.92],[2347.22,2358.98,2337.35,2363.8],[2360.75,2382.48,2347.89,2383.76],[2383.43,2385.42,2371.23,2391.82],[2377.41,2419.02,2369.57,2421.15],[2425.92,2428.15,2417.58,2440.38],[2411,2433.13,2403.3,2437.42],[2432.68,2434.48,2427.7,2441.73],[2430.69,2418.53,2394.22,2433.89],[2416.62,2432.4,2414.4,2443.03],[2441.91,2421.56,2415.43,2444.8],[2420.26,2382.91,2373.53,2427.07],[2383.49,2397.18,2370.61,2397.94],[2378.82,2325.95,2309.17,2378.82],[2322.94,2314.16,2308.76,2330.88],[2320.62,2325.82,2315.01,2338.78],[2313.74,2293.34,2289.89,2340.71],[2297.77,2313.22,2292.03,2324.63],[2322.32,2365.59,2308.92,2366.16],[2364.54,2359.51,2330.86,2369.65],[2332.08,2273.4,2259.25,2333.54],[2274.81,2326.31,2270.1,2328.14],[2333.61,2347.18,2321.6,2351.44],[2340.44,2324.29,2304.27,2352.02],[2326.42,2318.61,2314.59,2333.67],[2314.68,2310.59,2296.58,2320.96],[2309.16,2286.6,2264.83,2333.29],[2282.17,2263.97,2253.25,2286.33],[2255.77,2270.28,2253.31,2276.22],[2269.31,2278.4,2250,2312.08],[2267.29,2240.02,2239.21,2276.05],[2244.26,2257.43,2232.02,2261.31],[2257.74,2317.37,2257.42,2317.86],[2318.21,2324.24,2311.6,2330.81],[2321.4,2328.28,2314.97,2332],[2334.74,2326.72,2319.91,2344.89],[2318.58,2297.67,2281.12,2319.99],[2299.38,2301.26,2289,2323.48],[2273.55,2236.3,2232.91,2273.55],[2238.49,2236.62,2228.81,2246.87],[2229.46,2234.4,2227.31,2243.95],[2234.9,2227.74,2220.44,2253.42],[2232.69,2225.29,2217.25,2241.34],[2196.24,2211.59,2180.67,2212.59],[2215.47,2225.77,2215.47,2234.73],[2224.93,2226.13,2212.56,2233.04],[2236.98,2219.55,2217.26,2242.48],[2218.09,2206.78,2204.44,2226.26],[2199.91,2181.94,2177.39,2204.99],[2169.63,2194.85,2165.78,2196.43],[2195.03,2193.8,2178.47,2197.51],[2181.82,2197.6,2175.44,2206.03],[2201.12,2244.64,2200.58,2250.11],[2236.4,2242.17,2232.26,2245.12],[2242.62,2184.54,2182.81,2242.62],[2187.35,2218.32,2184.11,2226.12],[2213.19,2199.31,2191.85,2224.63],[2203.89,2177.91,2173.86,2210.58],[2170.78,2174.12,2161.14,2179.65],[2179.05,2205.5,2179.05,2222.81],[2212.5,2231.17,2212.5,2236.07],[2227.86,2235.57,2219.44,2240.26],[2242.39,2246.3,2235.42,2255.21],[2246.96,2232.97,2221.38,2247.86],[2228.82,2246.83,2225.81,2247.67],[2247.68,2241.92,2231.36,2250.85],[2238.9,2217.01,2205.87,2239.93],[2217.09,2224.8,2213.58,2225.19],[2221.34,2251.81,2210.77,2252.87],[2249.81,2282.87,2248.41,2288.09],[2286.33,2299.99,2281.9,2309.39],[2297.11,2305.11,2290.12,2305.3],[2303.75,2302.4,2292.43,2314.18],[2293.81,2275.67,2274.1,2304.95],[2281.45,2288.53,2270.25,2292.59],[2286.66,2293.08,2283.94,2301.7],[2293.4,2321.32,2281.47,2322.1],[2323.54,2324.02,2321.17,2334.33],[2316.25,2317.75,2310.49,2325.72],[2320.74,2300.59,2299.37,2325.53],[2300.21,2299.25,2294.11,2313.43],[2297.1,2272.42,2264.76,2297.1],[2270.71,2270.93,2260.87,2276.86],[2264.43,2242.11,2240.07,2266.69],[2242.26,2210.9,2205.07,2250.63],[2190.1,2148.35,2126.22,2190.1]]}]},{title:{text:"图"},series:[{name:"Les Miserables",type:"graph",layout:"none",data:[{id:"0",name:"Myriel",label:{normal:{formatter:"Myriel",show:!1}},symbolSize:8.685715,x:-266.82776,y:299.6904,attributes:{modularity_class:0},value:28.685715,category:0},{id:"1",name:"Napoleon",label:{normal:{formatter:"Napoleon",show:!1}},symbolSize:4,x:-418.08344,y:446.8853,attributes:{modularity_class:0},value:4,category:0},{id:"2",name:"MlleBaptistine",label:{normal:{formatter:"MlleBaptistine",show:!1}},symbolSize:9.485714,x:-212.76357,y:245.29176,attributes:{modularity_class:1},value:9.485714,category:1},{id:"3",name:"MmeMagloire",label:{normal:{formatter:"MmeMagloire",show:!1}},symbolSize:9.485714,x:-242.82404,y:235.26283,attributes:{modularity_class:1},value:9.485714,category:1},{id:"4",name:"CountessDeLo",label:{normal:{formatter:"CountessDeLo",show:!1}},symbolSize:4,x:-379.30386,y:429.06424,attributes:{modularity_class:0},value:4,category:0},{id:"5",name:"Geborand",label:{normal:{formatter:"Geborand",show:!1}},symbolSize:4,x:-417.26337,y:406.03506,attributes:{modularity_class:0},value:4,category:0},{id:"6",name:"Champtercier",label:{normal:{formatter:"Champtercier",show:!1}},symbolSize:4,x:-332.6012,y:485.16974,attributes:{modularity_class:0},value:4,category:0},{id:"7",name:"Cravatte",label:{normal:{formatter:"Cravatte",show:!1}},symbolSize:4,x:-382.69568,y:475.09113,attributes:{modularity_class:0},value:4,category:0},{id:"8",name:"Count",label:{normal:{formatter:"Count",show:!1}},symbolSize:4,x:-320.384,y:387.17325,attributes:{modularity_class:0},value:4,category:0},{id:"9",name:"OldMan",label:{normal:{formatter:"OldMan",show:!1}},symbolSize:4,x:-344.39832,y:451.16772,attributes:{modularity_class:0},value:4,category:0},{id:"10",name:"Labarre",label:{normal:{formatter:"Labarre",show:!1}},symbolSize:4,x:-89.34107,y:234.56128,attributes:{modularity_class:1},value:4,category:1},{id:"11",name:"Valjean",label:{normal:{formatter:"Valjean",show:!1}},symbolSize:40,x:-87.93029,y:-6.8120565,attributes:{modularity_class:1},value:100,category:1},{id:"12",name:"Marguerite",label:{normal:{formatter:"Marguerite",show:!1}},symbolSize:6.742859,x:-339.77908,y:-184.69139,attributes:{modularity_class:1},value:6.742859,category:1},{id:"13",name:"MmeDeR",label:{normal:{formatter:"MmeDeR",show:!1}},symbolSize:4,x:-194.31313,y:178.55301,attributes:{modularity_class:1},value:4,category:1},{id:"14",name:"Isabeau",label:{normal:{formatter:"Isabeau",show:!1}},symbolSize:4,x:-158.05168,y:201.99768,attributes:{modularity_class:1},value:4,category:1},{id:"15",name:"Gervais",label:{normal:{formatter:"Gervais",show:!1}},symbolSize:4,x:-127.701546,y:242.55057,attributes:{modularity_class:1},value:4,category:1},{id:"16",name:"Tholomyes",label:{normal:{formatter:"Tholomyes",show:!1}},symbolSize:15.942856,x:-385.2226,y:-393.5572,attributes:{modularity_class:2},value:25.942856,category:2},{id:"17",name:"Listolier",label:{normal:{formatter:"Listolier",show:!1}},symbolSize:17.457146,x:-516.55884,y:-393.98975,attributes:{modularity_class:2},value:20.457146,category:2},{id:"18",name:"Fameuil",label:{normal:{formatter:"Fameuil",show:!1}},symbolSize:17.457146,x:-464.79382,y:-493.57944,attributes:{modularity_class:2},value:20.457146,category:2},{id:"19",name:"Blacheville",label:{normal:{formatter:"Blacheville",show:!1}},symbolSize:17.457146,x:-515.1624,y:-456.9891,attributes:{modularity_class:2},value:20.457146,category:2},{id:"20",name:"Favourite",label:{normal:{formatter:"Favourite",show:!1}},symbolSize:17.457146,x:-408.12122,y:-464.5048,attributes:{modularity_class:2},value:20.457146,category:2},{id:"21",name:"Dahlia",label:{normal:{formatter:"Dahlia",show:!1}},symbolSize:17.457146,x:-456.44113,y:-425.13303,attributes:{modularity_class:2},value:20.457146,category:2},{id:"22",name:"Zephine",label:{normal:{formatter:"Zephine",show:!1}},symbolSize:17.457146,x:-459.1107,y:-362.5133,attributes:{modularity_class:2},value:20.457146,category:2},{id:"23",name:"Fantine",label:{normal:{formatter:"Fantine",show:!1}},symbolSize:22.4,x:-313.42786,y:-289.44803,attributes:{modularity_class:2},value:42.4,category:2},{id:"24",name:"MmeThenardier",label:{normal:{formatter:"MmeThenardier",show:!1}},symbolSize:14.428574,x:4.6313396,y:-273.8517,attributes:{modularity_class:7},value:31.428574,category:7},{id:"25",name:"Thenardier",label:{normal:{formatter:"Thenardier",show:!1}},symbolSize:25.142853,x:82.80825,y:-203.1144,attributes:{modularity_class:7},value:45.142853,category:7},{id:"26",name:"Cosette",label:{normal:{formatter:"Cosette",show:!1}},symbolSize:21.428574,x:78.64646,y:-31.512747,attributes:{modularity_class:6},value:31.428574,category:6},{id:"27",name:"Javert",label:{normal:{formatter:"Javert",show:!1}},symbolSize:27.88571,x:-81.46074,y:-204.20204,attributes:{modularity_class:7},value:47.88571,category:7},{id:"28",name:"Fauchelevent",label:{normal:{formatter:"Fauchelevent",show:!1}},symbolSize:12.228573,x:-225.73984,y:82.41631,attributes:{modularity_class:4},value:12.228573,category:4},{id:"29",name:"Bamatabois",label:{normal:{formatter:"Bamatabois",show:!1}},symbolSize:23.2,x:-385.6842,y:-20.206686,attributes:{modularity_class:3},value:23.2,category:3},{id:"30",name:"Perpetue",label:{normal:{formatter:"Perpetue",show:!1}},symbolSize:6.742859,x:-403.92447,y:-197.69823,attributes:{modularity_class:2},value:6.742859,category:2},{id:"31",name:"Simplice",label:{normal:{formatter:"Simplice",show:!1}},symbolSize:12.228573,x:-281.4253,y:-158.45137,attributes:{modularity_class:2},value:12.228573,category:2},{id:"32",name:"Scaufflaire",label:{normal:{formatter:"Scaufflaire",show:!1}},symbolSize:4,x:-122.41348,y:210.37503,attributes:{modularity_class:1},value:4,category:1},{id:"33",name:"Woman1",label:{normal:{formatter:"Woman1",show:!1}},symbolSize:6.742859,x:-234.6001,y:-113.15067,attributes:{modularity_class:1},value:6.742859,category:1},{id:"34",name:"Judge",label:{normal:{formatter:"Judge",show:!1}},symbolSize:17.714287,x:-387.84915,y:58.7059,attributes:{modularity_class:3},value:17.714287,category:3},{id:"35",name:"Champmathieu",label:{normal:{formatter:"Champmathieu",show:!1}},symbolSize:17.714287,x:-338.2307,y:87.48405,attributes:{modularity_class:3},value:17.714287,category:3},{id:"36",name:"Brevet",label:{normal:{formatter:"Brevet",show:!1}},symbolSize:17.714287,x:-453.26874,y:58.94648,attributes:{modularity_class:3},value:17.714287,category:3},{id:"37",name:"Chenildieu",label:{normal:{formatter:"Chenildieu",show:!1}},symbolSize:17.714287,x:-386.44904,y:140.05937,attributes:{modularity_class:3},value:17.714287,category:3},{id:"38",name:"Cochepaille",label:{normal:{formatter:"Cochepaille",show:!1}},symbolSize:17.714287,x:-446.7876,y:123.38005,attributes:{modularity_class:3},value:17.714287,category:3},{id:"39",name:"Pontmercy",label:{normal:{formatter:"Pontmercy",show:!1}},symbolSize:9.485714,x:336.49738,y:-269.55914,attributes:{modularity_class:6},value:9.485714,category:6},{id:"40",name:"Boulatruelle",label:{normal:{formatter:"Boulatruelle",show:!1}},symbolSize:4,x:29.187843,y:-460.13132,attributes:{modularity_class:7},value:4,category:7},{id:"41",name:"Eponine",label:{normal:{formatter:"Eponine",show:!1}},symbolSize:31.428574,x:238.36697,y:-210.00926,attributes:{modularity_class:7},value:31.428574,category:7},{id:"42",name:"Anzelma",label:{normal:{formatter:"Anzelma",show:!1}},symbolSize:9.485714,x:189.69513,y:-346.50662,attributes:{modularity_class:7},value:9.485714,category:7},{id:"43",name:"Woman2",label:{normal:{formatter:"Woman2",show:!1}},symbolSize:9.485714,x:-187.00418,y:-145.02663,attributes:{modularity_class:6},value:9.485714,category:6},{id:"44",name:"MotherInnocent",label:{normal:{formatter:"MotherInnocent",show:!1}},symbolSize:6.742859,x:-252.99521,y:129.87549,attributes:{modularity_class:4},value:6.742859,category:4},{id:"45",name:"Gribier",label:{normal:{formatter:"Gribier",show:!1}},symbolSize:4,x:-296.07935,y:163.11964,attributes:{modularity_class:4},value:4,category:4},{id:"46",name:"Jondrette",label:{normal:{formatter:"Jondrette",show:!1}},symbolSize:4,x:550.3201,y:522.4031,attributes:{modularity_class:5},value:4,category:5},{id:"47",name:"MmeBurgon",label:{normal:{formatter:"MmeBurgon",show:!1}},symbolSize:6.742859,x:488.13535,y:356.8573,attributes:{modularity_class:5},value:6.742859,category:5},{id:"48",name:"Gavroche",label:{normal:{formatter:"Gavroche",show:!1}},symbolSize:31.600006,x:387.89572,y:110.462326,attributes:{modularity_class:8},value:61.600006,category:8},{id:"49",name:"Gillenormand",label:{normal:{formatter:"Gillenormand",show:!1}},symbolSize:20.457146,x:126.4831,y:68.10622,attributes:{modularity_class:6},value:20.457146,category:6},{id:"50",name:"Magnon",label:{normal:{formatter:"Magnon",show:!1}},symbolSize:6.742859,x:127.07365,y:-113.05923,attributes:{modularity_class:6},value:6.742859,category:6},{id:"51",name:"MlleGillenormand",label:{normal:{formatter:"MlleGillenormand",show:!1}},symbolSize:20.457146,x:162.63559,y:117.6565,attributes:{modularity_class:6},value:20.457146,category:6},{id:"52",name:"MmePontmercy",label:{normal:{formatter:"MmePontmercy",show:!1}},symbolSize:6.742859,x:353.66415,y:-205.89165,attributes:{modularity_class:6},value:6.742859,category:6},{id:"53",name:"MlleVaubois",label:{normal:{formatter:"MlleVaubois",show:!1}},symbolSize:4,x:165.43939,y:339.7736,attributes:{modularity_class:6},value:4,category:6},{id:"54",name:"LtGillenormand",label:{normal:{formatter:"LtGillenormand",show:!1}},symbolSize:12.228573,x:137.69348,y:196.1069,attributes:{modularity_class:6},value:12.228573,category:6},{id:"55",name:"Marius",label:{normal:{formatter:"Marius",show:!1}},symbolSize:33.37143,x:206.44687,y:-13.805411,attributes:{modularity_class:6},value:53.37143,category:6},{id:"56",name:"BaronessT",label:{normal:{formatter:"BaronessT",show:!1}},symbolSize:6.742859,x:194.82993,y:224.78036,attributes:{modularity_class:6},value:6.742859,category:6},{id:"57",name:"Mabeuf",label:{normal:{formatter:"Mabeuf",show:!1}},symbolSize:31.428574,x:597.6618,y:135.18481,attributes:{modularity_class:8},value:21.428574,category:8},{id:"58",name:"Enjolras",label:{normal:{formatter:"Enjolras",show:!1}},symbolSize:42.4,x:355.78366,y:-74.882454,attributes:{modularity_class:8},value:22.4,category:8},{id:"59",name:"Combeferre",label:{normal:{formatter:"Combeferre",show:!1}},symbolSize:21.428574,x:515.2961,y:-46.167564,attributes:{modularity_class:8},value:31.428574,category:8},{id:"60",name:"Prouvaire",label:{normal:{formatter:"Prouvaire",show:!1}},symbolSize:15.942856,x:614.29285,y:-69.3104,attributes:{modularity_class:8},value:25.942856,category:8},{id:"61",name:"Feuilly",label:{normal:{formatter:"Feuilly",show:!1}},symbolSize:21.428574,x:550.1917,y:-128.17537,attributes:{modularity_class:8},value:31.428574,category:8},{id:"62",name:"Courfeyrac",label:{normal:{formatter:"Courfeyrac",show:!1}},symbolSize:26.91429,x:436.17184,y:-12.7286825,attributes:{modularity_class:8},value:36.91429,category:8},{id:"63",name:"Bahorel",label:{normal:{formatter:"Bahorel",show:!1}},symbolSize:24.17143,x:602.55225,y:16.421427,attributes:{modularity_class:8},value:34.17143,category:8},{id:"64",name:"Bossuet",label:{normal:{formatter:"Bossuet",show:!1}},symbolSize:26.91429,x:455.81955,y:-115.45826,attributes:{modularity_class:8},value:36.91429,category:8},{id:"65",name:"Joly",label:{normal:{formatter:"Joly",show:!1}},symbolSize:24.17143,x:516.40784,y:47.242233,attributes:{modularity_class:8},value:34.17143,category:8},{id:"66",name:"Grantaire",label:{normal:{formatter:"Grantaire",show:!1}},symbolSize:28.685715,x:646.4313,y:-151.06331,attributes:{modularity_class:8},value:28.685715,category:8},{id:"67",name:"MotherPlutarch",label:{normal:{formatter:"MotherPlutarch",show:!1}},symbolSize:4,x:668.9568,y:204.65488,attributes:{modularity_class:8},value:4,category:8},{id:"68",name:"Gueulemer",label:{normal:{formatter:"Gueulemer",show:!1}},symbolSize:28.685715,x:78.4799,y:-347.15146,attributes:{modularity_class:7},value:28.685715,category:7},{id:"69",name:"Babet",label:{normal:{formatter:"Babet",show:!1}},symbolSize:28.685715,x:150.35959,y:-298.50797,attributes:{modularity_class:7},value:28.685715,category:7},{id:"70",name:"Claquesous",label:{normal:{formatter:"Claquesous",show:!1}},symbolSize:28.685715,x:137.3717,y:-410.2809,attributes:{modularity_class:7},value:28.685715,category:7},{id:"71",name:"Montparnasse",label:{normal:{formatter:"Montparnasse",show:!1}},symbolSize:25.942856,x:234.87747,y:-400.85983,attributes:{modularity_class:7},value:25.942856,category:7},{id:"72",name:"Toussaint",label:{normal:{formatter:"Toussaint",show:!1}},symbolSize:9.485714,x:40.942253,y:113.78272,attributes:{modularity_class:1},value:9.485714,category:1},{id:"73",name:"Child1",label:{normal:{formatter:"Child1",show:!1}},symbolSize:6.742859,x:437.939,y:291.58234,attributes:{modularity_class:8},value:6.742859,category:8},{id:"74",name:"Child2",label:{normal:{formatter:"Child2",show:!1}},symbolSize:6.742859,x:466.04922,y:283.3606,attributes:{modularity_class:8},value:6.742859,category:8},{id:"75",name:"Brujon",label:{normal:{formatter:"Brujon",show:!1}},symbolSize:20.457146,x:238.79364,y:-314.06345,attributes:{modularity_class:7},value:20.457146,category:7},{id:"76",name:"MmeHucheloup",label:{normal:{formatter:"MmeHucheloup",show:!1}},symbolSize:20.457146,x:712.18353,y:4.8131495,attributes:{modularity_class:8},value:20.457146,category:8}],links:[{id:"0",name:null,source:"1",target:"0"},{id:"1",name:null,source:"2",target:"0"},{id:"2",name:null,source:"3",target:"0"},{id:"3",name:null,source:"3",target:"2"},{id:"4",name:null,source:"4",target:"0"},{id:"5",name:null,source:"5",target:"0"},{id:"6",name:null,source:"6",target:"0"},{id:"7",name:null,source:"7",target:"0"},{id:"8",name:null,source:"8",target:"0"},{id:"9",name:null,source:"9",target:"0"},{id:"13",name:null,source:"11",target:"0"},{id:null,name:null,source:"11",target:"2"},{id:"11",name:null,source:"11",target:"3"},{id:"10",name:null,source:"11",target:"10"},{id:"14",name:null,source:"12",target:"11"},{id:"15",name:null,source:"13",target:"11"},{id:"16",name:null,source:"14",target:"11"},{id:"17",name:null,source:"15",target:"11"},{id:"18",name:null,source:"17",target:"16"},{id:"19",name:null,source:"18",target:"16"},{id:"20",name:null,source:"18",target:"17"},{id:"21",name:null,source:"19",target:"16"},{id:"22",name:null,source:"19",target:"17"},{id:"23",name:null,source:"19",target:"18"},{id:"24",name:null,source:"20",target:"16"},{id:"25",name:null,source:"20",target:"17"},{id:"26",name:null,source:"20",target:"18"},{id:"27",name:null,source:"20",target:"19"},{id:"28",name:null,source:"21",target:"16"},{id:"29",name:null,source:"21",target:"17"},{id:"30",name:null,source:"21",target:"18"},{id:"31",name:null,source:"21",target:"19"},{id:"32",name:null,source:"21",target:"20"},{id:"33",name:null,source:"22",target:"16"},{id:"34",name:null,source:"22",target:"17"},{id:"35",name:null,source:"22",target:"18"},{id:"36",name:null,source:"22",target:"19"},{id:"37",name:null,source:"22",target:"20"},{id:"38",name:null,source:"22",target:"21"},{id:"47",name:null,source:"23",target:"11"},{id:"46",name:null,source:"23",target:"12"},{id:"39",name:null,source:"23",target:"16"},{id:"40",name:null,source:"23",target:"17"},{id:"41",name:null,source:"23",target:"18"},{id:"42",name:null,source:"23",target:"19"},{id:"43",name:null,source:"23",target:"20"},{id:"44",name:null,source:"23",target:"21"},{id:"45",name:null,source:"23",target:"22"},{id:null,name:null,source:"24",target:"11"},{id:"48",name:null,source:"24",target:"23"},{id:"52",name:null,source:"25",target:"11"},{id:"51",name:null,source:"25",target:"23"},{id:"50",name:null,source:"25",target:"24"},{id:null,name:null,source:"26",target:"11"},{id:null,name:null,source:"26",target:"16"},{id:"53",name:null,source:"26",target:"24"},{id:"56",name:null,source:"26",target:"25"},{id:"57",name:null,source:"27",target:"11"},{id:"58",name:null,source:"27",target:"23"},{id:null,name:null,source:"27",target:"24"},{id:"59",name:null,source:"27",target:"25"},{id:"61",name:null,source:"27",target:"26"},{id:"62",name:null,source:"28",target:"11"},{id:"63",name:null,source:"28",target:"27"},{id:"66",name:null,source:"29",target:"11"},{id:"64",name:null,source:"29",target:"23"},{id:"65",name:null,source:"29",target:"27"},{id:"67",name:null,source:"30",target:"23"},{id:null,name:null,source:"31",target:"11"},{id:null,name:null,source:"31",target:"23"},{id:null,name:null,source:"31",target:"27"},{id:"68",name:null,source:"31",target:"30"},{id:"72",name:null,source:"32",target:"11"},{id:"73",name:null,source:"33",target:"11"},{id:"74",name:null,source:"33",target:"27"},{id:"75",name:null,source:"34",target:"11"},{id:"76",name:null,source:"34",target:"29"},{id:"77",name:null,source:"35",target:"11"},{id:null,name:null,source:"35",target:"29"},{id:"78",name:null,source:"35",target:"34"},{id:"82",name:null,source:"36",target:"11"},{id:"83",name:null,source:"36",target:"29"},{id:"80",name:null,source:"36",target:"34"},{id:"81",name:null,source:"36",target:"35"},{id:"87",name:null,source:"37",target:"11"},{id:"88",name:null,source:"37",target:"29"},{id:"84",name:null,source:"37",target:"34"},{id:"85",name:null,source:"37",target:"35"},{id:"86",name:null,source:"37",target:"36"},{id:"93",name:null,source:"38",target:"11"},{id:"94",name:null,source:"38",target:"29"},{id:"89",name:null,source:"38",target:"34"},{id:"90",name:null,source:"38",target:"35"},{id:"91",name:null,source:"38",target:"36"},{id:"92",name:null,source:"38",target:"37"},{id:"95",name:null,source:"39",target:"25"},{id:"96",name:null,source:"40",target:"25"},{id:"97",name:null,source:"41",target:"24"},{id:"98",name:null,source:"41",target:"25"},{id:"101",name:null,source:"42",target:"24"},{id:"100",name:null,source:"42",target:"25"},{id:"99",name:null,source:"42",target:"41"},{id:"102",name:null,source:"43",target:"11"},{id:"103",name:null,source:"43",target:"26"},{id:"104",name:null,source:"43",target:"27"},{id:null,name:null,source:"44",target:"11"},{id:"105",name:null,source:"44",target:"28"},{id:"107",name:null,source:"45",target:"28"},{id:"108",name:null,source:"47",target:"46"},{id:"112",name:null,source:"48",target:"11"},{id:"110",name:null,source:"48",target:"25"},{id:"111",name:null,source:"48",target:"27"},{id:"109",name:null,source:"48",target:"47"},{id:null,name:null,source:"49",target:"11"},{id:"113",name:null,source:"49",target:"26"},{id:null,name:null,source:"50",target:"24"},{id:"115",name:null,source:"50",target:"49"},{id:"119",name:null,source:"51",target:"11"},{id:"118",name:null,source:"51",target:"26"},{id:"117",name:null,source:"51",target:"49"},{id:null,name:null,source:"52",target:"39"},{id:"120",name:null,source:"52",target:"51"},{id:"122",name:null,source:"53",target:"51"},{id:"125",name:null,source:"54",target:"26"},{id:"124",name:null,source:"54",target:"49"},{id:"123",name:null,source:"54",target:"51"},{id:"131",name:null,source:"55",target:"11"},{id:"132",name:null,source:"55",target:"16"},{id:"133",name:null,source:"55",target:"25"},{id:null,name:null,source:"55",target:"26"},{id:"128",name:null,source:"55",target:"39"},{id:"134",name:null,source:"55",target:"41"},{id:"135",name:null,source:"55",target:"48"},{id:"127",name:null,source:"55",target:"49"},{id:"126",name:null,source:"55",target:"51"},{id:"129",name:null,source:"55",target:"54"},{id:"136",name:null,source:"56",target:"49"},{id:"137",name:null,source:"56",target:"55"},{id:null,name:null,source:"57",target:"41"},{id:null,name:null,source:"57",target:"48"},{id:"138",name:null,source:"57",target:"55"},{id:"145",name:null,source:"58",target:"11"},{id:null,name:null,source:"58",target:"27"},{id:"142",name:null,source:"58",target:"48"},{id:"141",name:null,source:"58",target:"55"},{id:"144",name:null,source:"58",target:"57"},{id:"148",name:null,source:"59",target:"48"},{id:"147",name:null,source:"59",target:"55"},{id:null,name:null,source:"59",target:"57"},{id:"146",name:null,source:"59",target:"58"},{id:"150",name:null,source:"60",target:"48"},{id:"151",name:null,source:"60",target:"58"},{id:"152",name:null,source:"60",target:"59"},{id:"153",name:null,source:"61",target:"48"},{id:"158",name:null,source:"61",target:"55"},{id:"157",name:null,source:"61",target:"57"},{id:"154",name:null,source:"61",target:"58"},{id:"156",name:null,source:"61",target:"59"},{id:"155",name:null,source:"61",target:"60"},{id:"164",name:null,source:"62",target:"41"},{id:"162",name:null,source:"62",target:"48"},{id:"159",name:null,source:"62",target:"55"},{id:null,name:null,source:"62",target:"57"},{id:"160",name:null,source:"62",target:"58"},{id:"161",name:null,source:"62",target:"59"},{id:null,name:null,source:"62",target:"60"},{id:"165",name:null,source:"62",target:"61"},{id:null,name:null,source:"63",target:"48"},{id:"174",name:null,source:"63",target:"55"},{id:null,name:null,source:"63",target:"57"},{id:null,name:null,source:"63",target:"58"},{id:"167",name:null,source:"63",target:"59"},{id:null,name:null,source:"63",target:"60"},{id:"172",name:null,source:"63",target:"61"},{id:"169",name:null,source:"63",target:"62"},{id:"184",name:null,source:"64",target:"11"},{id:null,name:null,source:"64",target:"48"},{id:"175",name:null,source:"64",target:"55"},{id:"183",name:null,source:"64",target:"57"},{id:"179",name:null,source:"64",target:"58"},{id:"182",name:null,source:"64",target:"59"},{id:"181",name:null,source:"64",target:"60"},{id:"180",name:null,source:"64",target:"61"},{id:"176",name:null,source:"64",target:"62"},{id:"178",name:null,source:"64",target:"63"},{id:"187",name:null,source:"65",target:"48"},{id:"194",name:null,source:"65",target:"55"},{id:"193",name:null,source:"65",target:"57"},{id:null,name:null,source:"65",target:"58"},{id:"192",name:null,source:"65",target:"59"},{id:null,name:null,source:"65",target:"60"},{id:"190",name:null,source:"65",target:"61"},{id:"188",name:null,source:"65",target:"62"},{id:"185",name:null,source:"65",target:"63"},{id:"186",name:null,source:"65",target:"64"},{id:"200",name:null,source:"66",target:"48"},{id:"196",name:null,source:"66",target:"58"},{id:"197",name:null,source:"66",target:"59"},{id:"203",name:null,source:"66",target:"60"},{id:"202",name:null,source:"66",target:"61"},{id:"198",name:null,source:"66",target:"62"},{id:"201",name:null,source:"66",target:"63"},{id:"195",name:null,source:"66",target:"64"},{id:"199",name:null,source:"66",target:"65"},{id:"204",name:null,source:"67",target:"57"},{id:null,name:null,source:"68",target:"11"},{id:null,name:null,source:"68",target:"24"},{id:"205",name:null,source:"68",target:"25"},{id:"208",name:null,source:"68",target:"27"},{id:null,name:null,source:"68",target:"41"},{id:"209",name:null,source:"68",target:"48"},{id:"213",name:null,source:"69",target:"11"},{id:"214",name:null,source:"69",target:"24"},{id:"211",name:null,source:"69",target:"25"},{id:null,name:null,source:"69",target:"27"},{id:"217",name:null,source:"69",target:"41"},{id:"216",name:null,source:"69",target:"48"},{id:"212",name:null,source:"69",target:"68"},{id:"221",name:null,source:"70",target:"11"},{id:"222",name:null,source:"70",target:"24"},{id:"218",name:null,source:"70",target:"25"},{id:"223",name:null,source:"70",target:"27"},{id:"224",name:null,source:"70",target:"41"},{id:"225",name:null,source:"70",target:"58"},{id:"220",name:null,source:"70",target:"68"},{id:"219",name:null,source:"70",target:"69"},{id:"230",name:null,source:"71",target:"11"},{id:"233",name:null,source:"71",target:"25"},{id:"226",name:null,source:"71",target:"27"},{id:"232",name:null,source:"71",target:"41"},{id:null,name:null,source:"71",target:"48"},{id:"228",name:null,source:"71",target:"68"},{id:"227",name:null,source:"71",target:"69"},{id:"229",name:null,source:"71",target:"70"},{id:"236",name:null,source:"72",target:"11"},{id:"234",name:null,source:"72",target:"26"},{id:"235",name:null,source:"72",target:"27"},{id:"237",name:null,source:"73",target:"48"},{id:"238",name:null,source:"74",target:"48"},{id:"239",name:null,source:"74",target:"73"},{id:"242",name:null,source:"75",target:"25"},{id:"244",name:null,source:"75",target:"41"},{id:null,name:null,source:"75",target:"48"},{id:"241",name:null,source:"75",target:"68"},{id:"240",name:null,source:"75",target:"69"},{id:"245",name:null,source:"75",target:"70"},{id:"246",name:null,source:"75",target:"71"},{id:"252",name:null,source:"76",target:"48"},{id:"253",name:null,source:"76",target:"58"},{id:"251",name:null,source:"76",target:"62"},{id:"250",name:null,source:"76",target:"63"},{id:"247",name:null,source:"76",target:"64"},{id:"248",name:null,source:"76",target:"65"},{id:"249",name:null,source:"76",target:"66"}],categories:[{name:"类目0"},{name:"类目1"},{name:"类目2"},{name:"类目3"},{name:"类目4"},{name:"类目5"},{name:"类目6"},{name:"类目7"},{name:"类目8"}],label:{normal:{position:"right"}},symbol:"circle",itemStyle:{normal:{opacity:.8}},lineStyle:{normal:{curveness:.3}}}]},{title:{text:"热力图"},xAxis:{type:"category",data:["12a","1a","2a","3a","4a","5a","6a","7a","8a","9a","10a","11a","12p"]},yAxis:{type:"category",data:["周六","周五","周四","周三","周二","周一","周日"]},visualMap:{min:1,max:10,calculable:!0},grid:{left:90,right:20,top:40,bottom:40},series:[{name:"热度",type:"heatmap",data:[[0,0,5],[0,1,1],[0,2,3],[0,3,2],[0,4,1],[0,5,4],[0,6,6],[0,7,6],[0,8,4],[0,9,7],[0,10,0],[0,11,2],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,5],[1,5,7],[1,6,9],[1,7,4],[1,8,7],[1,9,9],[1,10,5],[1,11,2],[2,0,7],[2,1,6],[2,2,5],[2,3,5],[2,4,9],[2,5,8],[2,6,0],[2,7,0],[2,8,0],[2,9,4],[2,10,3],[2,11,2],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,3],[3,5,0],[3,6,4],[3,7,5],[3,8,1],[3,9,3],[3,10,5],[3,11,4],[3,12,7],[4,0,6],[4,1,3],[4,2,6],[4,3,0],[4,4,5],[4,5,1],[4,6,0],[4,7,0],[4,8,5],[4,9,2],[4,10,4],[4,11,4],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,8],[5,5,4],[5,6,6],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[6,0,1],[6,1,0],[6,2,8],[6,3,6],[6,4,2],[6,5,0],[6,6,0],[6,7,8],[6,8,5],[6,9,10],[6,10,1],[6,11,0]].map(function(e){return[e[1],e[0],e[2]||"-"]}),label:{normal:{show:!0}}}]},{title:{text:"树图"},series:[{type:"treemap",label:{show:!0,formatter:"{b}"},roam:!1,data:function(){for(var e=[],a=0;a<d;++a){for(var t=[],l=0,r=0,o=Math.ceil(5*Math.random());r<o;++r){for(var n=[],i=0,s=0,m=Math.ceil(3*Math.random());s<m;++s){var u=Math.ceil(100*Math.random());n.push({value:u,name:a+1+"-"+(r+1)+"-"+(s+1),path:a+1+"/"+(a+1)+"-"+(r+1)+"/"+(a+1)+"-"+(r+1)+"-"+(s+1)}),i+=u}t.push({value:i,name:a+1+"-"+(r+1),path:a+1+"/"+(a+1)+"-"+(r+1),children:n}),l+=i}e.push({value:l,name:""+(a+1),path:""+(a+1),children:t})}return e}()}]}],h=0;h<g.length;++h)g[h].legend=g[h].legend||r,g[h].tooltip=g[h].tooltip||n,g[h].grid=g[h].grid||s;return g}Vue.component("config-color-list",VueColorListConfig),function(){var o=1,e=[{name:"vintage",background:"#fef8ef",theme:["#d87c7c","#919e8b","#d7ab82","#6e7074","#61a0a8","#efa18d","#787464","#cc7e63","#724e58","#4b565b"]},{name:"dark",background:"#333",theme:["#dd6b66","#759aa0","#e69d87","#8dc1a9","#ea7e53","#eedd78","#73a373","#73b9bc","#7289ab","#91ca8c","#f49f42"]},{name:"westeros",background:"transparent",theme:["#516b91","#59c4e6","#edafda","#93b7e3","#a5e7f0","#cbb0e3"]},{name:"essos",background:"rgba(242,234,191,0.15)",theme:["#893448","#d95850","#eb8146","#ffb248","#f2d643","#ebdba4"]},{name:"wonderland",background:"transparent",theme:["#4ea397","#22c3aa","#7bd9a5","#d0648a","#f58db2","#f2b3c9"]},{name:"walden",background:"rgba(252,252,252,0)",theme:["#3fb1e3","#6be6c1","#626c91","#a0a7e6","#c4ebad","#96dee8"]},{name:"chalk",background:"#293441",theme:["#fc97af","#87f7cf","#f7f494","#72ccff","#f7c5a0","#d4a4eb","#d2f5a6","#76f2f2"]},{name:"infographic",background:"transparent",theme:["#C1232B","#27727B","#FCCE10","#E87C25","#B5C334","#FE8463","#9BCA63","#FAD860","#F3A43B","#60C0DD","#D7504B","#C6E579","#F4E001","#F0805A","#26C0C0"]},{name:"macarons",background:"transparent",theme:["#2ec7c9","#b6a2de","#5ab1ef","#ffb980","#d87a80","#8d98b3","#e5cf0d","#97b552","#95706d","#dc69aa","#07a2a4","#9a7fd1","#588dd5","#f5994e","#c05050","#59678c","#c9ab00","#7eb00a","#6f5553","#c14089"]},{name:"roma",background:"transparent",theme:["#E01F54","#001852","#f5e8c8","#b8d2c7","#c6b38e","#a4d8c2","#f3d999","#d3758f","#dcc392","#2e4783","#82b6e9","#ff6347","#a092f1","#0a915d","#eaf889","#6699FF","#ff6666","#3cb371","#d5b158","#38b6b6"]},{name:"shine",background:"transparent",theme:["#c12e34","#e6b600","#0098d9","#2b821d","#005eaa","#339ca8","#cda819","#32a487"]},{name:"purple-passion",background:"rgba(91,92,110,1)",theme:["#8a7ca8","#e098c7","#8fd3e8","#71669e","#cc70af","#7cb4cc"]}],n={seriesCnt:3,backgroundColor:"rgba(0, 0, 0, 0)",titleColor:"#333",subtitleColor:"#aaa",textColorShow:!1,textColor:"#333",markTextColor:"#eee",color:["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],borderColor:"#ccc",borderWidth:0,visualMapColor:["#bf444c","#d88273","#f6efa6"],legendTextColor:"#333",kColor:"#c23531",kColor0:"#314656",kBorderColor:"#c23531",kBorderColor0:"#314656",kBorderWidth:1,lineWidth:2,symbolSize:4,symbol:"emptyCircle",symbolBorderWidth:1,lineSmooth:!1,graphLineWidth:1,graphLineColor:"#aaa",mapLabelColor:"#000",mapLabelColorE:"rgb(100,0,0)",mapBorderColor:"#444",mapBorderColorE:"#444",mapBorderWidth:.5,mapBorderWidthE:1,mapAreaColor:"#eee",mapAreaColorE:"rgba(255,215,0,0.8)",axes:function(){for(var e=["all","category","value","log","time"],a=["通用","类目","数值","对数","时间"],t=[],l=0;l<e.length;++l)t.push({type:e[l],name:a[l]+"坐标轴",axisLineShow:!0,axisLineColor:"#333",axisTickShow:!0,axisTickColor:"#333",axisLabelShow:!0,axisLabelColor:"#333",splitLineShow:"category"!==e[l],splitLineColor:["#ccc"],splitAreaShow:!1,splitAreaColor:["rgba(250,250,250,0.3)","rgba(200,200,200,0.3)"]});return t}(),axisSeperateSetting:!0,axis:null,toolboxColor:"#999",toolboxEmphasisColor:"#666",tooltipAxisColor:"#ccc",tooltipAxisWidth:1,timelineLineColor:"#293c55",timelineLineWidth:1,timelineItemColor:"#293c55",timelineItemColorE:"#a9334c",timelineCheckColor:"#e43c59",timelineCheckBorderColor:"rgba(194,53,49, 0.5)",timelineItemBorderWidth:1,timelineControlColor:"#293c55",timelineControlBorderColor:"#293c55",timelineControlBorderWidth:.5,timelineLabelColor:"#293c55",datazoomBackgroundColor:"rgba(47,69,84,0)",datazoomDataColor:"rgba(47,69,84,0.3)",datazoomFillColor:"rgba(167,183,204,0.4)",datazoomHandleColor:"#a7b7cc",datazoomHandleWidth:"100",datazoomLabelColor:"#333"};n.axis=[n.axes[0]];for(var a=_.debounce(r,200),t=0;t<e.length;++t)p(t,!0);var i,s=new Vue({el:"#content",data:{theme:f(n),themeName:"customed",charts:[],options:[],isPauseChartUpdating:!1,copyKbd:0<navigator.userAgent.indexOf("Mac OS X")?"cmd":"ctrl",downloadable:!g()&&!h(),preDefinedThemes:e,loadedThemes:[],chartDisplay:{background:"#fff",title:"#000"}},methods:{updateCharts:r,updateSymbol:function(e){s.theme.symbol=e},selectPreDefinedTheme:function(e){for(var a=0;a<s.loadedThemes.length;++a)if(s.loadedThemes[a].id===e)return void l(s.loadedThemes[a].data);p(e,!1)},useTheme:function(){_hmt.push(["_trackEvent","theme-builder","useTheme",s.themeName]),$("#js-code").text(b()),$("#json-code").text(JSON.stringify(m(!0),null,"    ")),hljs.highlightBlock($("#js-code")[0]),hljs.highlightBlock($("#json-code")[0])},downloadThemeJson:function(){_hmt.push(["_trackEvent","theme-builder","download","json"]),d(m(!0),(s.themeName||"customed")+".json")},downloadThemeJs:function(){var e,a;_hmt.push(["_trackEvent","theme-builder","download","js"]),e=b(),a=(s.themeName||"customed")+".js",c(e,a,"js")},copyThemeJson:function(){y("json")},copyThemeJs:function(){y("js")},newTheme:function(){this.$set("theme",f(n)),this.$set("themeName","customed"),s.axisSeperateSettingChanges()},exportJson:function(){var e=f(s.theme);delete e.axis,d({version:o,themeName:s.themeName,theme:e},(s.themeName||"customed")+".project.json")},importJson:function(){$("#input-file").trigger("click")},importFileChanged:function(e){var a,t;e.target.files&&(".json"===(a=e.target.files[0]).name.slice(a.name.lastIndexOf("."))?((t=new FileReader).onload=function(){l(this.result)},t.onerror=function(e){alert("打开文件失败!"),console.error(e)},t.readAsText(a),$("#input-file").val("")):alert("非法后缀!请使用本网站导出的 *.json 文件。"))},axisSeperateSettingChanges:function(){s.theme.axisSeperateSetting?s.theme.axis=s.theme.axes:s.theme.axis=[s.theme.axes[0]]}}});function l(e){try{var a=JSON.parse(e);if(void 0===a.themeName&&void 0===a.version)return void alert("请使用本网站“导出配置”的 JSON 文件,而不是下载的主题文件。");if(s.$set("themeName",a.themeName||"customed"),a.version<o){var t=[],l=a.theme;for(var r in n)"axis"!==r&&(void 0!==a.theme[r]?l.attr=a.theme[r]:t.push(a.theme.attr));0<t.length?alert("导入的主题版本较低,有"+t.length+"个属性未被设置,现已使用默认值。"):console.warn("导入的主题版本较低,可能有部分属性未生效。")}s.$set("theme",a.theme),s.axisSeperateSettingChanges()}catch(e){alert("非法 JSON 格式!请使用本网站导出的 *.json 文件。"),console.error(e)}}function m(e){var a="path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072 c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363 c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417 c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827 C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12.646,2.053,18.738c4.593,22.785,15.398,41.367,32.558,55.344 c15.43,12.773,29.901,18.023,43.362,16.981c7.074-0.561,13.624-3.977,19.685-10.192c10.534,5.49,20.391,8.217,29.561,8.203 c9.856-0.012,20.236-2.953,31.125-8.898c6.227,6.692,12.966,10.346,20.211,10.933c13.795,1.073,28.614-4.111,44.377-16.84 c17.49-14.104,28.043-32.79,31.796-55.485c0.836-5.624,1.272-11.292,1.272-16.966C255.998,115.814,249.707,96.601,237.062,81.761z  M54.795,97.7l40.661,14.496c-4.402,8.811-10.766,13.219-19.06,13.219c-2.542,0-4.917-0.419-7.122-1.274 C58.103,118.38,53.263,109.572,54.795,97.7z M150.613,185.396l-9.156-8.389l-7.619,12.951c-3.391,0.341-6.615,0.514-9.665,0.514 c-4.401,0-8.635-0.263-12.708-0.777l-8.634-14.973l-9.151,9.909c-4.91-2.717-9.15-5.856-12.708-9.413 c-8.81-8.295-13.384-17.959-13.727-28.97c2.877,1.692,7.427,3.461,13.675,5.308l10.636,13.629l9.44-9.852 c4.734,0.702,9.234,1.12,13.466,1.275l10.689,11.498l9.671-11.949c3.559-0.173,7.285-0.515,11.182-1.01l9.924,10.159l10.933-14.227 c5.931-1.351,11.196-2.798,15.771-4.323C179.747,163.538,169.068,176.414,150.613,185.396z M175.258,124.907 c-2.209,0.849-4.66,1.273-7.369,1.273c-8.134,0-14.489-4.415-19.052-13.224l40.905-14.477 C191.105,110.331,186.273,119.141,175.258,124.907z",t={itemStyle:{normal:{borderWidth:s.theme.symbolBorderWidth}},lineStyle:{normal:{width:s.theme.lineWidth}},symbolSize:s.theme.symbolSize,symbol:s.theme.symbol,smooth:s.theme.lineSmooth},l={itemStyle:{normal:{borderWidth:s.theme.borderWidth,borderColor:s.theme.borderColor},emphasis:{borderWidth:s.theme.borderWidth,borderColor:s.theme.borderColor}}};"halloween"===s.themeName&&(t.symbol=a,l.symbol=a);var r,o={itemStyle:{normal:{areaColor:s.theme.mapAreaColor,borderColor:s.theme.mapBorderColor,borderWidth:s.theme.mapBorderWidth},emphasis:{areaColor:s.theme.mapAreaColorE,borderColor:s.theme.mapBorderColorE,borderWidth:s.theme.mapBorderWidthE}},label:{normal:{textStyle:{color:s.theme.mapLabelColor}},emphasis:{textStyle:{color:s.theme.mapLabelColorE}}}};return{color:s.theme.color,backgroundColor:e?s.theme.backgroundColor:"transparent",textStyle:s.theme.textColorShow?{color:s.theme.textColor}:{},title:{textStyle:{color:s.theme.titleColor},subtextStyle:{color:s.theme.subtitleColor}},line:t,radar:t,bar:{itemStyle:{normal:{barBorderWidth:s.theme.borderWidth,barBorderColor:s.theme.borderColor},emphasis:{barBorderWidth:s.theme.borderWidth,barBorderColor:s.theme.borderColor}}},pie:l,scatter:l,boxplot:l,parallel:l,sankey:l,funnel:l,gauge:l,candlestick:{itemStyle:{normal:{color:s.theme.kColor,color0:s.theme.kColor0,borderColor:s.theme.kBorderColor,borderColor0:s.theme.kBorderColor0,borderWidth:s.theme.kBorderWidth}}},graph:((r=f(t)).color=s.theme.color,r.lineStyle={normal:{width:s.theme.graphLineWidth,color:s.theme.graphLineColor}},r.label={normal:{textStyle:{color:s.theme.markTextColor}}},r.itemStyle.normal.borderWidth=s.theme.borderWidth,r.itemStyle.normal.borderColor=s.theme.borderColor,r),map:o,geo:o,categoryAxis:n(1),valueAxis:n(2),logAxis:n(3),timeAxis:n(4),toolbox:{iconStyle:{normal:{borderColor:s.theme.toolboxColor},emphasis:{borderColor:s.theme.toolboxEmphasisColor}}},legend:{textStyle:{color:s.theme.legendTextColor}},tooltip:{axisPointer:{lineStyle:{color:s.theme.tooltipAxisColor,width:s.theme.tooltipAxisWidth},crossStyle:{color:s.theme.tooltipAxisColor,width:s.theme.tooltipAxisWidth}}},timeline:{lineStyle:{color:s.theme.timelineLineColor,width:s.theme.timelineLineWidth},itemStyle:{normal:{color:s.theme.timelineItemColor,borderWidth:s.theme.timelineItemBorderWidth},emphasis:{color:s.theme.timelineItemColorE}},controlStyle:{normal:{color:s.theme.timelineControlColor,borderColor:s.theme.timelineControlBorderColor,borderWidth:s.theme.timelineControlBorderWidth},emphasis:{color:s.theme.timelineControlColor,borderColor:s.theme.timelineControlBorderColor,borderWidth:s.theme.timelineControlBorderWidth}},checkpointStyle:{color:s.theme.timelineCheckColor,borderColor:s.theme.timelineCheckBorderColor},label:{normal:{textStyle:{color:s.theme.timelineLabelColor}},emphasis:{textStyle:{color:s.theme.timelineLabelColor}}}},visualMap:{color:s.theme.visualMapColor},dataZoom:{backgroundColor:s.theme.datazoomBackgroundColor,dataBackgroundColor:s.theme.datazoomDataColor,fillerColor:s.theme.datazoomFillColor,handleColor:s.theme.datazoomHandleColor,handleSize:s.theme.datazoomHandleWidth+"%",textStyle:{color:s.theme.datazoomLabelColor}},markPoint:{label:{normal:{textStyle:{color:s.theme.markTextColor}},emphasis:{textStyle:{color:s.theme.markTextColor}}}}};function n(e){return s.theme.axisSeperateSetting||(e=0),{axisLine:{show:s.theme.axes[e].axisLineShow,lineStyle:{color:s.theme.axes[e].axisLineColor}},axisTick:{show:s.theme.axes[e].axisTickShow,lineStyle:{color:s.theme.axes[e].axisTickColor}},axisLabel:{show:s.theme.axes[e].axisLabelShow,textStyle:{color:s.theme.axes[e].axisLabelColor}},splitLine:{show:s.theme.axes[e].splitLineShow,lineStyle:{color:s.theme.axes[e].splitLineColor}},splitArea:{show:s.theme.axes[e].splitAreaShow,areaStyle:{color:s.theme.axes[e].splitAreaColor}}}}}function u(e,a,t){var l,r,o=$(".ec-panel").eq(e);o.length&&((l=echarts.getInstanceByDom(o[0]))&&l.dispose(),(l=echarts.init(o[0],"customed")).setOption(a[e]),(r=e+1)===$(".ec-panel").length&&(r=0),r!==t&&(i=setTimeout(function(){u(r,a,t)},150)))}function r(){if(!s.isPauseChartUpdating){echarts.registerTheme("customed",m(!1));var e=getOptions(s);i&&clearTimeout(i);for(var a=$(".ec-panel").length,t=!1,l=0;l<a;++l){var r=$(".ec-panel").eq(l);if(0<r.offset().top+r.height()){u(l,e,l),t=!0;break}}t||u(0,e),s.chartDisplay.background=s.theme.backgroundColor,s.chartDisplay.title=s.theme.titleColor}}function d(e,a){c(JSON.stringify(e,null,"    "),a,"json")}function c(a,e,t){if(0<navigator.userAgent.indexOf("Safari")&&navigator.userAgent.indexOf("Chrome")<0)window.open("data:text/plain;charset=utf-8,"+encodeURIComponent(a));else try{var l=new Blob([a],{type:t});saveAs(l,e)}catch(e){console.error(e),window.open("data:text/plain;charset=utf-8,"+encodeURIComponent(a))}}function g(){return 0<navigator.userAgent.indexOf("MSIE")}function h(){return 0<navigator.userAgent.indexOf("Trident")}function b(){var e=(e=JSON.stringify(m(!0),null,"    ")).split("\n").join("\n    ");return"(function (root, factory) {\n    if (typeof define === 'function' && define.amd) {\n        // AMD. Register as an anonymous module.\n        define(['exports', 'echarts'], factory);\n    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {\n        // CommonJS\n        factory(exports, require('echarts'));\n    } else {\n        // Browser globals\n        factory({}, root.echarts);\n    }\n}(this, function (exports, echarts) {\n    var log = function (msg) {\n        if (typeof console !== 'undefined') {\n            console && console.error && console.error(msg);\n        }\n    };\n    if (!echarts) {\n        log('ECharts is not Loaded');\n        return;\n    }\n    echarts.registerTheme('"+s.themeName+"', "+e+");\n}));\n"}function y(e){var a,t;function l(e){$("#"+e).fadeIn(),setTimeout(function(){$("#"+e).fadeOut()},1e4)}window.getSelection?((t=document.createRange()).selectNode($("#"+e+"-code")[0]),(a=window.getSelection()).removeAllRanges(),a.addRange(t)):document.selection&&((t=document.body.createTextRange()).moveToElementText($("#"+e+"-code")[0]),t.select()),$(".code-btn label").hide(),g()||h()||!document.execCommand("copy")?l("copy-"+e+"-fail"):(l("copy-"+e+"-success"),window.getSelection?window.getSelection().removeAllRanges():document.selection.empty())}function f(e){return $.extend(!0,{},e)}function p(a,t){$.ajax({url:"./theme-builder/themes/"+e[a].name+".json",dataType:"text",success:function(e){s.loadedThemes.push({id:a,data:e}),t||l(e)}})}s.$watch("theme",a,{deep:!0}),s.axisSeperateSettingChanges()}();
\ No newline at end of file
diff --git a/zh/theme-builder/themes/chalk.json b/zh/theme-builder/themes/chalk.json
index 54ab33c..eb59ac5 100644
--- a/zh/theme-builder/themes/chalk.json
+++ b/zh/theme-builder/themes/chalk.json
@@ -145,7 +145,7 @@
         ],
         "axisSeperateSetting": false,
         "toolboxColor": "#999999",
-        "toolboxEmpasisColor": "#666666",
+        "toolboxEmphasisColor": "#666666",
         "tooltipAxisColor": "#cccccc",
         "tooltipAxisWidth": 1,
         "timelineLineColor": "#87f7cf",
@@ -166,4 +166,4 @@
         "datazoomHandleWidth": "100",
         "datazoomLabelColor": "#333333"
     }
-}
\ No newline at end of file
+}
diff --git a/zh/theme-builder/themes/dark.json b/zh/theme-builder/themes/dark.json
index 07f8f2a..25dc579 100644
--- a/zh/theme-builder/themes/dark.json
+++ b/zh/theme-builder/themes/dark.json
@@ -148,7 +148,7 @@
         ],
         "axisSeperateSetting": false,
         "toolboxColor": "#999",
-        "toolboxEmpasisColor": "#666",
+        "toolboxEmphasisColor": "#666",
         "tooltipAxisColor": "#eeeeee",
         "tooltipAxisWidth": "1",
         "timelineLineColor": "#eeeeee",
@@ -169,4 +169,4 @@
         "datazoomHandleWidth": "100",
         "datazoomLabelColor": "#eeeeee"
     }
-}
\ No newline at end of file
+}
diff --git a/zh/theme-builder/themes/default.json b/zh/theme-builder/themes/default.json
index 8401f30..d4d2ac8 100644
--- a/zh/theme-builder/themes/default.json
+++ b/zh/theme-builder/themes/default.json
@@ -149,7 +149,7 @@
         ],
         "axisSeperateSetting": true,
         "toolboxColor": "#999999",
-        "toolboxEmpasisColor": "#666666",
+        "toolboxEmphasisColor": "#666666",
         "tooltipAxisColor": "#cccccc",
         "tooltipAxisWidth": 1,
         "timelineLineColor": "#293c55",
diff --git a/zh/theme-builder/themes/essos.json b/zh/theme-builder/themes/essos.json
index 4dad4b7..ece0814 100644
--- a/zh/theme-builder/themes/essos.json
+++ b/zh/theme-builder/themes/essos.json
@@ -147,7 +147,7 @@
         ],
         "axisSeperateSetting": false,
         "toolboxColor": "#999",
-        "toolboxEmpasisColor": "#666",
+        "toolboxEmphasisColor": "#666",
         "tooltipAxisColor": "#ccc",
         "tooltipAxisWidth": 1,
         "timelineLineColor": "#893448",
@@ -168,4 +168,4 @@
         "datazoomHandleWidth": "100",
         "datazoomLabelColor": "#333"
     }
-}
\ No newline at end of file
+}
diff --git a/zh/theme-builder/themes/halloween.json b/zh/theme-builder/themes/halloween.json
index 6c32f62..7766c49 100644
--- a/zh/theme-builder/themes/halloween.json
+++ b/zh/theme-builder/themes/halloween.json
@@ -143,7 +143,7 @@
         ],
         "axisSeperateSetting": false,
         "toolboxColor": "#999999",
-        "toolboxEmpasisColor": "#666666",
+        "toolboxEmphasisColor": "#666666",
         "tooltipAxisColor": "#cccccc",
         "tooltipAxisWidth": 1,
         "timelineLineColor": "#ffaf51",
@@ -164,4 +164,4 @@
         "datazoomHandleWidth": "100",
         "datazoomLabelColor": "#999999"
     }
-}
\ No newline at end of file
+}
diff --git a/zh/theme-builder/themes/infographic.json b/zh/theme-builder/themes/infographic.json
index 4f564ec..2268bbd 100644
--- a/zh/theme-builder/themes/infographic.json
+++ b/zh/theme-builder/themes/infographic.json
@@ -152,7 +152,7 @@
         ],
         "axisSeperateSetting": true,
         "toolboxColor": "#c1232b",
-        "toolboxEmpasisColor": "#e87c25",
+        "toolboxEmphasisColor": "#e87c25",
         "tooltipAxisColor": "#27727b",
         "tooltipAxisWidth": 1,
         "timelineLineColor": "#293c55",
diff --git a/zh/theme-builder/themes/macarons.json b/zh/theme-builder/themes/macarons.json
index 4122f30..d695cee 100644
--- a/zh/theme-builder/themes/macarons.json
+++ b/zh/theme-builder/themes/macarons.json
@@ -156,7 +156,7 @@
         ],
         "axisSeperateSetting": true,
         "toolboxColor": "#2ec7c9",
-        "toolboxEmpasisColor": "#18a4a6",
+        "toolboxEmphasisColor": "#18a4a6",
         "tooltipAxisColor": "#008acd",
         "tooltipAxisWidth": "1",
         "timelineLineColor": "#008acd",
diff --git a/zh/theme-builder/themes/purple-passion.json b/zh/theme-builder/themes/purple-passion.json
index 95862bb..44a7fb2 100644
--- a/zh/theme-builder/themes/purple-passion.json
+++ b/zh/theme-builder/themes/purple-passion.json
@@ -145,7 +145,7 @@
         ],
         "axisSeperateSetting": false,
         "toolboxColor": "#999",
-        "toolboxEmpasisColor": "#666",
+        "toolboxEmphasisColor": "#666",
         "tooltipAxisColor": "#ccc",
         "tooltipAxisWidth": 1,
         "timelineLineColor": "#8fd3e8",
@@ -166,4 +166,4 @@
         "datazoomHandleWidth": "100",
         "datazoomLabelColor": "#333"
     }
-}
\ No newline at end of file
+}
diff --git a/zh/theme-builder/themes/roma.json b/zh/theme-builder/themes/roma.json
index 23796c8..ab258c9 100644
--- a/zh/theme-builder/themes/roma.json
+++ b/zh/theme-builder/themes/roma.json
@@ -157,7 +157,7 @@
         ],
         "axisSeperateSetting": true,
         "toolboxColor": "#999999",
-        "toolboxEmpasisColor": "#666666",
+        "toolboxEmphasisColor": "#666666",
         "tooltipAxisColor": "#cccccc",
         "tooltipAxisWidth": 1,
         "timelineLineColor": "#293c55",
diff --git a/zh/theme-builder/themes/shine.json b/zh/theme-builder/themes/shine.json
index 7f2cd7d..9c30675 100644
--- a/zh/theme-builder/themes/shine.json
+++ b/zh/theme-builder/themes/shine.json
@@ -139,7 +139,7 @@
         ],
         "axisSeperateSetting": true,
         "toolboxColor": "#06467c",
-        "toolboxEmpasisColor": "#4187c2",
+        "toolboxEmphasisColor": "#4187c2",
         "tooltipAxisColor": "#cccccc",
         "tooltipAxisWidth": 1,
         "timelineLineColor": "#005eaa",
diff --git a/zh/theme-builder/themes/vintage.json b/zh/theme-builder/themes/vintage.json
index ae4477c..2e29b8f 100644
--- a/zh/theme-builder/themes/vintage.json
+++ b/zh/theme-builder/themes/vintage.json
@@ -148,7 +148,7 @@
         ],
         "axisSeperateSetting": true,
         "toolboxColor": "#999999",
-        "toolboxEmpasisColor": "#666666",
+        "toolboxEmphasisColor": "#666666",
         "tooltipAxisColor": "#cccccc",
         "tooltipAxisWidth": 1,
         "timelineLineColor": "#293c55",
diff --git a/zh/theme-builder/themes/walden.json b/zh/theme-builder/themes/walden.json
index a16cf09..ce6f8ee 100644
--- a/zh/theme-builder/themes/walden.json
+++ b/zh/theme-builder/themes/walden.json
@@ -143,7 +143,7 @@
         ],
         "axisSeperateSetting": false,
         "toolboxColor": "#999999",
-        "toolboxEmpasisColor": "#666666",
+        "toolboxEmphasisColor": "#666666",
         "tooltipAxisColor": "#cccccc",
         "tooltipAxisWidth": 1,
         "timelineLineColor": "#626c91",
@@ -164,4 +164,4 @@
         "datazoomHandleWidth": "100",
         "datazoomLabelColor": "#999999"
     }
-}
\ No newline at end of file
+}
diff --git a/zh/theme-builder/themes/westeros.json b/zh/theme-builder/themes/westeros.json
index 2ea2797..5b6fbfb 100644
--- a/zh/theme-builder/themes/westeros.json
+++ b/zh/theme-builder/themes/westeros.json
@@ -144,7 +144,7 @@
         ],
         "axisSeperateSetting": false,
         "toolboxColor": "#999",
-        "toolboxEmpasisColor": "#666",
+        "toolboxEmphasisColor": "#666",
         "tooltipAxisColor": "#ccc",
         "tooltipAxisWidth": 1,
         "timelineLineColor": "#8fd3e8",
@@ -165,4 +165,4 @@
         "datazoomHandleWidth": "100",
         "datazoomLabelColor": "#333"
     }
-}
\ No newline at end of file
+}
diff --git a/zh/theme-builder/themes/wonderland.json b/zh/theme-builder/themes/wonderland.json
index 7932361..0db8e0e 100644
--- a/zh/theme-builder/themes/wonderland.json
+++ b/zh/theme-builder/themes/wonderland.json
@@ -144,7 +144,7 @@
         ],
         "axisSeperateSetting": false,
         "toolboxColor": "#999999",
-        "toolboxEmpasisColor": "#666666",
+        "toolboxEmphasisColor": "#666666",
         "tooltipAxisColor": "#cccccc",
         "tooltipAxisWidth": 1,
         "timelineLineColor": "#4ea397",
@@ -165,4 +165,4 @@
         "datazoomHandleWidth": "100",
         "datazoomLabelColor": "#999999"
     }
-}
\ No newline at end of file
+}
diff --git a/zh/tutorial.html b/zh/tutorial.html
index 8c15578..6eac81e 100644
--- a/zh/tutorial.html
+++ b/zh/tutorial.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1597861067124"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts-www.cdn.bcebos.com/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts-www.cdn.bcebos.com/zh/css/main.css?_v_=1598523334942"><script>window.EC_WWW_LANG = 'zh';
 </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
     var el = document.createElement('style');
     el.innerHTML = ''
@@ -9,8 +9,8 @@
 </script><title>Documentation - Apache ECharts(incubating)</title><style>html, body {
     /* position: sticky should not have overflow parents.*/
     overflow-x: hidden;
-}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts-www.cdn.bcebos.com/zh/css/doc-bundle.css?_v_=1597861067124"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts-www.cdn.bcebos.com/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-doc-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1597861067124"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts-www.cdn.bcebos.com/zh/js/doc-bundle.js?_v_=1597861067124"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts-www.cdn.bcebos.com';
+}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts-www.cdn.bcebos.com/zh/css/doc-bundle.css?_v_=1598523334942"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts-www.cdn.bcebos.com/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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://echarts-www.cdn.bcebos.com/zh/images/logo.png?_v_=undefined" 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></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/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/incubator-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/incubator-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">其他<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/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><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts-www.cdn.bcebos.com/zh/images/apache-incubator-white.png?_v_=undefined" width="18"></a></li></ul></div></div></nav><div class="page-main"><div id="ec-doc-main"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts-www.cdn.bcebos.com/zh/js/common.js?_v_=1598523334942"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts-www.cdn.bcebos.com/zh/js/doc-bundle.js?_v_=1598523334942"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts-www.cdn.bcebos.com';
 </script><script type="text/javascript">window.globalArgsExtra = {
     baseUrl: 'documents/tutorial-parts',
     docType: 'tutorial',
@@ -19,7 +19,7 @@
 if (window.EC_WWW_CDN_PAY_ROOT) {
     window.globalArgsExtra.cdnRoot = window.EC_WWW_CDN_PAY_ROOT + '/zh/' + window.globalArgsExtra.baseUrl
 }</script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
-window.globalArgsExtra.version = '1597861067124';
+window.globalArgsExtra.version = '1598523334942';
 echartsDoc.init('#ec-doc-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");